CODEWITHSUNDEEP
javascriptleafletmapbox
J. Becker
J. Becker

Reputation: 103

How to hide markers that are in a cluster (Mapbox.js / Leaflet Markercluster)?

I am showing photos on a map which are clustered where they are close together. For some reason I can't figure out, markers within a marker cluster still show - either below or above the cluster they are in. (see here for a demo).

When they happen to be below the cluster it is merely a cosmetic issue (which I'd still like to resolve), as clicking the cluster will still zoom into that cluster as expected.

However, when the markers are rendered above the cluster, clicking the cluster will almost always register as a click on the marker, which is not the intended behavior.

Long story short, how do I make contained markers disappear from my clusters (and obviously make them reappear as soon as they are not in a cluster group any more?

This is the relevant code:

< script >
  L.mapbox.accessToken = '###MyMapboxToken###';
var map = L.mapbox.map('home-worldmap', 'mapbox.dark', {
  // These options apply to the tile layer in the map.
  tileLayer: {
    // This map option disables world wrapping. by default, it is false.
    continuousWorld: false,
    // This option disables loading tiles outside of the world bounds.
    noWrap: true
  }
}).setView([30, 0], 2);
map.scrollWheelZoom.disable();


var clusterGroup = new L.MarkerClusterGroup();
map.addLayer(clusterGroup);
var myLayer = L.mapbox.featureLayer().addTo(map);
var geojson = {
  type: 'FeatureCollection',
  features: [{
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [-19.512555, 63.530581666667]
      },
      properties: {
        title: 'Skógafoss from Below',
        'marker-size': 'small',
        'marker-color': '#ffcc11',
        'marker-symbol': 'camera',
        url: 'http://phototastic.world/photo/skogafoss-from-below/'
      }
    }, {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [-23.31073, 64.92612]
      },
      properties: {
        title: 'Kirkjufellsfoss on a Cloudy Day',
        'marker-size': 'small',
        'marker-color': '#ffcc11',
        'marker-symbol': 'camera',
        url: 'http://phototastic.world/photo/kirkjufellsfoss-on-a-cloudy-day/'
      }
    }
    /* more Features in the same format ... */
  ]
};
myLayer.setGeoJSON(geojson);
myLayer.on('click', function(e) {
  document.location.href = e.layer.feature.properties.url;
});
clusterGroup.addLayer(myLayer);
map.fitBounds(myLayer.getBounds()); < /script>

Full source can be found here: http://phototastic.world/world-travels/

Thanks for your help!

Upvotes: 2

Views: 2431

Answers (1)

Stranded Kid
Stranded Kid

Reputation: 1395

I can't really test in a fiddle because you are using token and stuff, but I think that the "issue" is coming from the fact that you add the mapbox layer to the map, and then the cluster layer to the map, meaning that technically on leaflet side both are on the map. So the cluster layer is acting correctly, aggregating data and stuff, but the mapbox layer is also added independently, and so is displayed.

Try to remove

.addTo(map);

in

var myLayer = L.mapbox.featureLayer().addTo(map);

Upvotes: 2

Related Questions