Refactor mapbox cluster creation (fix double geojson load)

CrucifixArnaud · Mar 27, 2017 · c0be08a · c0be08a
1 parent 6201306
commit c0be08a
Showing 1 changed file with 32 additions and 30 deletions.
diff --git a/app/assets/js/atlas.js b/app/assets/js/atlas.js
@@ -74,7 +74,8 @@ export default class Atlas extends React.Component {
 
     artistsPromise.then((res) => {
       this.setState({
-        artistsTotal: res.features.length
+        artistsTotal: res.features.length,
+        geojson: res
       });
       this.createAtlas(res);
     });
@@ -94,41 +95,42 @@ export default class Atlas extends React.Component {
 
     new L.Control.Zoom({ position: 'topright' }).addTo(this.map);
 
-    L.mapbox.featureLayer().loadURL('/artists/geojson').on('ready', (e) => {
-      // The clusterGroup gets each marker in the group added to it
-      // once loaded, and then is added to the map
-      let clusterGroup = new L.MarkerClusterGroup({
-        removeOutsideVisibleBounds: true,
-        maxClusterRadius: 45,
-        polygonOptions: {
-          fillColor: 'transparent',
-          color: '#8f399a',
-          weight: 1,
-          opacity: 1,
-          fillOpacity: 0.5
-        }
-      });
-      e.target.eachLayer((layer) => {
-        let marker = layer,
-          feature = marker.feature,
-          artist = feature.properties;
-
-        marker.addEventListener('click', () => {
-          this.setState({
-            artist: artist
-          });
-          this.refs.panel.open();
-        });
+    let clusterGroup = new L.MarkerClusterGroup({
+      removeOutsideVisibleBounds: true,
+      maxClusterRadius: 45,
+      polygonOptions: {
+        fillColor: 'transparent',
+        color: '#8f399a',
+        weight: 1,
+        opacity: 1,
+        fillOpacity: 0.5
+      }
+    });
+
+    for (let i = 0; i < this.state.geojson.features.length; i++) {
+      let a = this.state.geojson.features[i];
+      let marker = L.marker(new L.LatLng(a.geometry.coordinates[1], a.geometry.coordinates[0]));
+      let artist = a.properties;
 
-        marker.setIcon(L.icon(feature.properties.icon));
-        clusterGroup.addLayer(layer);
+      marker.addEventListener('click', () => {
+        this.setState({
+          artist: artist
+        });
+        this.refs.panel.open();
       });
-      this.map.addLayer(clusterGroup);
 
+      marker.setIcon(L.icon(a.properties.icon));
+      clusterGroup.addLayer(marker);
+    }
+
+    this.map.addLayer(clusterGroup);
+
+    L.mapbox.tileLayer('mapbox.dark')
+    .addTo(this.map) // add your tiles to the map
+    .on('load', () => {
       // Atlas is create hide loader
       loader.classList.remove('active');
     });
-
   }
 
   centerView(lat, lng, zoom = 10) {