NavCities

Documentation de notre API

Créé: 21/05/2016
Dernière mise à jour: 21/05/2016
Par: NavCities
Email: contact@navcities.com

Guide de Démarrage Rapide

L'API Navcities est une solution WebMapping utilisable dans tous les projets de localisation Web/LBS basés sur la cartographie du maghreb .

Avantages

Facile à intégrer dans vos sites Web
Ne nécessite aucun développement supplémentaire, ni aucune maintenance.
Elle peut être utilisée pour localiser une ou plusieurs POIs (agences bancaires, hôtels, sociétés, concurrents, ...)
Il utilise les standards du marché et exploite notre serveur cartographique WMS ou notre base de tuiles d'images.
Utilise OpenLayer et interfaçable avec toutes les applications utilisant OpenLayer.
Avec les différents systèmes de projections (WGS84, Spherical Mercator, …) notre API exploite toute la richesse de notre cartographie en mode Overlay avec tous les moteurs cartographiques du marché (Google Street, Google Satellite, Bings, Yahoo, OpenStreetMap)

Le module map permet d’afficher fond cartographique tuilé de NavCities basé sur OpenLayers.
Pour cela il faut d'abord charger la bibliothèque OpenLayers:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="navcities/css/ol.css" /> <!-- Chargemment du Feuilles de style OpenLayers v3 -->
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="navcities/js/ol.js"></script> <!-- Chargemment de la bibliothèque JavaScript OpenLayers v3 -->
<script type="text/javascript">
	<!-- Votre code javascript içi... -->
</script>
</body>
</html>

En suite il faut utiliser le serveur de tuiles Navcities comme lindique code-source suivant:

// -------------- Définition du centre de la carte (Maroc) ----------------
var defaultCenter = ol.proj.transform([-8.974416, 30.174918], 'EPSG:4326', 'EPSG:3857');
var navcitiesXYZSource = new ol.source.XYZ({
	url: "http://api.navcities.com/tilecache/tilecache.py/1.0.0/lintermediaire/{z}/{x}/{y}.png?user=demo" 
	// user=demo pour une version d'essai de la carte navcities 
});

// -------------- Définition du tuile de carte navcities ----------------
var navcitiesMaps = new ol.layer.Tile({
	name: 'Navcities Maps',
	visible: true,
	preload: Infinity,
	source: navcitiesXYZSource
});

// -------------- Déclaration du view de la carte  ----------------
var view = new ol.View({
		center: defaultCenter,
		zoom: 6
	}),
	map = new ol.Map({
	target: 'map',
	layers: [navcitiesMaps],
	view: view
});

Demo-Map

Le module proximité permet d’afficher l’ensemble des points d’intérêts autour d’une position (résultat à partir d’un fichier text) sur une carte.

1- Résultat en format ARML-KML:

//...
function displayPoi(lon, lat, code){
//...
//KML
url_poi = 'http://api.navcities.com/v2/msmar.php?longitude='+lon+'&latitude='+lat+'&maxNumberOfPois=50&searchterm='+code+'&user=demo';
console.log(url_poi);

//ARML
url_poi = 'http://api.navcities.com/v2/armlmar.php?longitude='+lon+'&latitude='+lat+'&maxNumberOfPois=50&searchterm='+code+'&user=demo';
console.log(url_poi);
}
displayPoi(lon,lat,code);
//...

1. Longitude et latitude sont les coordonnées du point autour duquel on effectue la recherche
2. maxNumberOfPois : nombre de points à retourner (valeur maximale 100)
3. searchterm : Recherche les points dont la catégorie contient le mot spécifié (S’il est vide, la recherche retourne les points les plus proches)

2- Résultat en format XML:

//...
function displayPoi(lon, lat, code){
//...
url_poi = 'http://api.navcities.com/v2/xml_poiproxy.php?longitude='+lon+'&latitude='+lat+'&maxNumberOfPois=50&'
'searchterm='+nom+'&searchcat='+code+'&user=demo&R=100000';
console.log(url_poi);
}
displayPoi(lon,lat,code);
//...

1. Longitude et latitude sont les coordonnées du point autour duquel on effectue la recherche
2. maxNumberOfPois : nombre de points à retourner (valeur maximale 100)
3. searchterm : Recherche les points dont le nom ou la catégorie contient le mot spécifié (S’il est vide, la recherche retourne les points les plus proches)
4. searchcat : catégorie de recherche.

3- Résultat en format GeoJSON:

//...
function displayPoi(lon, lat, code){
//...
url_poi = 'http://api.navcities.com/v2/json_getpoiproxy.php?latitude='+lon+'&longitude='+lat+'&maxNumberOfPois=20&crit='+code+'&
'user=demo&R=100000';
console.log(url_poi);
}
displayPoi(lon,lat,code);
//...

