☰ Esri Leaflet

Editing feature layers

This sample uses the Leaflet Editable plugin to help users manipulate the geometry of features from a hosted feature service and pass the edits back to the server.

<html>
<head>
  <meta charset=utf-8 />
  <title>Editing feature layers</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <!-- Load Leaflet (not latest version due to dependencies) -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"></script>


    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js"
    integrity="sha512-YZ6b5bXRVwipfqul5krehD9qlbJzc6KOGXYsDjU9HHXW2gK57xmWl2gU6nAegiErAqFXhygKIsWPKbjLPXVb2g=="
    crossorigin=""></script>


  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

<script src="https://unpkg.com/leaflet.path.drag@0.0.5"></script>
<script src="https://unpkg.com/leaflet-editable@1.0.0"></script>

<div id='map'></div>

<script type="text/javascript">
    // make sure double clicking the map *only* triggers the editing workflow
    var map = L.map('map', {
      editable: true,
      doubleClickZoom: false
    }).setView([45.512, -122.619], 12);

    var tilelayer = L.esri.basemapLayer("Topographic").addTo(map);

    // create a feature layer and add it to the map
    var pedestrianDistricts = L.esri.featureLayer({
      url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/PDX_Pedestrian_Districts/FeatureServer/0'
    }).addTo(map);

    // create a generic control to invoke editing
    L.EditControl = L.Control.extend({
        options: {
            position: 'topleft',
            callback: null,
            kind: '',
            html: ''
        },
        // when the control is added to the map, wire up its DOM dynamically and add a click listener
        onAdd: function (map) {
            var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
                link = L.DomUtil.create('a', '', container);
            link.href = '#';
            link.title = 'Create a new ' + this.options.kind;
            link.innerHTML = this.options.html;
            L.DomEvent.on(link, 'click', L.DomEvent.stop)
                      .on(link, 'click', function () {
                        window.LAYER = this.options.callback.call(map.editTools);
                      }, this);
            return container;
        }
    });

    // extend the control to draw polygons
    L.NewPolygonControl = L.EditControl.extend({
        options: {
            position: 'topleft',
            callback: map.editTools.startPolygon,
            kind: 'polygon',
            html: '▰'
        }
    });

    // extend the control to draw rectangles
    L.NewRectangleControl = L.EditControl.extend({
        options: {
            position: 'topleft',
            callback: map.editTools.startRectangle,
            kind: 'rectangle',
            html: '⬛'
        }
    });

    // add the two new controls to the map
    map.addControl(new L.NewPolygonControl());
    map.addControl(new L.NewRectangleControl());

    // when users CMD/CTRL click an editable feature, remove it from the map and delete it from the service
    pedestrianDistricts.on('click', function (e) {
      if ((e.originalEvent.ctrlKey || e.originalEvent.metaKey) && e.layer.editEnabled()) {
        e.layer.editor.deleteShapeAt(e.latlng);
        // delete expects an id, not the whole geojson object
        pedestrianDistricts.deleteFeature(e.layer.feature.id);
      }
    });

    // when users double click a graphic toggle its editable status
    // when deselecting, pass the geometry update to the service
    pedestrianDistricts.on('dblclick', function (e) {
      e.layer.toggleEdit();
      if (!e.layer.editEnabled()) {
        pedestrianDistricts.updateFeature(e.layer.toGeoJSON());
      }
    });

    // when a new feature is drawn using one of the custom controls, pass the edit to the service
    map.on('editable:drawing:commit', function (e) {
      pedestrianDistricts.addFeature(e.layer.toGeoJSON());
      e.layer.toggleEdit();
    });
</script>

</body>
</html>

Edit this sample on GitHub

Esri Leaflet is a project from the Esri PDX R&D Center and the Esri Community

Terms