Draw and edit shapes

Draw and edit shapes from a hosted feature service using the Leaflet Geoman plugin. This plugin allows you to edit the features in a hosted feature layer and pass the edits back to the server.
Draw, edit, and delete shapes. To learn how, click the info button.
Use dark colors for code blocksCopy
<html>
  <head>
    <meta charset="utf-8" />
    <title>Draw and edit shapes</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>

    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@3.0.12/dist/esri-leaflet.js"></script>
    <script src="https://unpkg.com/esri-leaflet-vector@4.2.5/dist/esri-leaflet-vector.js"></script>

    <!-- Load Leaflet Geoman from CDN -->
    <link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />
    <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>


    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/leaflet.path.drag@0.0.6/src/Path.Drag.js"></script>
    <script src="https://unpkg.com/leaflet-editable@1.2.0/src/Leaflet.Editable.js"></script>

    <div id="map"></div>
    <script type="text/javascript">

      // Set up map and basemap
      const accessToken = "YOUR_ACCESS_TOKEN";
      var map = L.map("map", {
        editable: true,
        doubleClickZoom: false
      }).setView([37.345, -110.875], 5);

      L.esri.Vector.vectorBasemapLayer("arcgis/charted-territory", {
        token: accessToken
      }).addTo(map);

      // Create a feature layer and add it to the map
      var wildfireDistricts = L.esri
        .featureLayer({
          url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/2"
        })
        .addTo(map);

      // Add drawing tools
      map.pm.addControls(
      {
        editControls: false,
        drawMarker:false,
        drawPolyline:false,
        drawCircle:false,
        drawText:false,
        drawCircleMarker:false
      });

      // when users CMD/CTRL click an active editable feature,
      // remove it from the map and delete it from the service
      wildfireDistricts.on("click", function (e) {
        if ((e.originalEvent.ctrlKey || e.originalEvent.metaKey) && e.layer.pm.enabled()) {
          // delete expects an id, not the whole geojson object
          wildfireDistricts.deleteFeature(e.layer.feature.id);
        }
      });

      // when users double click a graphic, toggle its editable status
      // but when deselecting via double click, pass the geometry update to the service
      wildfireDistricts.on("dblclick", function (e) {
        e.layer.pm.toggleEdit({
          draggable:true
        });
        if (!e.layer.pm.enabled()) {
          wildfireDistricts.updateFeature(e.layer.toGeoJSON());
        }
      });

      // when a new feature is drawn using the toolbar,
      // pass the edit to the featureLayer service
      map.on("pm:create", function (e) {
        wildfireDistricts.addFeature(e.layer.toGeoJSON(), function (error, response) {
          if (error || !response.success) {
            console.log(error, response);
          }

          e.layer.remove();
      });
      });

    </script>
  </body>
</html>