//...
var lon=-8.974416;
var lat=30.174918;
var code=266; // hotels par défaut
var layer_source_poi=null;
var defaultCenter = ol.proj.transform([-8.974416, 30.174918], 'EPSG:4326', 'EPSG:3857');
var navcitiesXYZSource = new ol.source.XYZ({
	url: "http://api.navcities.com/tilecache/tilecache.py/1.0.0/lintermediaire/{z}/{x}/{y}.png?user=demo" 
	// user=demo pour une version d'essai de la carte navcities 
});

// -------------- Définition du tuile de carte navcities ----------------
var navcitiesMaps = new ol.layer.Tile({
	name: 'Navcities Maps',
	visible: true,
	preload: Infinity,
	source: navcitiesXYZSource
});

// -------------- Déclaration du view de la carte  ----------------
var view = new ol.View({
		center: defaultCenter,
		zoom: 6
	}),
	map = new ol.Map({
	target: 'map',
	layers: [navcitiesMaps],
	view: view
});

reversegeocode(lon, lat, 'proximite_text');
map.on('moveend', function() {
	//yes=true;
	var location=ol.proj.transform([map.getView().getCenter()[0], map.getView().getCenter()[1]],  'EPSG:3857', 'EPSG:4326');
	lon=location[0];
	lat=location[1];
	reversegeocode(lon, lat, 'proximite_text');
	displayPoi(lon,lat,code);
});
//...

Demo-Proximité

Tracé de l’itinéraire:

Module de Calcul d’itinéraire permet de générer le tracé de l’itinéraire.

1- Résultat en format WKT XML:

//...
function calculateItin(xs,ys,xe,ye,noma,nome){
//...
// AVEC (xs,ys): les coordonnées du point de départ de l’itinéraire;
//		(xs,ys): les coordonnées du point d’arrivé de l’itinéraire;
		
//		mode: mode de calcul (Voiture, Pieton)
//		noma: nom du point de départ
//		nome: nom du point d’arrivé
		
var params='&startpoint='+xs+','+ys+'&finalpoint='+xe+','+ye+'&mode='+mode;
url = 'http://api.navcities.com/v2/ax_routing.php?'+params+'&user=demo&txtstartpoint=&txtendpoint='; 

}
//...

2- Résultat en format GEOJSON:

//...
function calculateItin(xs,ys,xe,ye,noma,nome){
//...
// AVEC (xs,ys): les coordonnées du point de départ de l’itinéraire;
//		(xs,ys): les coordonnées du point d’arrivé de l’itinéraire;
		
//		mode: mode de calcul (Voiture, Pieton)
//		noma: nom du point de départ
//		nome: nom du point d’arrivé
		
var params='&startpoint='+xs+','+ys+'&finalpoint='+xe+','+ye+'&mode='+mode;
url = 'http://api.navcities.com/v2/json_routing.php?'+params+'&user=demo&txtstartpoint=&txtendpoint='; 

}
//...

1. Startpoint : les coordonnées du point de départ de l’itinéraire (Obligatoire)

   Format : « longitude »,« latitude»

2. finalpoint : les coordonnées du point d’arrivé de l’itinéraire (Obligatoire)

   Format : « longitude »,« latitude»

3. mode : Mode de calcul (Obligatoire)

   a. court : itinéraire le plus court
   b. rapide : itinéraire le plus rapide
   c. pieton : itinéraire en mode piéton

4. txtstartpoint : nom du point de départ (facultatif)
5. txtendpoint : nom du point d’arrivé (facultatif)

Feuille de route:

Pour générer feuille de route lors calcul d'itinéraire.

1- Résultat en format XML:

//...
function calculateItin(xs,ys,xe,ye,noma,nome){
//...
// AVEC (xs,ys): les coordonnées du point de départ de l’itinéraire;
//		(xs,ys): les coordonnées du point d’arrivé de l’itinéraire;
		
//		mode: mode de calcul (Voiture, Pieton)
//		noma: nom du point de départ
//		nome: nom du point d’arrivé
		
var params='&startpoint='+xs+','+ys+'&finalpoint='+xe+','+ye+'&mode='+mode;
xml.open("GET", "http://api.navcities.com/v2/xmlroadmap.php?"+params+"&txtstartpoint="+noma+"&txtendpoint="+nome+"&user=demo",  true);
}
//...

2- Résultat en format HTML:

//...
function calculateItin(xs,ys,xe,ye,noma,nome){
//...
// AVEC (xs,ys): les coordonnées du point de départ de l’itinéraire;
//		(xs,ys): les coordonnées du point d’arrivé de l’itinéraire;
		
//		mode: mode de calcul (Voiture, Pieton)
//		noma: nom du point de départ
//		nome: nom du point d’arrivé
		
var params='&startpoint='+xs+','+ys+'&finalpoint='+xe+','+ye+'&mode='+mode;
xml.open("GET", "http://api.navcities.com/v2/roadmap.php?"+params+"&txtstartpoint="+noma+"&txtendpoint="+nome+"&user=demo",  true);
}
//...

1. Startpoint : les coordonnées du point de départ de l’itinéraire (Obligatoire)

   Format : « longitude »,« latitude»

2. finalpoint : les coordonnées du point d’arrivé de l’itinéraire (Obligatoire)

   Format : « longitude »,« latitude»

