Alternative à L'API Javascript Google 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 :
- Directement dans la balise concernée dans un attribut style
- Dans une balise style placée dans le "<head>"
- Dans un fichier séparé
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: '© <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();