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)

Answer 1

You can use theMap#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');

Answer 2

User @adriana-babakanian provided a helpful idea so i built upon it. I created a new layer for each geolocation and then on the event i just used map.setLayoutProperty method to show or hide the desired layer by passing the id.

map.setLayoutProperty('focus-markers-' + id, 'visibility', 'visible');

More details can be found on this page of the mapbox api https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/

Answer 3

Similar to what others have suggested, you can use the map.setLayoutProperty - however, I don't think you have to resort to having every icon on a separate layer (I would assume this is bad for performance reasons). Something like this should work:

map.setLayoutProperty('markers', 'icon-image', {
      property: 'id',
      type: 'categorical',
      stops: [
       [clickedId, 'icon-square'],
      ],
      default: 'icon-round,
    });

You should be able to get the clickedId using map.queryRenderedFeatures . Hope that might help you or some others