How to display label on mapbox map polygon with GeoJSON

Question

I want to display a custom label on mapbox map using GeoJSON data, I have added name under feature properties with a color which I want to show as polygon fill color for a zone, I have no Idea how to do it, I have searced a lot but found nothing on this topic, I am very new to MapBox need your help:

JSFiddle Demo

Here is code

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [55.2324,25.073], // starting position
    zoom: 12 // starting zoom
});

// Draw map
var draw = new MapboxDraw({
    displayControlsDefault: false,
    controls: {
        polygon: false,
        trash: false
    }
});

map.addControl(draw);

// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());

var featureCollection = {
    "type": "FeatureCollection",
    "features": [
           {
              "type":"Feature",
              "geometry":{
                 "type":"Polygon",
                 "coordinates":[
                    [
                       [
                          53.34234777435083,
                          24.03841558494339
                       ],
                       [
                          53.63384239941877,
                          23.980642073807147
                       ],
                       [
                          53.87583793720404,
                          24.01330148955786
                       ],
                       [
                          53.67509163882116,
                          23.678780532068288
                       ],
                       [
                          53.691591334582085,
                          23.436787672921128
                       ],
                       [
                          53.13885152669846,
                          23.55531902255817
                       ],
                       [
                          53.136101577392935,
                          23.980642073807147
                       ],
                       [
                          53.34234777435083,
                          24.03841558494339
                       ]
                    ]
                 ]
              },
              "properties":{
                 "id":1,
                 "name":"East Zone",
                 "color":"#ccccff",
                 "is_shutdown":false,
                 "is_active":true
              }
           },
           {
              "type":"Feature",
              "geometry":{
                 "type":"Polygon",
                 "coordinates":[
                    [
                       [
                          54.41277432573249,
                          24.17109802219355
                       ],
                       [
                          54.40221419428706,
                          23.93479580896283
                       ],
                       [
                          54.40190486287914,
                          23.752296533243648
                       ],
                       [
                          54.24386990803268,
                          23.813378685606605
                       ],
                       [
                          54.12084722599417,
                          24.09616522759087
                       ],
                       [
                          54.41277432573249,
                          24.17109802219355
                       ]
                    ]
                 ]
              },
              "properties":{
                 "id":2,
                 "name":"West Zone",
                 "color":"#ffcc33",
                 "is_shutdown":false,
                 "is_active":true
              }
           },
           {
              "type":"Feature",
              "geometry":{
                 "type":"Polygon",
                 "coordinates":[
                    [
                       [
                          55.01084972481446,
                          24.07274717129389
                       ],
                       [
                          55.04794143668033,
                          23.858563232484837
                       ],
                       [
                          54.967647759445896,
                          23.5905998890601
                       ],
                       [
                          54.901748431837575,
                          23.38814119539755
                       ],
                       [
                          54.58976976470866,
                          23.47439441289948
                       ],
                       [
                          54.41317073001387,
                          23.67920953874405
                       ],
                       [
                          54.43980120450599,
                          24.219099932016256
                       ],
                       [
                          54.72318029018409,
                          24.176836888624475
                       ],
                       [
                          55.01084972481446,
                          24.07274717129389
                       ]
                    ]
                 ]
              },
              "properties":{
                 "id":3,
                 "name":"South Zone",
                 "color":"#07ac25",
                 "is_shutdown":false,
                 "is_active":true
              }
           }
        ]
};

var bbox = turf.bbox(featureCollection);
map.on('load', function () {
    featureCollection.features.forEach(function (feature) {
        draw.add(feature);
    })
});

map.fitBounds(bbox, { padding:  40});

Answer 1

You need to define the a Point representing the labels for your polygons and use a Symbol layer. One way to generate the label points is https://github.com/mapbox/polylabel

Answer 2

您可以使用 turf 库找到多边形的质心，然后您可以使用符号层。