mapbox how can I add a label to a linestring?

Question

I would like to add text to a linestring. Basically the same way the name of a street shows up in google maps. So if I zoom in or move the map around, the text still shows up on the line.

Do I need to add some sort of new layer with the same coordinates?

Here is a jsfiddle to start with.

<body>

<div id='map'></div>

</body>

mapboxgl.accessToken = '12345';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-88.4, 33.4],
    zoom: 10
});
    
map.on('load', function () {
    map.addSource("route", {
        "type": "geojson",
        "data": {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-88.451092, 33.325422],
                    [-88.248037, 33.436312]
                ]
            }
        }
    });

    map.addLayer({
        "id": "route",
        "type": "line",
        "source": "route",
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#888",
            "line-width": 8
        }
    });
    
    

});


        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }

score 12 · Accepted Answer · answered Nov 30 '16 at 14:35

12

A much better solution - http://jsfiddle.net/brianssheldon/wm18a33d/27/

Add properties to geojson with properties.title and in the addlayer for the symbols change "text-field" to "{title}"

    "properties": {
      "title": 'aaaaaa' 
    }

and in the addLayer for the symbols, use this

 "text-field": '{title}',

answered Nov 30 '16 at 14:35

okieBubba

391
1
2
12

The title-text only appears after a specific zoom level; is it possible to set the label appearance on for lesser zoom levels? – Ritambhara Chauhan Apr 19 '19 at 07:43
I see what you mean. The jsfiddle seems to stop showing the text somewhere between 7 and 8. At this point you might be looking at doing grouping/clusters - https://docs.mapbox.com/mapbox-gl-js/example/cluster/ – okieBubba Apr 20 '19 at 13:58
Clustering doesn't work with 'Linestring' data type. – Ritambhara Chauhan May 01 '19 at 12:31
Right. I'm just thinking that if you zoom out that far, you will have to use something else... or be able to set the font-size depending on the zoom level. – okieBubba May 01 '19 at 19:06

score 5 · Answer 2 · answered Nov 29 '16 at 19:25

5

I was able to get it working http://jsfiddle.net/brianssheldon/wm18a33d/8/

I added this code

map.addLayer({
    "id": "symbols",
    "type": "symbol",
    "source": "route",
    "layout": {
        "symbol-placement": "line",
        "text-font": ["Open Sans Regular"],
        "text-field": 'this is a test',
        "text-size": 32
    },
    "paint": {}
});

answered Nov 29 '16 at 19:25

okieBubba

391
1
2
12

1

This answer is realllly brilliant (: I have used icon instead of text and mapbox is automatically repeating icon along the linestring and its so cool ((: – AmirHossein Rezaei Apr 13 '21 at 02:53
1

To prevent repeating, you can use `symbol-placement=line-center` in the newer versions of GL JS example here: http://jsfiddle.net/tsuzk/cft1v9ue/1/ – Taku Jun 15 '21 at 11:58
It doesn't prevent repeating tho. If you zoom it keeps repeating. – derFrosty Dec 05 '22 at 18:25

mapbox how can I add a label to a linestring?

2 Answers2