Custom sprite in a custom style does not work, but does when overwriting sprite property.

[lrewater]

mapbox-gl-js version: v3.5.2

browser: Chrome: Version 128.0.6613.85 (Official Build) (64-bit) (cohort: M128 Rollout) OS: Windows 11 Version 22H2 (Build 22621.4037)

Steps to Trigger Behavior

1. I have created a custom style in mapbox studio based on the style: mapbox://styles/mapbox/outdoors-v11
2. The new custom style is publicly available and published here: mapbox://styles/wilcotxdash/cm0h5e8hg002i01pw7bbedy4t I created this new style by visiting https://api.mapbox.com/styles/v1/mapbox/outdoors-v11?access_token=MY_MAPBOX_TOKEN, then copying that json that makes up the outdoors-v11 style in order to create a new custom style in Studio.
3. In this new custom style I replaced only sprite property with a new sprite that I have created. "sprite": "https://raw.githubusercontent.com/FergusDevelopmentLLC/sprites/main/v3/generated/sprites", See the full json for the new custom style here.
4. The sprites referenced in the new custom style are publicly accessible and valid: sprites.png sprites.json sprites2x.png sprites2x.json

Link to Demonstration

Example 1 (custom sprite is not working when using the custom style mentioned above)

In this publicly accessible map, I reference the custom style from above. The custom style works, but the icons are missing.

Url: https://fergusdevelopmentllc.github.io/sprites/styles_w_sprites_override/test_html/index01.html

Expected Behavior

There are data points for this map, each point should be represented by one of the icons in the custom sprite.

Actual Behavior

The map doesn't show any icons from the custom sprite, and there are errors in the console saying that the images cannot be loaded.

Example 2 (same custom sprite works when the sprite property is overridden in code instead of using custom style)

In this second version, the sprite property of the mapbox://styles/mapbox/outdoors-v11 style is overridden in code with the custom sprite url on map load and the map properly shows the custom icons from the custom sprite.

Url: https://fergusdevelopmentllc.github.io/sprites/styles_w_sprites_override/test_html/index02.html

Expected Behavior

There are data points for this map, each point should be represented by one of the icons in the custom sprite.

Actual Behavior

This does work, proving that the custom sprite is correct.

https://fergusdevelopmentllc.github.io/sprites/styles_w_sprites_override/test_html/index02.html

Why don't the custom icons show properly in the version 1, where a custom style is used that has the sprite property overridden and pointing to a valid sprite?

Is this a bug?

Note

When I use mapbox-gl-js v3.6.0 (latest), I get a different error for version 2 above.

The examples above are using v3.5.2

[stepankuzmin]

Hi @lrewater,

It seems that your sprite is missing the icons that are being used in the outdoors style.

The sprite you are loading in the first example (https://fergusdevelopmentllc.github.io/sprites/styles_w_sprites_override/test_html/index01.html) is missing the icons that are being used in the outdoors style.

In the second example (https://fergusdevelopmentllc.github.io/sprites/styles_w_sprites_override/test_html/index02.html) you are loading the original sprite first, which populates the list of available images, and after that you are changing the sprite url.

This is not a bug, you should make sure that you are merging the original sprites with your own sprites before making a spritesheet.

You can also load your images and add them to the map using map.addImage, see the example here.

[lrewater]

Thank you @stepankuzmin for responding. I very much appreciate it. It is my intention to create and use a combined sprite that has the original icons from outdoors-11 plus a series of new icons to use in my application. I want to use this combined sprite in a custom style based on outdoors-11, where the sprite property references a new combined sprite that includes the default outdoors-11 icons plus my new custom icons. I don't want to overwrite the sprite property in code as I am doing in example 2 above.

I definitely can see I am missing some icons in my custom sprite, which is referenced in my custom style (mapbox://styles/wilcotxdash/cm0h5e8hg002i01pw7bbedy4t) in example 1 above. The ones with the prefix "mapbox-" (mapbox-arrow, mapbox-bicycle, etc), but I don't see how these are referenced in the original outdoors-11 style/sprite.

The following is how I got the sprite (png and json) referenced in the original outdoors-11 style in order to create a new spritesheet, by combining it with my custom icons. This must be where I am missing how it works, but I am not sure.

In the original outdoors-11 style (json code seen here), the line that references the sprite: "sprite": "mapbox://sprites/mapbox/outdoors-v11". From this, I thought I had figured out that the sprite (png and json) used in default outdoors-11 style is: png: https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/sprite.png?access_token=pk.eyJ1Ijoid2lsbGNhcnRlciIsImEiOiJjaWdjdHdkNzYwZGp3dTVtMGhhY2ZkaDloIn0.9qTtVfFnKXVe82B-6mJbqQ json: https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/sprite.json?access_token=pk.eyJ1Ijoid2lsbGNhcnRlciIsImEiOiJjaWdjdHdkNzYwZGp3dTVtMGhhY2ZkaDloIn0.9qTtVfFnKXVe82B-6mJbqQ

This must be incorrect, because I don't see the "mapbox-" icons in that spritesheet. The reason my custom sprite doesn't contain the "mapbox-" icons is because I used the sprite above and combined it with mine to create a custom sprite here (png) and here (json).

Incidentally, I can see the missing "mapbox-" icons that I am referring to here in studio. Do these not come from the sprite property/sheet?

How do I correctly see the original sprite (png and json) used in outdoors-11 (mapbox://styles/mapbox/outdoors-v11) that does include the references to the "mapbox-" icons?

[lrewater]

Fyi, I posted a question on stack overflow regarding this. https://stackoverflow.com/questions/78946194/how-do-i-use-a-custom-sprite-in-a-mapbox-map

If you can help me understand what I am doing wrong, I would be very grateful, I feel am so close here.

[stepankuzmin]

The Outdoors style doesn't have the "mapbox-" icons in the spritesheet. To add new images to the spritesheet you should upload your custom images in the Studio when you are building the style based on the Outdoors. After that, you need to use that image in some layers and it will be available in the resulting spritesheet along with the original Outdoors style images.