map.on('touchstart' 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';
const PLACES_GEOJSON = {
  'type': 'FeatureCollection',
  'features': [{
      "id": 4,
      "type": "Feature",
      "properties": {
        "description": "большой полигон (4 точки)",
        "state": 0
      },
      "geometry": {
        "coordinates": [
          [
            [28.608784675598145, 57.78687316908008],
            [28.747360872381563, 57.800526391777424],
            [28.719108974599408, 57.65387530519655],
            [28.608784675598145, 57.78687316908008]
          ]
        ],
        "type": "Polygon"
      }
    },
    {
      "id": 21,
      "type": "Feature",
      "properties": {
        "description": "",
        "state": 0
      },
      "geometry": {
        "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],
           ...