Flyer + MarkerCluster + custom icons + pop-ups

Question

I would like to use custom badges for my markers using Leaflet MarkerCluster .

I already managed to implement my custom icons , but now marker popups no longer work.

My code is as follows:

var markers1 = new L.MarkerClusterGroup(); // add markers with popup info var geoJsonLayer1 = L.geoJson(Myplaces, { onEachFeature: function(feature, layer) { layer.bindPopup(feature.properties.Name); } }) // add markers with custom icons var geoJsonLayer1 = L.geoJson(Myplaces, { onEachFeature: onEachFeature, pointToLayer: function(feature, latlng) { var iconURL = feature.properties.img; return new L.Marker(new L.LatLng(feature.geometry.coordinates[1], feature.geometry.coordinates[0]), { icon: L.icon({ iconAnchor: [0, 0], popupAnchor: [0, 0], iconUrl: iconURL }) }); } }) // add markers to map markers1.addLayer(geoJsonLayer1); map.addLayer(markers1); 

When I delete a part for custom icons (the section below "// add markers with custom icons") the marker popups work fine again ...

Any suggestions? Thanks for any help!

(I tried everything I could think of, and I'm going crazy here ...); )

Answer 1

Edit: Oh! misunderstood your question. Yes, the problem is that you do L.geoJson twice and do different things with them. This function returns a new L.GeoJson object, so the things you add your pop-ups to are not what you do with custom markers. So yes, you should just combine them.

 var geoJson = L.geoJson(geoJsonData, { pointToLayer: function(obj) { var mark = L.circleMarker(obj.geometry.coordinates, obj.properties); mark.bindPopup('<div>' + marks.length + '</div>'); return mark; } }); 

This code snippet is from and updated, I did here .

I will leave a bit below about custom cluster icons.

As a side note, it is usually bad practice to try to create two vars of the same name, and most linter will complain about it.

...

I created a small demo that uses clustering, pop-ups, and custom icons here .

When you create a MarkerClusterGroup, you can give it an arbitrary function with icon creation for clusters:

 iconCreateFunction: function(cluster) { var count = cluster.getChildCount(); return L.divIcon({ html: '<span class="custom">' + (count + 100) + '</span>' }) } 

Where you can put your logic for custom cluster icons. For single markers, you can pass the icon directly to the constructor. You will also notice that pop-ups work for markers and clusters.

EDIT: previous jsfiddles are now incompatible with booklet and bullet versions. Here is the working version

Hope this helps!