Temps de lecture : 34 minutes environ.
Série : Tutoriels OpenStreetMap
Cet article vient remplacer l'article de 2018 qui est, de fait, déprécié.
Ce tutoriel vous présente une alternative gratuite à Google Maps pour votre site et une mise en œuvre détaillée pas à pas.
OpenStreetMap
Pour commencer, parlons un peu d’OpenStreetMap. Il s’agit d’un projet international fondé en 2004 dans le but de créer une carte libre du monde.
En plus de fournir des cartes, open source, de nombreuses API permettent de rendre leur utilisation très proche de Google Maps, ce qui en fait une alternative très crédible.
Initialisation de l’API
Pour initialiser l’API, nous devrons utiliser une bibliothèque Javascript qui nous donnera toutes les ressources pour interagir avec les serveurs d’OpenStreetMap. La librairie que j’utilise est Leaflet. Nous allons créer un fichier HTML contenant le code ci-dessous
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LeafletJS Intro</title>
<!-- Ajout du CSS de LeafletJS -->
<link rel="stylesheet" href="css/leaflet.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Ajout du Javascript de LeafletJS -->
<script src="js/leaflet.js" defer></script>
<script src="js/scripts.js" defer></script>
</head>
<body>
<h1>Titre</h1>
<!-- Création d'un conteneur pour la carte -->
<div id="map"></div>
</body>
</html>Après avoir créé le HTML, nous allons donner une hauteur au conteneur de la carte, dans notre fichier CSS
#map{
height: 400px;
}Puis nous allons initialiser la carte et la centrer sur Paris
// On déclare les coordonnées de Paris
let lat = 48.852969;
let lon = 2.349903;
// On initialise la carte (en lui passant 'map' qui est l'ID de la DIV contenant la carte)
let map = L.map("map", {
zoom: 13,
center: [lat, lon]
});
// On ajoute le calque permettant d'afficher les images de la carte
L.tileLayer("https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png", {
minZoom: 1,
maxZoom: 20,
attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>'
}).addTo(map);Ajout d’un marqueur
Après avoir affiché la carte, il pourrait être intéressant de mettre un marqueur aux coordonnées que nous avons entrées.
Pour ce faire, nous allons insérer le code d’ajout de marqueur ci-dessous juste après avoir initialisé la carte
// Nous ajoutons un marqueur
let marker = L.marker([lat, lon]).addTo(map);Ajout de plusieurs marqueurs
Leaflet nous permet également d'ajouter plusieurs marqueurs sur la carte, nous pourrons, par exemple, boucler sur des données tableau ou provenant d'une base de données.
Dans notre exemple, nous utiliserons l'objet suivant que nous ajouterons au début du fichier Javascript.
let villes = {
"Paris": {
"lat": 48.852969,
"lon": 2.349903,
"description": "Paris est la capitale de la France et une collectivité à statut particulier. Divisée en vingt arrondissements, elle est le chef-lieu de la région Île-de-France et le siège de la métropole du Grand Paris.",
"image": "paris.webp"
},
"Brest": {
"lat": 48.383,
"lon": -4.5,
"description": "Brest est une commune française, chef-lieu d’arrondissement du département du Finistère dans la région Bretagne. C'est un port important, deuxième port militaire en France après Toulon, situé à l'extrémité ouest de la Bretagne.",
"image": "brest.webp"
},
"Quimper": {
"lat": 48.0,
"lon": -4.1,
"description": "Quimper est une commune française de la région Bretagne située dans le nord-ouest de la France. Préfecture du département du Finistère et siège du Conseil départemental, elle est composée de deux cantons. Elle est également la capitale traditionnelle de la Cornouaille, du Pays Glazik et du Pays de Cornouaille (331 300 habitants en 2009), le siège de l'intercommunalité de Quimper Bretagne occidentale (100 187 habitants en 2014), le siège de l'arrondissement de Quimper et enfin le siège du diocèse de Quimper et Léon. Ses habitants sont appelés les Quimpérois.",
"image": "quimper.webp"
},
"Bayonne": {
"lat": 43.5,
"lon": -1.467,
"description": "Bayonne, Baiona en basque et en gascon, est une commune française et l’une des deux sous-préfectures du département des Pyrénées-Atlantiques, en région Nouvelle-Aquitaine.",
"image": "bayonne.webp"
}
}
Pour boucler, nous modifierons notre ligne de marqueur comme suit
// On boucle sur les villes
for(let [ville, contenu] of Object.entries(villes)){
let coords = [contenu.lat, contenu.lon];
// On crée le marqueur pour chaque ville
let marker = L.marker(coords).addTo(map);
}Les bulles d’information
Il peut être nécessaire, dans certaines utilisations des cartes OpenStreetMap, de faire apparaître une bulle d’information lorsque l’utilisateur cliquera sur le marqueur.
Dans l’API, ces bulles sont appelées « Popup ». Elles doivent être « attachées » à chacun des marqueurs et s’activer au clic de l’utilisateur.
Voici le code à ajouter pour nous permettre d’afficher la ville correspondant au marqueur
// On boucle sur les villes
for(let [ville, contenu] of Object.entries(villes)){
let coords = [contenu.lat, contenu.lon];
// On crée le marqueur pour chaque ville
let marker = L.marker(coords).addTo(map);
marker.bindPopup(ville);
} Si vous souhaitez personnaliser la popup, il est tout à fait possible d'ajouter du HTML.
let popup = `<div class="popup">
<img src="/images/${contenu.image}" alt="${ville}" width="50" height="50">
<div>
<h2>${ville}</h2>
<p>${contenu.description}</p>
</div>
</div>`;
marker.bindPopup(popup);Les marqueurs personnalisés
L’API Leaflet permet de personnaliser les marqueurs affichés sur la carte.
Avant d’écrire du code, il sera nécessaire de créer les images correspondantes.
Dans l’exemple suivant, nous allons utiliser une image appelée « pin.png », d’une taille de 25 par 41 pixels, qui sera accessible depuis le dossier images, ce qui donnera un résultat comme celui ci-dessous.
Voici le code à modifier
for(let [ville, contenu] of Object.entries(villes)){
let coords = [contenu.lat, contenu.lon];
// On charge l'icône du marqueur
let icone = L.icon({
iconUrl: "/images/pin.png",
iconSize: [25,41],
iconAnchor: [12.5, 41],
popupAnchor: [0, -41]
});
// On crée le marqueur pour chaque ville
let marker = L.marker(coords, {
icon: icone
}).addTo(map);
let popup = `<div class="popup">
<img src="/images/${contenu.image}" alt="${ville}" width="50" height="50">
<div>
<h2>${ville}</h2>
<p>${contenu.description}</p>
</div>
</div>`;
marker.bindPopup(popup);
}
Le regroupement de marqueurs
Lorsque de nombreux marqueurs se trouvent sur une carte, il peut être nécessaire de les regrouper pour faciliter sa lecture, ceux-ci apparaissant séparés lorsque le zoom le permet.
Les groupes de marqueurs s’appellent des « clusters ».
L’API Leaflet ne permet pas de faire des regroupements de marqueurs. Nous utiliserons une bibliothèque complémentaire appelée Markercluster.
Le code de notre page HTML ressemblera à ceci
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LeafletJS Intro</title>
<link rel="stylesheet" href="css/leaflet.css">
<link rel="stylesheet" href="css/MarkerCluster.css">
<link rel="stylesheet" href="css/MarkerCluster.Default.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/leaflet.js" defer></script>
<script src="js/leaflet.markercluster.js" defer></script>
<script src="js/scripts.js" defer></script>
</head>
<body>
<h1>Titre</h1>
<div id="map"></div>
</body>
</html>Nous adapterons également le javascript pour ajouter les clusters
// En début de fichier
let markers = L.markerClusterGroup();
// En milieu de fichier
// On crée le marqueur pour chaque ville
let marker = L.marker(coords, {
icon: icone
}); // Retrait de addTo(map)
// On ajoute le marqueur au cluster
markers.addLayer(marker);
// Après la boucle
// On ajoute les clusters à la carte
map.addLayer(markers);Adapter le zoom pour afficher tous les marqueurs
Il pourra être nécessaire, ponctuellement, d’adapter le zoom de la carte pour afficher automatiquement tous les marqueurs.
L’approche est simple, regrouper tous les marqueurs dans un tableau et demander à ce que le zoom s’adapte pour qu’ils soient tous visibles.
// Ajouter au début du fichier
let limites = [];
// Dans la boucle
limites.push(coords);
// Après la boucle
map.fitBounds(limites);Voilà, bon amusement
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat
Article publié le
Catégories : CSS HTML Javascript Tutoriel openstreetmap
Mots-clés : Javascript Ajax Openstreetmap css html html5 css3 js leafletjs
Partager :
