Add and delete features

Add and delete data in a hosted feature layer. To learn more about feature layers and feature services, go to Hosted feature layers in the Mapping APIs and location services guide.

Use dark colors for code blocksCopy
                                                                                                            
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
103
104
105
106
107
108
<html>
  <head>
    <meta charset="utf-8" />
    <title>Add and delete features</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin=""></script>

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

    <!-- Load Esri Leaflet Renderers from CDN -->
    <script src="https://unpkg.com/esri-leaflet-renderers@3.0.0" crossorigin=""></script>
    <!-- Load Esri Leaflet Vector from CDN -->
    <script src="https://unpkg.com/esri-leaflet-vector@4.0.0/dist/esri-leaflet-vector.js" crossorigin=""></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>
    <!-- Leaflet Draw -->
    <style>
      #info-pane {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 400;
        padding: 1em;
        background: white;
        text-align: right;
        max-width: 250px;
      }

      #form {
        display: none;
      }
    </style>
    <div id="map"></div>
    <div id="info-pane" class="leaflet-bar">
      <label>
        Click on the map to post an edit.<br />
        Click on a marker to remove it.
        <select id="symbols">
          <option value="Air Control Point">Air Control Point</option>
          <option value="Decision Point">Decision Point</option>
          <option value="Unmanned Aerial System (UAS UA)">Unmanned Aerial System (UAS UA)</option>
        </select>
      </label>
    </div>
    <script>
      const apiKey = "YOUR_API_KEY";
      // create the map
      const map = L.map("map").setView([65, -18.5], 6);

      L.esri.Vector.vectorBasemapLayer("ArcGIS:ChartedTerritory", {
        apikey: apiKey
      }).addTo(map);

      // add our feature layer to the map
      const militaryOps = L.esri
        .featureLayer({
          url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/3"
        })
        .addTo(map);

      const symbols = document.querySelector("#symbols");

      // when the map is clicked, add a new feature
      map.on("click", function (e) {
        // convert to GeoJSON
        const feat = L.marker(e.latlng).toGeoJSON();
        // set the attribute value that controls the feature service symbology
        feat.properties.symbolname = symbols.value;
        // make a request to add the new feature to the feature service.
        militaryOps.addFeature(feat, function (err, response) {
          if (err) {
            return;
          }

          console.log(response);
        });
      });

      // when a marker is clicked, remove the feature from the service, using its id
      militaryOps.on("click", function (e) {
        militaryOps.deleteFeature(e.layer.feature.id, function (err, response) {
          if (err) {
            return;
          }

          console.log(response);
        });
        // make sure map click event isn't fired.
        L.DomEvent.stopPropagation(e);
      });
    </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.