Draw and edit shapes

Draw and edit shapes from a hosted using the Leaflet Geoman plugin. This plugin allows you to edit the features in a hosted and pass the edits back to the server.

Draw, edit, and delete shapes. To learn how, click the info button.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<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.14/dist/esri-leaflet.js"></script>
    <script src="https://unpkg.com/esri-leaflet-vector@4.2.7/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>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close