Menu
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 = 'pk.eyJ1Ijoib2tpZWJ1YmJhIiwiYSI6ImNpdHZscGs3ajAwNXYyb284bW4ydWUzbGsifQ.1PoNrSP0F65WolWgqKhV4g';
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%; }
654
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": {}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With