en noir : code obligatoire
en vert : explications
en rouge : code personnalisable
en grisé : construction d'une carte simple par défaut
<!DOCTYPE html>
<html><head>
<title>Carte Leaflet avec regroupement de marqueurs en fonction du zoom pleine fenêtre</title>
<meta charset="utf-8" />
<style>
/* style pour carte plein écran, pour limiter voir la div "carte" */
#carte {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!--Inclusion de la bibliothèque Leaflet et sa feuille de style idem pour le pugin MarkerCluster.-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js'></script>
</head>
<body>
<!-- Le conteneur de notre carte (avec une contrainte CSS pour la taille -->
<div id="carte" ></div>
<script>
var macarte = L.map('carte').setView([44.465151, 5.097656], 5);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(macarte);
// Notre cluster
var markers = L.markerClusterGroup();
// Nos marqueurs
var marker1 = L.marker([47.175774, -0.483683]);
var marker2 = L.marker([38.299974, -5.267601]);
var marker3 = L.marker([46.974821, -0.21419]);
var marker4 = L.marker([47.01719, -0.196574]);
var marker5 = L.marker([47.145262, -0.537418]);
// On ajoute les marqueurs au cluster
markers.addLayer(marker1);
markers.addLayer(marker2);
markers.addLayer(marker3);
markers.addLayer(marker4);
markers.addLayer(marker5);
// On affiche le cluster
macarte.addLayer(markers);
</script>
<noscript>
<p>Il semble que JavaScript soit désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript> </body>
</html>