mapboxgl.Marker() not showing label

[mariusa]

mapbox-gl-js version: v1.11.0

browser: Chrome

Steps to Trigger Behavior

Change the tutorial at https://docs.mapbox.com/mapbox-gl-js/example/add-a-marker/ to add a label within a standard marker, as supported in docs https://docs.mapbox.com/api/maps/#marker

var marker = new mapboxgl.Marker({
                name: 'pin-s',
                label: '1',
                color: '#ff924c'
            })
        .setLngLat([12.550343, 55.665957])
        .addTo(map);

Link to Demonstration

https://jsfiddle.net/ywerpsvt/

Expected Behavior

Have '1' show inside the orange marker

Actual Behavior

Marker is orange (color works), but no label

[karimnaaji]

Markers don't have such field, refer https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker-parameters. Have you looked at a popup to see if it fits your use case?

Otherwise, you would have to go through adding a new layer for it: https://jsfiddle.net/kanaa/d0yaotsk/4/, it's not inside as you requested, but would give a starting point to add a label associated with it.

mapboxgl.accessToken = '';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [12.550343, 55.665957],
    zoom: 8
});

var place = {
    'type': 'FeatureCollection',
    'features': [{
        'type': 'Feature',
        'properties': {
            'description': "1",
        },
        'geometry': {
          'type': 'Point',
          'coordinates': [12.550343, 55.665957]
        }
    }]
};

map.on('load', function() {
    map.addSource('places', {
        'type': 'geojson',
        'data': place
    });

    map.addLayer({
        'id': 'poi-labels',
        'type': 'symbol',
        'source': 'places',
        'layout': {
            'text-field': ['get', 'description'],
            'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
            'text-radial-offset': 0.5,
            'text-justify': 'auto',
        }
    });
});

var marker = new mapboxgl.Marker({name: 'pin-s', color: '#ff924c'}).setLngLat([12.550343, 55.665957]).addTo(map);

[mariusa]

Thanks. This doc mentions label, should it be updated? https://docs.mapbox.com/api/maps/#marker

Marker symbol. Options are an alphanumeric label a through z, 0 through 99, or a valid Maki icon. If a letter is requested, it will > be rendered in uppercase only.

[karimnaaji]

That references the static APIs documentation. The gl-js one is under https://docs.mapbox.com/mapbox-gl-js/api

[mariusa]

Thanks for clarification!