2

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?

2

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.

Mapbox Studio sprites are here

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.

  • chrki, Thanks for the reply. I tried all three values and i get the same result. – el_girafe Jan 26 '16 at 22:11
  • I can't view your style since my own API token doesn't allow it ("Error: Forbidden"). Can you check what's in the image/sprite window in your style? Looks like this for me, that's where I got the numbers from i.imgur.com/7POFuUr.png – chrki Jan 26 '16 at 22:19
  • Added some text about adding your own icons... seems a bit buggy currently – chrki Jan 26 '16 at 22:58
  • Here is what mine looks like imgur.com/S0lEgpd. I wonder if i used different base style, as i dont see the theater or bar icons... – el_girafe Jan 26 '16 at 23:13
  • Yes your icon set is different. You need icon files with names like "theater-15.svg", "bar-15.svg" (or similar) to make them show up with the example Javascript – chrki Jan 26 '16 at 23:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.