Show drawn polygon area

Use mapbox-gl-draw to draw a polygon and Turf.js to calculate its area in square meters. See the example: https://docs.mapbox.com//mapbox-gl-js/example/mapbox-gl-draw/

by Nikolay Petrov

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.css">
<div id="map"></div>

CSS

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

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoicGV0cm92bm4iLCJhIjoiVHJkcXROMCJ9.hzniKblVA-O0YJSvCfwztg';
  
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/satellite-v9',
  center: [28.8239, 57.7265],
  zoom: 10
});

map.on('load', function () {

  map.addControl(new MapboxDraw({
    displayControlsDefault: false,
    controls: { 
      polygon: true,
      trash: true 
    }
  }));

  map.addSource('places', {
    'type': 'geojson',
    'data': {
      'type': 'FeatureCollection',
      'features': [
        {
          "id":4,
          "type":"Feature",
          "properties":{
            "description":"большой полигон (4 точки)",
            "state":0
          },
          "geometry":
        },
        {
          "id":21,
          "type":"Feature",
          "properties":{
            "description":"Маленький полигон (много точек)",
            "state":0
          },
          "geometry":{
          	"type":"Polygon",
            "coordinates":[[[28.809574842453003,57.75951921120193],[28.810100555419922,57.76146516752891],[28.80615234375,57.76274715208365],[28.80615234375,57.76274715208365],[28.80615234375,57.77308721242355],[28.808770179748535,57.77568463733684],[28.812546730041504,57.78032406586942],[28.810594081878662,57.78548909081465],[28.81414532661438,57.79005291648184],[28.82367253303528,57.791293857012306],[28.831032514572144,57.789509634158435],[28.83864998817444,57.79144825676664],[28.846514225006104,57.79051612968874],[28.850891590118408,57.78559776003607],[28.854249715805054,57.78162254144493],[28.86109471321106,57.780564315972185],[28.863916397094727,57.776983279744655],[28.862757682800293,57.773533479332855],[28.86255383491516,57.76766863456001],[28.86933445930481,57.76180283751583],[28.860493898391724,57.757945199280954],[28.848659992218018,57.75781355154089],[28.837512731552124,57.75733847092593],[28.82911205291748,57.75420736175326],[28.8180935382843,57.755003044087005],[28.809574842453003,57.75951921120193]]]
    ...