Change Mapbox icon on event

Question

I'm adding some circle icons to a layer in mapbox and it works well, but i need to update the icon (change the icon) of a specific geoLoc after an event. Now the event part isn't the problem but i have no idea how to change the icon (after the map has been initialized, without re-initializing the map).

Not sure if it's useful, but here's how the geoJSON looks:

"type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.341896,
          53.710173
        ]
      },
      "properties": {
        "icon": "circle",
        "id": "392"
      }
    }, ... {} ... {}
  ]
}

And how i initialize the style layer

this.map.addLayer({
    'id': 'markers',
    'type': 'symbol',
    'source': 'source-markers',
    'layout': {
        'icon-image': '{icon}-15-theme',
        'icon-size': 1,
        'icon-allow-overlap': true,
    },
    'paint': {
        'icon-color': '#00a19a'
    },
    'filter': ['all', ['!has', 'point_count']],
}, addBelowLayer);

In short each set of coordinates has a circle that represents it's location, when I click on the circle it should zoom in and change the shape to a square. The zoom in works but I can't figure out how to change the icon to a square. I've added a square icon to my map style but no idea how to make the switch.

Any ideas? (using Mapbox GL JS)

Adriana Babakanian Adriana Babakanian · Accepted Answer · 2020-03-24T21:47:59

You can use the Map#setLayoutProperty method inside your map event listener, passing:

'markers' as the layerId argument,
icon-image as the name argument of the layout property to set, and
the name of the square image in your sprite sheet as the value argument.

So, something like:

map.setLayoutProperty('markers', 'icon-image', 'square-15-theme');

Change Mapbox icon on event

2 Answers