title: How to display label on mapbox map polygon with GeoJSON
body: <p>I want to display a custom label on mapbox map using GeoJSON data, I have added <code>name</code> under feature <code>properties</code> with a <code>color</code> 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:</p>
  <p><a href="https://jsfiddle.net/cjzbq5g8/" rel="noreferrer"><strong>JSFiddle Demo</strong></a></p>
  <p>Here is code</p>
  <pre><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 = {
      &quot;type&quot;: &quot;FeatureCollection&quot;,
      &quot;features&quot;: [
             {
                &quot;type&quot;:&quot;Feature&quot;,
                &quot;geometry&quot;:{
                   &quot;type&quot;:&quot;Polygon&quot;,
                   &quot;coordinates&quot;:[
                      [
                         [
                            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
                         ]
                      ]
                   ]
                },
                &quot;properties&quot;:{
                   &quot;id&quot;:1,
                   &quot;name&quot;:&quot;East Zone&quot;,
                   &quot;color&quot;:&quot;#ccccff&quot;,
                   &quot;is_shutdown&quot;:false,
                   &quot;is_active&quot;:true
                }
             },
             {
                &quot;type&quot;:&quot;Feature&quot;,
                &quot;geometry&quot;:{
                   &quot;type&quot;:&quot;Polygon&quot;,
                   &quot;coordinates&quot;:[
                      [
                         [
                            54.41277432573249,
                            24.17109802219355
                         ],
                         [
                            54.40221419428706,
                            23.93479580896283
                         ],
                         [
                            54.40190486287914,
                            23.752296533243648
                         ],
                         [
                            54.24386990803268,
                            23.813378685606605
                         ],
                         [
                            54.12084722599417,
                            24.09616522759087
                         ],
                         [
                            54.41277432573249,
                            24.17109802219355
                         ]
                      ]
                   ]
                },
                &quot;properties&quot;:{
                   &quot;id&quot;:2,
                   &quot;name&quot;:&quot;West Zone&quot;,
                   &quot;color&quot;:&quot;#ffcc33&quot;,
                   &quot;is_shutdown&quot;:false,
                   &quot;is_active&quot;:true
                }
             },
             {
                &quot;type&quot;:&quot;Feature&quot;,
                &quot;geometry&quot;:{
                   &quot;type&quot;:&quot;Polygon&quot;,
                   &quot;coordinates&quot;:[
                      [
                         [
                            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
                         ]
                      ]
                   ]
                },
                &quot;properties&quot;:{
                   &quot;id&quot;:3,
                   &quot;name&quot;:&quot;South Zone&quot;,
                   &quot;color&quot;:&quot;#07ac25&quot;,
                   &quot;is_shutdown&quot;:false,
                   &quot;is_active&quot;:true
                }
             }
          ]
  };
  
  var bbox = turf.bbox(featureCollection);
  map.on('load', function () {
      featureCollection.features.forEach(function (feature) {
          draw.add(feature);
      })
  });
  
  map.fitBounds(bbox, { padding:  40});
  </code></pre>