CODEWITHSUNDEEP
javascriptmapbox
mheavers
mheavers

Reputation: 30168

can't change marker icons / colors in mapbox

I'm manipulating the mapbox marker radius example here:

https://www.mapbox.com/mapbox.js/example/v1.0.0/marker-radius-search/

to attempt to change the color / icon of the markers within a certain radius of a random point, but the colors aren't changing despite the properties being registered as changed. Here's my code:

clusterLayer = L.mapbox.featureLayer('examples.map-h61e8o8e').on('ready', function(e) {
    clusterGroup = new L.MarkerClusterGroup({
      showCoverageOnHover: false,
      animateAddingMarkers: true
    });

    e.target.eachLayer(function(layer) {
        clusterGroup.addLayer(layer);
        layerArray.push(layer);
    });
    map.addLayer(clusterGroup);
});

window.setTimeout(eventFunction,eventTiming);

function eventFunction(){
  clusterLayer.setFilter(affectMarker);
}

function affectMarker(feature) {
  var fLat = feature.geometry.coordinates[1];
  var fLng = feature.geometry.coordinates[0];
  var fPt = L.latLng(fLat,fLng);
  var dist = eventPt.distanceTo(fPt);
  if (dist < eventRadius){
    feature.properties['marker-color'] = eventColorNegative;
    feature.properties['marker-symbol'] = 'danger';
  }
}

Why doesn't this work? I've verified that it is returning valid points.

Note also that the markers being used are MakiMarkers

Upvotes: 5

Views: 1403

Answers (1)

mheavers
mheavers

Reputation: 30168

I found two ways to do this, though neither, I think, is as ideal as being able to do so with the code above. The first is, rather than to use setFilter, use eachLayer:

clusterLayer.eachLayer(affectMarker);

and then in the loop, use setIcon:

layer.feature.properties['marker-color'] = eventColorNegative; layer.feature.properties['marker-symbol'] = 'danger'; layer.setIcon(L.mapbox.marker.icon(layer.feature.properties));

The other way is to first include the MakiMarkers extension (which I believe has been deprecated and rolled into Mapbox):

https://github.com/jseppi/Leaflet.MakiMarkers

and then use this syntax:

layer.setIcon(L.MakiMarkers.icon({icon: "danger", color: eventColorNegative}));

Upvotes: 2

Related Questions