Mapbox : clustering à partir d’un fichier GeoJSON
Par Philippe Poisse le mardi, avril 19 2016, 19:36 - Leaflet - Lien permanent
Lorsqu’une carte affiche un nombreux de marqueurs dans un espace réduit ceux-ci se chevauchent et l’information devient illisible. Il faut donc utiliser des clusters. Mais si les données sont au format GeoJSON l’opération peut être une peu difficile.
Voici une solution très simple avec Mapbox pour réaliser des clusters depuis un fichier GeoJSON.
La carte
Le code JavaScript
L.mapbox.accessToken = 'Votre Token Mapbox';
var map = L.mapbox.map('map')
.setView([42.6, 2.8], 10);
var satellite = L.mapbox.tileLayer('mapbox.satellite')
.addTo(map);
var data = L.mapbox.featureLayer()
.loadURL('./data.js')
.on('ready', function(e) {
var clusterGroup = new L.MarkerClusterGroup();
e.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup);
});Principe de base
D’abord on va importer le plugin pour créer les clusters.
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />
Vous pouvez mettre ça dans l’entête de la page HTML dans la balise Body, ça marche aussi bien.
Ensuite on crée la carte de façon traditionnelle.
L.mapbox.accessToken = 'Votre Token Mapbox';
var map = L.mapbox.map('map') .setView([42.6, 2.8], 10);
var satellite = L.mapbox.tileLayer('mapbox.satellite')
.addTo(map);
Maintenant votre carte s’affiche, mais elle est vide. Vous avez juste une jolie vue satellite. Rien de plus.
Il va falloir importer le fichier GeoJSON et afficher les différents points.
On va donc créer une variable pour contenir les données et les transformer en un layer exploitable.
var data = L.mapbox.featureLayer()
Puis on charge le fichier GeoJSON.
.loadURL('./data.js')
Une fois les données charger (d’où le « on » dans le code suivant) une petite fonction suffit à créer le cluster et a y insérer les données.
.on('ready', function(e) {
var clusterGroup = new L.MarkerClusterGroup();
e.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup); });
En créant d’autres variables sur le même modèle il est possible de d’afficher différents calques sur une même carte sans mélanger les marqueurs. J’en parlerai une prochaine fois.
On arrive donc, assez facilement, à un résultat probant sans trop d’effort et avec un code très léger.
La classe, non ?