Le blog de Philippe Poisse - Mot-clé - GeoJSON2024-03-24T20:00:51+01:00Philippe Poisseurn:md5:461e3511a43adbbb7d3a84a8af2d4212DotclearMapbox : clustering à partir d’un fichier GeoJSONurn:md5:8e0d089164e323b42016ae999c6a10532016-04-19T19:36:00+02:002016-04-19T19:36:00+02:00Philippe PoisseLeafletClusterGeoJSONLeafletMapbox<p>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.<br />
Voici une solution très simple avec Mapbox pour réaliser des clusters depuis un fichier GeoJSON.</p> <h2>La carte</h2>
<div><iframe height="200" src="http://www.philippe-poisse.eu/cartes/mapbox/cluster.html" width="100%"></iframe></div>
<h2>Le code JavaScript</h2>
<pre><code>
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);
});</code></pre>
<h2>Principe de base</h2>
<p>D’abord on va importer le plugin pour créer les clusters.</p>
<pre>
<code><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' /></code></pre>
<p>Vous pouvez mettre ça dans l’entête de la page HTML dans la balise Body, ça marche aussi bien.</p>
<p>Ensuite on crée la carte de façon traditionnelle.</p>
<pre>
<code>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);</code></pre>
<p>Maintenant votre carte s’affiche, mais elle est vide. Vous avez juste une jolie vue satellite. Rien de plus.<br />
Il va falloir importer le fichier GeoJSON et afficher les différents points.<br />
On va donc créer une variable pour contenir les données et les transformer en un layer exploitable.</p>
<pre>
<code>var data = L.mapbox.featureLayer()</code></pre>
<p>Puis on charge le fichier GeoJSON.</p>
<pre>
<code> .loadURL('./data.js')</code></pre>
<p>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.</p>
<pre>
<code>.on('ready', function(e) {
var clusterGroup = new L.MarkerClusterGroup();
e.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup); });</code></pre>
<p>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.</p>
<p id="conclusion">On arrive donc, assez facilement, à un résultat probant sans trop d’effort et avec un code très léger.<br />
La classe, non ?</p>http://blog.philippe-poisse.eu/index.php?post/2016/04/19/Mapbox-%3A-clustering-%C3%A0-partir-d%E2%80%99un-fichier-GeoJSON#comment-formhttp://blog.philippe-poisse.eu/index.php?feed/atom/comments/186