I am using Leaflet with the markercluster plugin and I am struggling with the following issue for a while and I cannot get it to work.

What I want to achive is, when clicking on the marker, the active marker icon changes and if a previous marker was selected, the previous one gets the default icon back. (In the markerClusterGroup I want to keep the coloured circles with their value but I'd like to override the icon at the base (when you can zoom no further))

I have made a fiddle with what I have so far.


edit: solved the issue!

  • Nice to have solved it by yourself! :-) Please consider adding your own answer (solution) here as well, so that if other people are in a similar situation, they can find some help here. Some people have upvoted your question, meaning they may find it useful, therefore an answer might be useful for them as well. – ghybs Dec 7 '17 at 2:25

I had similar requirement where I was getting a number of areas that surveyors were visting (as GeoJSON from an API call) and wanted to use individual icons for the surveyors but also use the markerClusterGroup feature. The features were multipolygons so the center of each was also being got for the location of the marker.

The properties of the GeoJSON consisted of an icon color and the initials of the surveyor to be shown within the icon and would have a number of entries for the different surveyors:

 "properties": {
                "block": "XYZ123",
                "job_id": 43,
                "surveyor": "John Smith",
                "surveyor_id": 2,
                "legend": "#5C870C",
                "icontextval": "JS",


 "properties": {
                "block": "ABC456",
                "job_id": 23,
                "surveyor": "Jack Jones",
                "surveyor_id": 1,
                "legend": "#d2d20d",
                "icontextval": "JJ",    

Create the marker cluster group:

 markerClusters = L.markerClusterGroup();

Then in the onEachFeature function, I set the icon features:

 function onEachFeature(feature, layer) {

        survIconText = feature.properties.icontextval;
        survCustomColour = feature.properties.legend;

        // get centroid of area

        for ( var i = 1, il = feature.geometry.coordinates[0].length; i < il; i++ ) {
                  var ring = feature.geometry.coordinates[0][i];
                  var latLngs = ring.map(function(pair) {
                    return new L.LatLng(pair[1], pair[0]);
                  var nextBounds = new L.LatLngBounds(latLngs);
       var survymarkloc = bounds.getCenter();

        var survmarker = new L.Marker.SVGMarker(survymarkloc,{ iconOptions:{circleText:survIconText,fontSize:10,fillColor:myCustomColour,color:survCustomColour,circleColor:survCustomColour,circleFillColor:survCustomColour} });



After fetching the data:

function getSurveyorsLocation(surveyortofind,passedname){
          var urlmap = "http://localhost:3070/surveyorjobs/" + surveyortofind;

                type: "GET",
                url: urlmap,
                dataType: 'json',
                success: function (response) {

                  if (response.returnval !== 'none')
                    geojson = L.geoJson(response, {style: polystyle_fras,onEachFeature: onEachFeature});
                    layerControl.addOverlay(geojson, passedname);

  // add the cluster layer




Leaflet map with individual icons once they appear after clicking on the cluster number

| improve this answer | |

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