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 (eg the clicked marker)?

Answer 1

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.

Answer 2

I faced the same issue and finally, I found a way and documented my findings in my medium. This will help you. https://medium.com/@sameeraviraj/how-to-add-multiple-draw-points-in-mapbox-gl-js-a40235003650