Missing some icons

[elreeda]

mapbox-gl-js version: 1.10.1

Question

When I try to use some icons such as home or commercial, square... I get the following warning and nothing being showed up:

Image "home-15" 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. r @ react_devtools_backend.js:6 w @ mapbox-gl.js:269 i._notify @ mapbox-gl.js:16252 i.getImages @ mapbox-gl.js:16232 i.getImages @ mapbox-gl.js:20380 Ml.processTask @ mapbox-gl.js:13416 Ml.receive @ mapbox-gl.js:13387

Links to related documentation

you can try this out by replacing harbor with home here https://docs.mapbox.com/mapbox-gl-js/example/geojson-markers/

Am I missing something?

[mourner]

That's because the sprite that comes with the light style doesn't have all the maki icons, only those that are used in that style. E.g. see the list here. So you'd have to add any additional icons with the map.addImage API.

[elreeda]

@mourner thanks for the clarification, is there a documentation somewhere on how to import all the maki icons in a style? been looking around and didn't a clue, appreciate the help.

[ryanhamley]

Hi @elreeda I'm not sure if there's specific documentation but in Mapbox Studio you can select your style, click on the Images button and then the Custom tab. This will allow you to upload SVG images which will be automatically added to the style's spritesheet. You may need to rename icons that have the same name as icons already in the spritesheet (e.g. marker-15). Also, Mapbox maintains a small set of Maki icons that may be useful.

Alternatively, you can add images at runtime with map.addImage()

[elreeda]

@ryanbaumann Im not trying to use my custom icons or uploading them somewhere I just want to use some icons that are in Maki exactly home and commercial icons.

[ryanhamley]

As @mourner said, not all Maki icons are included in our styles. Ones such as home that are not included by default can by added in the ways I showed above. The Mapbox Maki icon set linked above includes both commercial and home.

[elreeda]

@ryanhamley sorry for being stupidly annoying but I have been trying to show the mentioned icons but no luck, I have tried installing maki and use the icons somehow then the browsers throws fs isnot defined. can you bare with me and please throw a detailed example on how to use an Icon from maki that is not in the map style.. a codepen would be appreciated. I just gave up been trying to do this since yesterday..

[elreeda]

I understand that the API map.addImage() needs a url for an svg, do I just need to put the maki icons under my project locally, and give the API the path of each icon or what? whats the best practice? im newbie to mapbox and maps in general

[ryanhamley]

Hi @elreeda no worries. And I have to apologize because I forgot that SVG images are not supported at this time by the addImage method. It would be possible to convert the SVG to a PNG either ahead of time or via a canvas like in this example. addImage doesn't directly take a URL as an argument, but rather image data so first you'd have to use loadImage as shown in this example.

Personally though, I wouldn't advise doing it that way. It's fairly laborious. It would be easier and more performant to do this via Studio as outlined in my comment above.

[elreeda]

thanks @ryanhamley went with the mapbox studio solution, I have just one last question is there a way to see instant change? because currently when I change a icon it takes quite mins to show these changes on my map

[ryanhamley]

@elreeda Unfortunately, I think it takes some time for the style to propagate to the CDN. You could try clearing your browser cache. Alternatively, you could download the style JSON from Studio and use it as an inline style. Glad you were able to get the icons working though!