Mapbox Icon-Image Dynamic Symbol (icon) Loading with Sprite

Question

I am trying to do something I feel is very simple, yet seems that I am clearly misunderstanding a crucial piece of the mapbox addlayer feature.

The Goal

Create dynamically identified icons, based on a features data value (e.g. geojson feature data vale title: "walmart"). Essentially just adding dynamic store icons from the sprite image when those locations are queried via tilequery. picture representation here

The problem

I keep getting an error when trying to use the sprite values from the style. Error: util.js:349 Image "airport-11" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.

I see tons of resources talking about sprites, but none discuss how to exactly implement them in this fashion. I have even tried querying the sprite and then adding the values using dot notation to access sprite values. This gives an error of "undefined" and invalid value.

Example code:

      map.addLayer({
    id: "tilequery-points",
    type: "symbol",
    source: "tilequery", // Set the layer source
    layout: {
      "icon-image": [
        "match",
        ["get", "title"],
        ["HEB"],
        "H-E-B_logo",
        ["Pilot Flying j"],
        sprite.Pilot_Travel_Centers_logo,
        // "Pilot_Travel_Centers_logo",
        ["Dollar General"],
        "Dollar_General_logo",
        ["Cumberland Farms Corp"],
        "Cumberland_Farms_logo (1)",
        ["CEFCO"],
        "CEFCO-convenience-stores-Logo_510px",
        ["BJs Wholesale Inc"],

The Question

How do I access the sprite values and not get an error?!!! Thanks for the help! I Wouldn't ask if I didn't need it!

UPDATE

I have figured out that to use sprite images inside of any layer, the images will automatically be available if you have them in your Mapbox studio sprite image collection. The confusion was that previously, I was not able to use them from link. However, it should work automatically.

Hope it helps!

Steve Bennett Steve Bennett · Accepted Answer · 2021-04-22T00:09:12

It's true the documentation about sprites is not super clear. I'll try to summarise (simplifying a bit).

A Mapbox GL style has one sprite. That's a PNG containing all the icons, plus a JSON file specifying what each icon is called (its icon ID), and where it located within the PNG. The sprite is specified by giving a URL as the sprite property: https://docs.mapbox.com/mapbox-gl-js/style-spec/sprite/

You can also add images to the sprite dynamically after the map loads, with map.loadImage and map.addImage, specifying the icon ID.

To display an icon, you use that same ID in a symbol layer: "icon-image": "myicon".

You can run into trouble when you try to combine your own icons with those in a Mapbox basemap (which are Maki icons with names like `airport-11').

To combine them, you can do one of these three things:

upload your icons to a style in Mapbox Studio
load your icons dynamically
generate a new sprite sheet offline, using something like mbsprite

I don't know what you meant about "dot notation", but no, that's not the right path.

Mapbox Icon-Image Dynamic Symbol (icon) Loading with Sprite

1 Answers