Add some basic markers to a map in mapbox via mapbox gl js

Question

I have a map styled with mapbox studio, however I'm having difficulty adding even a basic marker to it, however text is appearing where the marker should be which suggests that the marker would be there.

So here's the code with that map style:

mapboxgl.accessToken = 'pk.eyJ1Ijoic21pY2tpZSIsImEiOiJjaWtiM2JkdW0wMDJudnRseTY0NWdrbjFnIn0.WxGYL18BJjWUiNIu-r3MSA';
var map = new mapboxgl.Map({
    container: 'map',
    style: "mapbox://styles/smickie/cikb3fhvi0063cekqns0pk1f1",
    center: [-30.50, 40],
    zoom: 2,
    interactive: false
});

And here some markers being added from an example in the api:

map.on('style.load', function () {

    map.addSource("markers", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-77.03238901390978, 38.913188059745586]
                },
                "properties": {
                    "title": "Mapbox DC",
                    "marker-symbol": "monument"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-122.414, 37.776]
                },
                "properties": {
                    "title": "Mapbox SF",
                    "marker-color": "#ff00ff"
                }
            }]
        }
    });

    map.addLayer({
        "id": "markers",
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "{marker-symbol}-15",
            "text-field": "{title}",
            "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
            "text-offset": [0, 0.6],
            "text-anchor": "top"
        }
    });
});

However only the text and not the icons appear.

Question is: how would I add just a normal basic colored marker to this map, not even one of the special icon ones?

Thanks.

Answer 1

Problem here is that the starting point of your style in Mapbox Studio, the template you chose, doesn't have the glyphs/sprites you're referencing in your layer layout. If you switch to the same style they're using in the example you've used: mapbox://styles/mapbox/streets-v8 you'll see that the markers will appear. It's because they've been added to that style. If you switch back to your style, they're gone again.

Here's a console.log of your style's sprites:

And here's a console.log of Mapbox streets sprites:

As you can see, you have only two while mapbox has dozens (more than on the screenshot). You can use the ones you have by simply using the propertynames: default_marker and secondary_marker:

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-77.03238901390978, 38.913188059745586]
    },
    "properties": {
       "title": "Mapbox DC",
       "marker-symbol": "default_marker"
    }
}

map.addLayer({
    "id": "markers",
    "source": "markers",
    "type": "symbol",
    "layout": {
        "icon-image": "{marker-symbol}",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    }
});

Example on Plunker: http://plnkr.co/edit/W7pfGHVBzJj8U3AmPyzf?p=preview

If you need more you've got to add the sprites/glyphs you want to use to your style in Mapbox studio. Unfortunately this has little to do with "programming" since it's related to Mapbox Studio which is a software tool and thus kind of "offtopic" here on stackoverflow.

If you don't even need sprite/glyphs you could also use type: circle and the paint properties to create simple circles:

map.addLayer({
    "id": "markers",
    "source": "markers",
    "type": "circle",
    "paint": {
        "circle-radius": 10,
        "circle-color": "#007cbf"
    }
});

Example on Plunker: http://plnkr.co/edit/QDtIBtDIimKy6TUmKxcC?p=preview

More on styles and sprites can be found here:

• https://www.mapbox.com/help/define-sprite/
• https://www.mapbox.com/developers/api/styles/#Sprites
• https://www.mapbox.com/mapbox-gl-style-spec/#sprite