Mapbox gl - Change Marker icon on click

Viewed 20

Following 2 approaches are no working -

let visited = [];

map.addLayer({
  id: layer_name,
  type: "symbol",
  source: source_name,
  layout: {
    "icon-image": [
      "case",
      [">", ["index-of", ["get", "id"], visited], -1],
      "visited-icon",
      "normal-icon",
    ],
    "icon-size": 0.25,        
    "icon-allow-overlap": true,
  },
});

I get following error for that icon-image expression

layers.marker_layer.layout.icon-image[1][1][2]: Expected an array with at least one element. 
If you wanted a literal array, use ["literal", []].

What is wrong with that expression??

Second approach

As I understand, initially, visited array will be empty. So, it will have nothing to work on so I tried below approach -

map.on("click", layer_name, (e) => {

    visited.push(e.features[0].properties.id);    
    
    map.setLayoutProperty(layer_name, "icon-image", "normal-icon", [
        "match",
        ["get", "id"],
        e.features[0].properties.id,
        "visited-icon",
        "normal-icon",
      ]);
});

But this too didn't change it the marker icon image.

What am I missing here?

0 Answers
Related