3. mode : Mode de calcul (Obligatoire)

   a. court : itinéraire le plus court
   b. rapide : itinéraire le plus rapide
   c. pieton : itinéraire en mode piéton

   Note: Dans le cas de la méthode SPA (itinéraire piéton), ce paramètre n’est pas pris en considération

4. txtstartpoint : nom du point de départ (facultatif)
5. txtendpoint : nom du point d’arrivé (facultatif)

//...
//Start calcule d'itinéraire

var layer_itin_source=null;
var layer_itin;
function calculateItin(xs,ys,xe,ye,noma,nome){
	if(layer_itin_source != null ){
		layer_itin_source.clear();
	}

	var trajet_Style = new ol.style.Style({
		stroke: new ol.style.Stroke({
			color: ol.color.asString('rgba(46, 31, 249,0.8)'),
			width: 6
		})
	});
		
	var xmlhttp = new XMLHttpRequest();

	var params='&startpoint='+xs+','+ys+'&finalpoint='+xe+','+ye+'&mode='+mode;
	
	xmlhttp.onreadystatechange = function() {
		var res;
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			res = xmlhttp.responseText;

			var geojson_format = new ol.format.GeoJSON();
			layer_itin_source = new ol.source.Vector({
				projection: 'EPSG:4326'
			});
				//layer_itin.addFeatures([pointFeature, circleFeature]);
			

			var features = geojson_format.readFeatures(res,{featureProjection: 'EPSG:3857'});
			  //console.log(features);
			layer_itin_source.addFeatures(features);

			layer_itin = new ol.layer.Vector({
			   name: 'Rapide' , 
			   source:layer_itin_source,
			   style:trajet_Style
			});
			map.addLayer(layer_itin);

			var extent = layer_itin.getSource().getExtent();
			map.getView().fitExtent(extent, map.getSize());

			rapideFeatureOverlay = new ol.FeatureOverlay({
				map: map,
				style:styleSelectRapide
			});
			map.addOverlay(rapideFeatureOverlay);

		}// end if xmlhttp status

	}// end onready state
	
	url = 'http://api.navcities.com/v2/json_routing.php?'+params+'&user=demo&txtstartpoint=&txtendpoint='; 
	xmlhttp.open("GET", url, true);
	xmlhttp.send();

	//---------------- Rapide ----------------
	var xml = new XMLHttpRequest();
	xml.onreadystatechange  = function()
	{ 
	   if (xml.readyState == 4 && xml.status == 200) {
	   document.getElementById("road_map").innerHTML =xml.responseText;
	
	   }
		else { 
		 document.getElementById("road_map").innerHTML = '';
	  }
	}; 

	xml.open("GET", "http://api.navcities.com/v2/roadmap.php?"+params+"&txtstartpoint="+noma+"&txtendpoint="+nome+"&user=demo",  true); 
	xml.send(null); 
	//---------------- End Rapide ----------------
}
// End calcule d'itinéraire
//...

Demo-Itinéraire

Ce module permet de génerer les informations administratives à partir des coordonnées géographiques.

1- Résultat en format JSON:

//...
//---------------reverse geocoding ---------------
function reversegeocode(lon, lat){
var url='http://api.navcities.com/v2/reversegeocodejson.php?user=demo&lon='+lon+'&lat='+lat;
var xhr; 
try {  xhr = new ActiveXObject('Msxml2.XMLHTTP');   }
catch (e) 
{
	try {   xhr = new ActiveXObject('Microsoft.XMLHTTP');    }
	catch (e2) 
	{
	  try {  xhr = new XMLHttpRequest();     }
	  catch (e3) {  xhr = false;   }
	}
}
//...

1. lat : latitude de la position recherchée (en format wgs84)
2. lon : longitude de la position recherchée (en format wgs84)

Demo-Reverse Geocoding

Ce module permet de génerer les informations géographiques à partir d’une adresse.

1- Résultat en format JSON:

//...		
// ------------ Geocoding---------
// AVEC id : Identifiant de l'element HTML;

function getPOI(string, id){
var url = "http://api1.navcities.com/v2/getpoijson.php?user=demo&maxNumberOfPois=5&crit="+string;
var xmlhttp = new XMLHttpRequest();
//...
xmlhttp.open("GET", url, true);
xmlhttp.send();
} // End get poi

1. crit : nom de la rue, quartier ou ville.
2. maxNumberOfPois : nombre de points à retourner (valeur maximale 50)

Demo-Geocoding

NavCities

Documentation de notre API

Guide de Démarrage Rapide

Avantages

Module Map

Module Proximité

1- Résultat en format ARML-KML:

2- Résultat en format XML:

3- Résultat en format GeoJSON:

Module de Calcul d’itinéraire

Tracé de l’itinéraire:

1- Résultat en format WKT XML:

2- Résultat en format GEOJSON:

Feuille de route:

1- Résultat en format XML:

2- Résultat en format HTML:

Module Reverse Geocoding

1- Résultat en format JSON:

Module Geocoding

1- Résultat en format JSON: