Centering text label in mapbox-gl-js?

Question

I'm trying to center a text label over a feature polygon in mapbox-gl-js. Is this possible? It looks like the only option related to the placement of a label is the "symbol-placement" layout property ( https://www.mapbox.com/mapbox-gl-style-spec/#symbol ):

symbol-placement

Optional enum. One of point, line. Defaults to point. Label placement relative to its geometry. line can only be used on LineStrings and Polygons.

Using "point" places the label at the bottom right corner of the feature:

Ideas?

Answer 1

You can use the turf library to find the centroid of the polygon, then make a symbol with that point co-ordinate and add the text field to it.

See the below example for a text label displayed on the centroid of a polygon feature

 mapboxgl.accessToken = 'pk.eyJ1IjoiYXJ1bmFicmFoYW0iLCJhIjoiODBJTV9WUSJ9.m5tbZ5XYg8VhD-8Qu7d_SA'; // Initialize the map var map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location center: [-68.13734351262877, 45.137451890638886], // starting position zoom: 3 // starting zoom }); // Add a feature var feature = { 'type': 'Feature', 'properties': { 'name': 'Maine' }, 'geometry': { 'type': 'Polygon', 'coordinates': [[[-67.13734351262877, 45.137451890638886], [-66.96466, 44.8097], [-68.03252, 44.3252], [-69.06, 43.98], [-70.11617, 43.68405], [-70.64573401557249, 43.090083319667144], [-70.75102474636725, 43.08003225358635], [-70.79761105007827, 43.21973948828747], [-70.98176001655037, 43.36789581966826], [-70.94416541205806, 43.46633942318431], [-71.08482, 45.3052400000002], [-70.6600225491012, 45.46022288673396], [-70.30495378282376, 45.914794623389355], [-70.00014034695016, 46.69317088478567], [-69.23708614772835, 47.44777598732787], [-68.90478084987546, 47.184794623394396], [-68.23430497910454, 47.35462921812177], [-67.79035274928509, 47.066248887716995], [-67.79141211614706, 45.702585354182816], [-67.13734351262877, 45.137451890638886]]] } }; // Make a point feature for displaying the text; // User turf library to find the centroid of the polygon var centroidPt = turf.centroid(feature); centroidPt.properties.title = 'label'; map.on('style.load', function () { // Add the feature source map.addSource('maine', { 'type': 'geojson', 'data': feature }); // Add the label point source map.addSource('label', { 'type': 'geojson', 'data': centroidPt }); // Add the feature style map.addLayer({ 'id': 'route', 'type': 'fill', 'source': 'maine', 'layout': {}, 'paint': { 'fill-color': '#088', 'fill-opacity': 0.8 } }); // Add the label style map.addLayer({ 'id': 'label-style', 'type': 'symbol', 'source': 'label', 'layout': { 'text-field': 'Label', }, 'paint': { 'text-color': 'red' } }); }); 

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

 <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.14.1/mapbox-gl.css" rel="stylesheet"/> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.14.1/mapbox-gl.js"></script> <div id='map'></div>