MapBox GL geoJSON markers disappear when custom style loaded

Question

I am using this example to load geojson points to to a mapbox basemap.

I view it on a browser locally and it works.

When I change the style reference to my custom style, the style will display, but the geojson entries will not. I think its trying to access a sprite(?) reference, but i'm not sure how to set that up. Style reference code:

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/elgirafe/cijvtamnh006uqtkqwqevcvxv',
    center: [-77.04, 38.907],
    zoom: 11.15
});

I tried to download my style, an change the sprite reference to "mapbox://sprites/mapbox/bright-v8" but that did not work either.

Can anyone shed some light on this?

Answer 1

It is indeed the sprites. Your Mapbox Studio style probably contains the default sprite set, or none at all if you started with an empty map .

If you are using Mapbox Studio, you will use prebuilt sprites provided by Mapbox, or you can upload custom SVG images to build your own sprite. (source)

To view or change your sprites you can go to the editor under Properties - Images in the bottom left corner.

If you can't do anything there, you might have to first add a point layer and change symbology there. You can do this by chosing one of the offered data sets, or upload a short GeoJSON yourself.

{"type": "FeatureCollection", "features": [{"type": "Feature", "properties": {}, "geometry": {"type": "Point", "coordinates": [0, 0 ] } } ] }

Open the layer's settings, go to the "Icon" tab, click the "image" text field to open the image selection, select "Add SVG images". You can get the Mapbox Maki icon set from here (svg files are in the /src folder).

There are some limites that I found though: You can't have more than 500 icons, can only upload files below 400KB file size (so you can't upload the complete "maki.svg") and you also can not delete any (at least I haven't found this function anywhere).

To use this sprite set you need to change one line of code in this section:

map.addLayer({
    "id": "markers",
    "interactive": true,
    "type": "symbol",
    "source": "markers",
    "layout": {
        "icon-image": "{marker-symbol}-15" // change the number here
    }
});

Working values are {marker-symbol}-12, {marker-symbol}-18 and {marker-symbol}-24.