Mapbox GL JS change marker image programmatically?

Question

I am using Mapbox GL JS to display a lot of pins on a map with custom marker image:

map.on('load', function () {
  map.loadImage("/path/to/pin1.png", function(error, image) {
      if (error) throw error;
      map.addImage("custom-marker", image);
  });

  map.addLayer({
      id: "unclustered-point",
      source: "geolocations",
      filter: ["!", ["has", "point_count"]],
      type: "symbol",
      layout: {
          "icon-image": "custom-marker",
          "icon-allow-overlap": true,
          "icon-anchor": "bottom",
          "icon-size": 0.5
      }
  });

  //...

});

Is there any way to change a single marker image programmatically (e.g. the clicked marker)?

Lookup setFeatureState in the API docs, and feature-state in the style spec. — AndrewHarvey
Already tried that, it throws an error: "feature-state" data expressions are not supported with layout properties. — nagyadrian
Oh yes you're right sorry. In that case see my answer below. — AndrewHarvey

AndrewHarvey AndrewHarvey · Accepted Answer · 2019-11-04T22:04:18

You can add two layers, a "clicked" layer and an "unclicked" layer, then set the filter (setFilter) such that each layer filters only the clicked or unclicked features.

Mapbox GL JS change marker image programmatically?

2 Answers