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.
Use dark colors for code blocksCopy
<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.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>

    <!-- Load Esri Leaflet Renderers from CDN -->
    <script src="https://unpkg.com/esri-leaflet-renderers@3.0.1" crossorigin=""></script>
    <!-- Load Esri Leaflet Vector from CDN -->
    <script src="https://unpkg.com/esri-leaflet-vector@4.2.5/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 accessToken = "YOUR_ACCESS_TOKEN";
      // create the map
      const map = L.map("map").setView([65, -18.5], 6);

      L.esri.Vector.vectorBasemapLayer("arcgis/charted-territory", {
        token: accessToken
      }).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>