1

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.

https://jsfiddle.net/Moniquer/nnoja0ps/1/

edit: solved the issue!

closed as off-topic by PolyGeo May 17 '18 at 22:59

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions seeking help to debug/write/improve code must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Providing a clear problem statement and evidence of a code attempt will help others to help you. See: How to create a Minimal, Complete, and Verifiable example." – PolyGeo
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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
1

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) {
                      coords.push(pair[1],pair[0]);
                    return new L.LatLng(pair[1], pair[0]);
                  });
                  var nextBounds = new L.LatLngBounds(latLngs);
                  bounds.extend(nextBounds);
                }
       var survymarkloc = bounds.getCenter();


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


        markerClusters.addLayer(survmarker);



}

After fetching the data:

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



          $.ajax({
                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);
                  }
                  else{
                       vm.maplayerset=false;
                  }
                }
          });
   }


  // add the cluster layer

  vm.mapfull.addLayer(markerClusters);

Regards,

Fergus

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

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