Présentation de Leaflet
Lefleat permet d’afficher simplement et rapidement une carte à la façon google maps. Pourquoi ne pas utiliser google maps du coup ? Très simplement, car l’API de google est désormais payante alors que lefleat est gratuit. Nous allons voir comment mettre simplement en place une carte leaflet sur son site.
Vous avez deux solutions utiliser le CDN de leaflet ou télécharger en local. Pour ce qui ne savent pas ce que c’est le CDN, c’est tout simplement un service qui héberge à votre place la librairie. C’est bien dans le sens où on ne gère pas cet hébergement, mais si pour une raison x ou y le serveur vient à disparaître ou supprimer le fichier, votre lien devient corrompus.
Table of Contents
Méthode 1 : CDN
Pour une utilisation en CDN, il suffit de copier c’est deux ligne de code sur votre page html, par exemple index.html
<head> <title>Ma carte leaflet</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script> </head>
Méthode 2 : local
<head> <title>Ma carte leaflet</title> <link rel="stylesheet" href="./leaflet/leaflet.css" /> <script src="./leaflet/leaflet.js"></script> </head>
Le Code html
<div id="mapid"></div>
Le code JS
- Il vous suffira de remplacer dans l’exemple le 51.505 et -0.09 par la latitude et longitude respective de votre lieu.
- L.tileLayer permet d’indiquer des informaation en bas de votre carte.
- L.marker permet d’afficher une popup (marker sur la carte) avec un message personnalisé
document.addEventListener("DOMContentLoaded", function(){
var map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://dahoo.fr">Fabacks</a> contributors'
}).addTo(map);
L.marker([51.505, -0.09]).addTo(map)
.bindPopup('Mon lieu que j'affiche.')
.openPopup();
});
Le code CSS
Le css permet de définir les dimension de cette carte. On peut aussi redéfinir les couleurs der la popup de leaflet par exemple.
#mapid {
height: 350px;
width: 350px;
}
