Multiple icon sprites with Mapbox gl js

Question

In Mapbox.js you could specify an image per marker, is there any way to do this with Mapbox GL JS? Or is it limited to one sprite per map? The marker sprite could grow to a size which is slow to download.

Is it possible to use multiple sprites at once?

Also is there a way to switch sprite once the map has loaded? I have tried to reload the original style with map.setStyle() but the custom markers do not reappear.

Answer 1

First, let's make sure we're on the same page with respect to terminology:

• A "symbol layer feature" (i.e. a marker) may display an "icon" on the map
• A "sprite" is a collection of "icons"
• A "style" has one "sprite"

---

In Mapbox.js you could specify an image per marker, is there any way to do this with Mapbox GL JS?

Each "symbol layer feature" within a layer may display different "icons" using "tokens". This is mentioned in our documentation.

If your "symbol layer features" have an icon property, you can make the features use that icon with

"symbol-icon": "{icon}"

---

Is it possible to use multiple sprites at once?

You cannot use multiple sprites at once. You can use multiple icons within a layer. You can use multiple icons for a feature by creating multiple symbol layers.

---

Also is there a way to switch sprite once the map has loaded?

No, this is not possible with Mapbox GL JS.

Answer 2

To follow from Lucas' answer above, if you want to change an icon for a point at runtime you should have a seperate layer using the other icon image and then simply remove the point from one layer's source's data and add it to the other.