Leaflet Cluster showing the same marker multiple times

Viewed 56

I'm trying to scrape together some code to show multiple layers of data on a leaflet map using GeoJSON. This is mostly working, however some of the data is for the exact same lat long position and when it displays in Leaflet it just shows a single marker. All of the others are buried beneath it and are inaccessible.

I then added in the MarkerCluster plugin, which spiderfied the markers, but they were all identical. Thinking this was a limitation with the basic MarkerCluster plugin, I went for the Spiderfier Clusterer and that does exactly the same thing.

The code I'm using did work with the Spiderfier Clusterer when I was just using L.marker to create the points. Now that I've switched to L.GeoJSON it seems to have stopped.

Can someone tell me what I'm doing wrong and why all of the markers in the Cluster are the same?

var oms = new OverlappingMarkerSpiderfier(timemap);

oms.addListener('click', function(marker) {
  popup.setContent(marker.desc);
  popup.setLatLng(geojsonFeature.geometry.coordinates);
  timemap.openPopup(popup);
});

function getMapInfo(thisLayer, startyear, endyear)
{
   layerGroups["layerGroup" + thisLayer] = L.layerGroup();
   var clusters = L.markerClusterGroup({
        spiderfyOnMaxZoom: true,
        showCoverageOnHover: false,
        zoomToBoundsOnClick: false,
        maxClusterRadius: 0
    });
$.getJSON("geojson.php?layer="+thisLayer+"&startyear="+startyear+"&endyear="+endyear, function (geoJSONFeature)
   {
     iconGroup["icon"+thisLayer]= new L.Icon({
           iconUrl: "css/images/"+geoJSONFeature.features[0].properties.icon,
           shadowUrl: "css/images/shadow.png",
           iconSize:     [32, 37],
           shadowSize:   [51, 37],
           shadowAnchor: [10, 37],
           iconAnchor: [10, 40],
           popupAnchor:  [5, -20]
        });

      var location = new L.geoJSON(geoJSONFeature, {
        pointToLayer: function (feature, latlng) {
         return L.marker(latlng, {icon: iconGroup["icon"+thisLayer]});
        },
        onEachFeature: function (feature, layer) {
         layer.bindPopup('<h1>'+geoJSONFeature.features[0].properties.item+'</h1><p>'+geoJSONFeature.features[0].properties.shortdesc+'</p>');
         layer.bindTooltip(geoJSONFeature.features[0].properties.item);
         oms.addMarker(layer);
        }
       }).addTo(layerGroups["layerGroup" + thisLayer]);
       timemap.addLayer(layerGroups["layerGroup" + thisLayer]);
     });
    }
0 Answers
Related