Le projet OpenStreetMap

Google maps : service payant ?

En effet depuis Juin 2018 pour afficher dans un site web une carte google Maps il faut obtenir une clé API. Et pour obtenir cette clé il faut ouvrir un compte de facturation ...

Mais il existe un service de cartographie en ligne et gratuit : OpenStreetMap (OSM).

Mais OSM c'est uniquement une base de données cartographique en ligne. Pour afficher une carte OSM dynamique dans une page web il faut associer cette base de données à une API: leaflet.

API leaflet

Vous pouvez interagir avec le service OSM en ligne via l'API leaflet.
Leaflet.js est une librairie JavaScript de cartographie interactive open-source.
Le script crée un lien vers le site sécurisé du projet OpenStreetMap.

Utilisez l'API leaflet pour se connecter au service en ligne OSM est donc une alternative à la solution Google Maps.

Première carte avec leaflet

Voir carte !

Le code HTML correspondant

... <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" /> <script type="text/javascript" src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script> ... <body> <div id="carte" style="width:100%; height:100%"></div> ...

Il charger la librairie : un fichier CSS et un fichier JS.
Ici les deux fichiers sont récupérés sur le site unpkg.com.

Il faut créer une boite identifiée carte qui va contenir effectivement une carte.

Le script

        var ma_carte = L.map('carte').setView([50.94, 1.87], 12); 
		// centrer la carte sur Calais avec un niveau de zoom de 12

        var osm_fond = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
            attribution: '© OpenStreetMap contributors',       maxZoom: 19     });
		// définir un fond de carte
        ma_carte.addLayer(osm_fond); // ajouter ce fond à la boite identifiée ma_carte

Avec la méthode L.map on définit une carte dont le centre à les coordonnées GPS 50.94 de latitude et 1.87 de longitude et un niveau de zoom de 12.

Avec la méthode L.tileLayer on définit une carte.

Ensuite il faut que cette carte devienne le "background" de la boite.

Carte avec un marqueur

Un marqueur au centre de la carte ! Voir carte !

Le code HTML

... <link rel="stylesheet" href="../leaflet/leaflet.css" /> <script type="text/javascript" src="../leaflet/leaflet.js"></script> ... <body> <div id="carte" style="width:100%; height:100%"></div> ...

Différence notable avec l'exemple précédent : on suppose que le dossier correspondant à la librairie a été récupéré sur le site https://leafletjs.com puis décompressé et installé en local.

Les différents fichiers du framework :

Notez le dossier "images" contenant les dessins des marqueurs.

Le script

	var ma_carte = L.map('carte', { zoomControl:false }).setView([48.80952, 7.776818], 13);
				
		var osm_fond = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
            attribution: '© OpenStreetMap contributors',
            maxZoom: 19     });
		// définir un fond de carte
        ma_carte.addLayer(osm_fond); // ajouter ce fond à la boite identifiée ma_carte
			
		var marker = L.marker([48.804128, 7.776792]).addTo(ma_carte).bindPopup("LIJE Creative");

Le centre de la carte correspond à la position GPS de la ville de Hagueneau !

Par rapport au script précédent une instruction supplémentaire pour positionner un marqueur au centre de la carte.

Indiquer à l'internaute sa position sur la carte via un marqueur

Il faut donc récupérer la position GPS de l'internaute grâce à l'objet geolocation de JS (qui est implémentée par les navigateurs récents) puis utiliser l'API leaflet pour définir le centre de la carte, ajouter le fond de carte et positionner le marqueur. Voir carte !

Le script correspondant

if(navigator.geolocation) navigator.geolocation.getCurrentPosition(fcarte) ;
	function fcarte(position)
	{
		var vlatitude = position.coords.latitude; 
		var vlongitude = position.coords.longitude; 
				
		var ma_carte = L.map('carte').setView([vlatitude, vlongitude], 17); 				
		var osm_fond = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
            attribution: '© OpenStreetMap contributors',
            maxZoom: 19     });
		// définir un fond de carte
        ma_carte.addLayer(osm_fond); // ajouter ce fond à la boite identifiée ma_carte
			
		var marker = L.marker([vlatitude, vlongitude]).addTo(ma_carte).bindPopup("LIJE Creative");

L'internaute est géolocalisé (si son navigateur l'autorise) et ses coordonnées sont récupérées dans deux variables.
Les méthodes L.map et L.marker sont alors argumentées avec ces deux variables.

Ce n'est donc pas plus compliqué qu'avec l'API proposée par Google.
Retour menu