1

I am programmatically adding new markers to my map with this code:

const geojsonLayer = L.geoJSON(null,{
  pointToLayer: function(feature, latlng) {
                return new L.marker(latlng)
        }
}).addTo(mymap)
geojsonLayer.addData(jsonData)

This works just fine.

Now, I have many markers which are one on top of the other (same coordinates) so I want to use the markercluster plugin for a nicer display. My new code:

function onEachFeature(feature, layer) {

  layer.bindPopup('<b>Name:</b> ' + feature.properties.name)

}
    var markers = L.markerClusterGroup();

const geojsonLayer = L.geoJSON(null,{
  onEachFeature: onEachFeature,
  pointToLayer: function(feature, latlng) {
                return new markers.addLayer(L.marker(latlng))
        }
}).addTo(mymap)

geojsonLayer.addData(jsonData)
mymap.addLayer(markers);

Throws a

Uncaught TypeError: this._needsClustering is undefined
    addLayer MarkerClusterGroup.js:95
    pointToLayer (index):243
    je GeoJSON.js:227
    De GeoJSON.js:187
    addData GeoJSON.js:117
    addData GeoJSON.js:107
    <anonymous> (index):256
MarkerClusterGroup.js:95:3

Line 95 of that script is

    //Don't cluster non point data
[...]
        this._needsClustering.push(layer);

What am I missing?

UPDATE

return new markers.addLayer(L.marker(latlng))

should actually be

return markers.addLayer(L.marker(latlng))

I added the 'new' because I was getting the same data of all the markers as the latest feature in my json file, so I thought that adding 'new' would solve the issue (i.e. create a new marker for each feature).

Now I have as many marker as the features, in the correct latitude and longitude, with the wrong metadata in the popups (i.e. the same metadata for all of them, coming from the latest fetaure metadata).

Second update

I've made some progress. It turns out that I need to add the layer outside the geojsonLayer constant declaration, not at each return of the pointToLayer function. This code places the right metadata in the popups:

const geojsonLayer = L.geoJSON(null,{
  onEachFeature: onEachFeature,
  pointToLayer: function(feature, latlng) {
                return new L.marker(latlng)
        }
      }
}).addTo(mymap)

/****** INIT ******/
geojsonLayer.addData(jsonData);
markers.addLayer(geojsonLayer);
mymap.addLayer(markers);

Now I have some smaller issues of visualisation: there's an extra marker underneath the cluster circle, before it is exploded. After it has been exploded and reimploed again the stray marker disappears. See here.

5
  • 1
    I’m voting to close this question because it's been cross-posted to stackoverflow.com/questions/68230296/… – IvanSanchez Jul 2 at 22:42
  • You're right, apologies for that. – HBMCS Jul 2 at 22:48
  • 2
    @IvanSanchez The SO question is gone. Please leave this one. Thanks – Machavity Jul 3 at 0:28
  • @IvanSanchez Thank you both. I've edited the question to reflect my current (updated) issue. My code in the wild is here: landscapeofmutability.gla.ac.uk – HBMCS Jul 3 at 0:40
  • Upon checking on the browser's console, I see that markers contains indeed only one object (the last feature). – HBMCS Jul 3 at 1:01
0

What you call "a stray marker" are actually three original markers, added to the map when adding geojsonLayer layer to the map.

Since markers are added through marker cluster group, just leave out final .addTo(map) when creating layer:

const geojsonLayer = L.geoJSON(null, {
  onEachFeature: onEachFeature,
  pointToLayer: function(feature, latlng) {
    return new L.marker(latlng)
  }
});

geojsonLayer.addData(jsonData);
markers.addLayer(geojsonLayer);
mymap.addLayer(markers);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.