Formations à l'informatique et à l'électronique

Auteur : SD
Créé le : 07-10-2018

Alternative à L'API Javascript Google Map

logo open street map

L'API Javascript Google Map est devenue payante... Voici comment la remplacer par une solution open-source.

Nous allons pour cela utiliser :

  • Open Street Map (OSM) : Un projet international fondé en 2004 dans le but de créer une carte libre du monde.
  • Leaflet : Une bibliothèque Javascript open-source

Préparer la page

Pour utiliser la bibliothèque Leaflet, il faut inclure à votre page Web un fichier CSS et un fichier Javascript.

Cette inclusion se fait dans la partie <head> de votre page Web. Le CSS doit obligatoirement être inclus avant le Javascript.

Code à ajouter dans le "<head>" :

<!-- Inclusion du CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>

<!-- Assurez-vous d'inclure le Javascript après le CSS de Leaflet -->
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

Insérer dans votre page, à l'endroit où vous voulez placer la carte, une balise "<div>" avec un "id" spécifique :

<div id="maCarte"></div>

Assurez-vous que la "<div>" qui contiendra la carte à une hauteur définie. Ceci se fait en CSS :

#maCarte { height: 480px; }

Rappel : Le CSS peut-être placé de trois manières différentes :

Plus d'informations ici : Premiers pas en CSS

Charger la carte

Pour terminer, il faut charger la carte avec du code Javascript à place à la fin du "<body>" de la page :

<script>
var mymap = L.map('maCarte').setView([45.7158, 4.8814], 16);

L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.fr/copyright">OpenStreetMap France</a> contributors'
}).addTo(mymap);
</script>

Eléments supplémentaires

Placer un marqueur

Ajouter à la fin du code Javascript :

var marker = L.marker([45.7158, 4.8814]).addTo(mymap);

Placer un popup

Ajouter à la fin du code Javascript :

// Un popup sur le marker précédent, il faut cliquer sur le marker pour le faire apparaitre
marker.bindPopup("<b>BTS SNIR</b><br>Bonjour !").openPopup();

// Un popup indépendant, une fois fermé on ne peut plus l'ouvrir
var popup = L.popup()
.setLatLng([45.7154, 4.8785])
.setContent("Le tramway !")
.openOn(mymap);

Placer un cercle

Ajouter à la fin du code Javascript :

var circle = L.circle([45.7154, 4.8785], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 75 // La taille du rayon du cercle en mètres
}).addTo(mymap);

Ajouter l'échelle de la carte

Ajouter à la fin du code Javascript :

L.control.scale().addTo(mymap);

Désactiver le zoom avec la molette de la souris

Ajouter à la fin du code Javascript :

mymap.scrollWheelZoom.disable();

Référence

https://leafletjs.com/examples/quick-start


Vous avez apprécié cet article ? Partagez le !

Icone Twitter Icone Facebook Icone LinkedIn Icone envoyer par mail Icone imprimer

Article connexe : Arduino - GPS et Serveur WEB