esri-leaflet

<!DOCTYPE html>      <html class="not-ie">  <head> <meta charset="utf-8"> <title>Editing feature layers | Esri Leaflet</title> <meta name="description" content="This sample uses <a href="https://github.com/Leaflet/Leaflet.draw">Leaflet Draw</a> to help edit the geometry of features in a hosted feature service."> <meta name="description" content="Esri Leaflet"> <meta name="viewport" content="width=device-width">   <link href='//fonts.googleapis.com/css?family=Vollkorn:400italic,700italic,400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Code+Pro:300"> <link href='//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>  <link rel="stylesheet" href="../css/style.css">  <link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.7/leaflet.css" />  <script src="//cdn.jsdelivr.net/leaflet/0.7.7/leaflet.js"></script>  <script src="../../js/esri-leaflet-src.js"></script> <script src="//cdn.jsdelivr.net/jsdelivr-rum/latest/jsdelivr-rum.min.js"></script>  <script src="//localhost:35729/livereload.js"></script>  <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-44963317-3', 'auto'); ga('send', 'pageview'); </script>  </head> <body> <div class="page-content "> <div class="container"> <a class="site-nav" href="../" class="left logo">Esri Leaflet</a> <nav class="right"> <a class="site-nav" href="../examples/">Examples</a> <a class="site-nav" href="../api-reference/">API Reference</a> <a class="site-nav" href="../download/">Download</a> <a class="site-nav" href="https://github.com/Esri/esri-leaflet">View on GitHub</a> </nav> </div> <div id="background-map" class="background-map"></div> <div class="container white"> <aside class="sidebar"> <h5>Basemaps</h5> <nav> <a href="../examples/showing-a-basemap.html">Showing an ArcGIS basemap</a> <a href="../examples/basemap-with-labels.html">Basemap with labels</a> <a href="../examples/switching-basemaps.html">Switching basemaps</a> <a href="../examples/retina-basemap.html">Retina Basemap</a> </nav> <h5>Feature Layers</h5> <nav> <a href="../examples/simple-feature-layer.html">Simple FeatureLayer</a> <a href="../examples/styling-feature-layer-points.html">Styling points</a> <a href="../examples/styling-feature-layer-polylines.html">Styling lines</a> <a href="../examples/styling-feature-layer-polygons.html">Styling polygons</a> <a href="../examples/feature-layer-popups.html">Custom popups</a> <a href="../examples/querying-feature-layers-1.html">Querying features #1</a> <a href="../examples/querying-feature-layers-2.html">Querying features #2</a> <a href="../examples/spatial-queries.html">Spatial Queries</a> <a href="../examples/simplifying-complex-features.html">Simplifying complex features</a> <a href="../examples/zooming-to-all-features-1.html">Zoom to all features #1</a> <a href="../examples/zooming-to-all-features-2.html">Zoom to all features #2</a> <a href="../examples/labeling-features.html">Labeling Features</a> <a href="../examples/clustering-feature-layers.html">Clustering points</a> <a href="../examples/styling-clusters.html">Styling clusters</a> <a href="../examples/visualize-points-as-a-heatmap.html">Points as a heatmap</a> <a href="../examples/styling-heatmaps.html">Styling heatmaps</a> <a href="../examples/visualizing-time-with-feature-layer.html">Time enabled services</a> <a href="../examples/feature-layer-snapshot.html">Layer "snapshots"</a> <a href="../examples/editing.html">Editing</a> </nav> <h5>Tile Layers</h5> <nav> <a href="../examples/tile-layer-1.html">Tiles from a Map Service #1</a> <a href="../examples/tile-layer-2.html">Tiles from a Map Service #2</a> <a href="../examples/non-mercator-projection.html">Non-mercator tiles</a> </nav> <h5>Dynamic Map Layer</h5> <nav> <a href="../examples/simple-dynamic-map-layer.html">Simple DynamicMapLayer</a> <a href="../examples/identifying-features.html">Identifying Features</a> <a href="../examples/finding-features.html">Finding Features</a> <a href="../examples/customizing-popups.html">Custom popups</a> <a href="../examples/visualizing-time-on-dynamic-map-layer.html">Time Ranges</a> <a href="../examples/dynamic-map-layer-reprojected.html">Reprojecting on the fly</a> </nav> <h5>Image Map Layer</h5> <nav> <a href="../examples/simple-image-map-layer.html">Simple ImageMapLayer</a> <a href="../examples/infrared-imagery.html">Infrared Imagery using BandIDs</a> <a href="../examples/image-map-layer-rendering-rule.html">Rendering Rule</a> <a href="../examples/identifying-imagery.html">Identify Imagery</a> <a href="../examples/image-map-layer-mosaic-rule.html">Mosaic Rule</a> <a href="../examples/imagery-popups.html">Custom popups</a> </nav> <h5>Authentication</h5> <nav> <a href="../examples/arcgis-online-auth.html">ArcGIS Online OAuth</a> <a href="../examples/premium-content.html">Premium ArcGIS Online content</a> <a href="../examples/arcgis-server-auth.html">ArcGIS Server username/password</a> </nav> <h5>Geocoding</h5> <nav> <a href="../examples/geocoding-control.html">Geocoding control</a> <a href="../examples/search-map-service.html">Searching map service</a> <a href="../examples/search-feature-layer.html">Searching feature layers</a> <a href="../examples/center-map-on-address.html">Center the initial map state</a> <a href="../examples/reverse-geocoding.html">Reverse geocoding</a> </nav> <h5>Other Plugins</h5> <nav> <a href="../examples/gp-plugin.html">Geoprocessing plugin</a> <a href="../examples/renderers-plugin.html">Renderers plugin</a> </nav> <h5>Misc.</h5> <nav> <a href="../examples/getting-service-metadata.html">Getting service metadata</a> <a href="../examples/parse-feature-collection.html">Parsing Feature Collections</a> </nav> </aside> <div class="example-content"> <div class="wrap"> <h1>Editing feature layers</h1> This sample uses <a href="https://github.com/Leaflet/Leaflet.draw">Leaflet Draw</a> to help edit the geometry of features in a hosted feature service. </div> <div id="map-wrapper">  <script src="https://rawgit.com/Leaflet/Leaflet.draw/master/dist/leaflet.draw-src.js"></script> <link rel="stylesheet" href="https://rawgit.com/Leaflet/Leaflet.draw/master/dist/leaflet.draw.css"> <style> #info-pane { position: absolute; top: 10px; right: 10px; z-index: 10; padding: 1em; background: white; text-align: right; } #form { display: none; } </style> <div id='map'></div> <div id='info-pane' class='leaflet-bar'> <label id='greeting'> Let's edit! </label> <form action='#' id='form'> <label for='PEDDISTRIC'> Pedestrian District Name <input id='PEDDISTRIC' type="text" value='' name='PEDDISTRIC'> </label> <label for='TRANPLANID'> Transportation Plan Id <input id='TRANPLANID' type='text' value='' name='TRANPLANID' disabled='disabled'> </label> </form> </div> <script> // create the map var map = L.map('map').setView([45.512, -122.619], 12); L.esri.basemapLayer('Streets').addTo(map); // add our feature layer to the map var pedestrianDistricts = L.esri.featureLayer({ url: 'http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/PDX_Pedestrian_Districts/FeatureServer/0' }).addTo(map); // variable to track the layer being edited var currentlyEditing; var currentlyDeleting = false; // create a feature group for Leaflet Draw to hook into for delete functionality var drawnItems = L.featureGroup(); map.addLayer(drawnItems); // track if we should disable custom editing as a result of other actions (create/delete) var disableEditing = false; // start editing a given layer function startEditing(layer) { document.getElementById("PEDDISTRIC").value = layer.feature.properties.PEDDISTRIC; // read only document.getElementById("TRANPLANID").value = layer.feature.properties.TRANPLANID; if (!disableEditing) { layer.editing.enable(); currentlyEditing = layer; } } // stop editing a given layer function stopEditing() { // if a layer is being edited, finish up and disable editing on it afterward. if (currentlyEditing) { handleEdit(currentlyEditing); currentlyEditing.editing.disable(); } currentlyEditing = undefined; } function handleEdit(layer) { // convert the layer to GeoJSON and build a new updated GeoJSON object for that feature layer.feature.properties.PEDDISTRIC = document.getElementById("PEDDISTRIC").value; pedestrianDistricts.updateFeature({ type: 'Feature', id: layer.feature.id, geometry: layer.toGeoJSON().geometry, properties: layer.feature.properties }, function(error, response) { console.log(error, response); displayGreeting(); }); } function displayAttributes() { document.getElementById("greeting").innerHTML = null; document.getElementById("form").style.display = 'block'; } function displayGreeting() { document.getElementById("greeting").innerHTML = "Lets edit!"; document.getElementById("form").style.display = 'none'; } // when the map is clicked, stop editing map.on('click', function(e) { stopEditing(); }); // when a pedestrian district is clicked, stop editing the current feature and edit the clicked feature pedestrianDistricts.on('click', function(e) { stopEditing(); startEditing(e.layer); if (!currentlyDeleting) { displayAttributes(); } }); // when pedestrian districts start loading (because of pan/zoom) stop editing pedestrianDistricts.on('loading', function() { stopEditing(); }); // when new features are loaded clear our current guides and feature groups // then load the current features into the guides and feature group pedestrianDistricts.on('load', function() { // wipe the current layers available for deltion and clear the current guide layers. drawnItems.clearLayers(); // for each feature push the layer representing that feature into the guides and deletion group pedestrianDistricts.eachFeature(function(layer) { drawnItems.addLayer(layer); }); }); // create a new Leaflet Draw control var drawControl = new L.Control.Draw({ edit: { featureGroup: drawnItems, // allow editing/deleting of features in this group edit: false // disable the edit tool (since we are doing editing ourselves) }, draw: { circle: false, // disable circles marker: false, // disable polylines polyline: false, // disable polylines polygon: { allowIntersection: false, // polygons cannot intersect thenselves drawError: { color: 'red', // color the shape will turn when intersects message: 'Oh snap! you can\'t draw that!' // message that will show when intersect }, } } }); // add our drawing controls to the map map.addControl(drawControl); // when we start using creation tools disable our custom editing map.on('draw:createstart', function() { disableEditing = true; }); // when we start using deletion tools, hide attributes and disable custom editing map.on('draw:deletestart', function() { disableEditing = true; currentlyDeleting = true; }); // listen to the draw created event map.on('draw:created', function(e) { // add the feature as GeoJSON (feature will be converted to ArcGIS JSON internally) pedestrianDistricts.addFeature(e.layer.toGeoJSON(), function(error, response) { console.log(error, response); }); disableEditing = false; }); // listen to the draw deleted event map.on('draw:deleted', function(e) { var delArray = []; e.layers.eachLayer(function(layer) { var id = layer.feature.id; delArray.push(id); }); pedestrianDistricts.deleteFeatures(delArray, function(error, response) { console.log(error, response); }); disableEditing = false; currentlyDeleting = false; }); </script> </div> <pre><code class="language-xml"><html> <head> <meta charset=utf-8 /> <title>Editing feature layers</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />  <link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" /> <script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>  <script src="//cdn.jsdelivr.net/leaflet.esri/1.0.3/esri-leaflet.js"></script> <style> body { margin:0; padding:0; } #map { position: absolute; top:0; bottom:0; right:0; left:0; } </style> </head> <body>  <script src="https://rawgit.com/Leaflet/Leaflet.draw/master/dist/leaflet.draw-src.js"></script> <link rel="stylesheet" href="https://rawgit.com/Leaflet/Leaflet.draw/master/dist/leaflet.draw.css"> <style> #info-pane { position: absolute; top: 10px; right: 10px; z-index: 10; padding: 1em; background: white; text-align: right; } #form { display: none; } </style> <div id='map'></div> <div id='info-pane' class='leaflet-bar'> <label id='greeting'> Let's edit! </label> <form action='#' id='form'> <label for='PEDDISTRIC'> Pedestrian District Name<br> <input id='PEDDISTRIC' type="text" value='' name='PEDDISTRIC'><br> </label> <label for='TRANPLANID'> Transportation Plan Id<br> <input id='TRANPLANID' type='text' value='' name='TRANPLANID' disabled='disabled'> </label> </form> </div> <script> // create the map var map = L.map('map').setView([45.512, -122.619], 12); L.esri.basemapLayer('Streets').addTo(map); // add our feature layer to the map var pedestrianDistricts = L.esri.featureLayer({ url: 'http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/PDX_Pedestrian_Districts/FeatureServer/0' }).addTo(map); // variable to track the layer being edited var currentlyEditing; var currentlyDeleting = false; // create a feature group for Leaflet Draw to hook into for delete functionality var drawnItems = L.featureGroup(); map.addLayer(drawnItems); // track if we should disable custom editing as a result of other actions (create/delete) var disableEditing = false; // start editing a given layer function startEditing(layer) { document.getElementById("PEDDISTRIC").value = layer.feature.properties.PEDDISTRIC; // read only document.getElementById("TRANPLANID").value = layer.feature.properties.TRANPLANID; if (!disableEditing) { layer.editing.enable(); currentlyEditing = layer; } } // stop editing a given layer function stopEditing() { // if a layer is being edited, finish up and disable editing on it afterward. if (currentlyEditing) { handleEdit(currentlyEditing); currentlyEditing.editing.disable(); } currentlyEditing = undefined; } function handleEdit(layer) { // convert the layer to GeoJSON and build a new updated GeoJSON object for that feature layer.feature.properties.PEDDISTRIC = document.getElementById("PEDDISTRIC").value; pedestrianDistricts.updateFeature({ type: 'Feature', id: layer.feature.id, geometry: layer.toGeoJSON().geometry, properties: layer.feature.properties }, function(error, response) { console.log(error, response); displayGreeting(); }); } function displayAttributes() { document.getElementById("greeting").innerHTML = null; document.getElementById("form").style.display = 'block'; } function displayGreeting() { document.getElementById("greeting").innerHTML = "Lets edit!"; document.getElementById("form").style.display = 'none'; } // when the map is clicked, stop editing map.on('click', function(e) { stopEditing(); }); // when a pedestrian district is clicked, stop editing the current feature and edit the clicked feature pedestrianDistricts.on('click', function(e) { stopEditing(); startEditing(e.layer); if (!currentlyDeleting) { displayAttributes(); } }); // when pedestrian districts start loading (because of pan/zoom) stop editing pedestrianDistricts.on('loading', function() { stopEditing(); }); // when new features are loaded clear our current guides and feature groups // then load the current features into the guides and feature group pedestrianDistricts.on('load', function() { // wipe the current layers available for deltion and clear the current guide layers. drawnItems.clearLayers(); // for each feature push the layer representing that feature into the guides and deletion group pedestrianDistricts.eachFeature(function(layer) { drawnItems.addLayer(layer); }); }); // create a new Leaflet Draw control var drawControl = new L.Control.Draw({ edit: { featureGroup: drawnItems, // allow editing/deleting of features in this group edit: false // disable the edit tool (since we are doing editing ourselves) }, draw: { circle: false, // disable circles marker: false, // disable polylines polyline: false, // disable polylines polygon: { allowIntersection: false, // polygons cannot intersect thenselves drawError: { color: 'red', // color the shape will turn when intersects message: 'Oh snap! you can\'t draw that!' // message that will show when intersect }, } } }); // add our drawing controls to the map map.addControl(drawControl); // when we start using creation tools disable our custom editing map.on('draw:createstart', function() { disableEditing = true; }); // when we start using deletion tools, hide attributes and disable custom editing map.on('draw:deletestart', function() { disableEditing = true; currentlyDeleting = true; }); // listen to the draw created event map.on('draw:created', function(e) { // add the feature as GeoJSON (feature will be converted to ArcGIS JSON internally) pedestrianDistricts.addFeature(e.layer.toGeoJSON(), function(error, response) { console.log(error, response); }); disableEditing = false; }); // listen to the draw deleted event map.on('draw:deleted', function(e) { var delArray = []; e.layers.eachLayer(function(layer) { var id = layer.feature.id; delArray.push(id); }); pedestrianDistricts.deleteFeatures(delArray, function(error, response) { console.log(error, response); }); disableEditing = false; currentlyDeleting = false; }); </script> </body> </html></code></pre> <div class="wrap"> <a href="http://github.com/esri/esri-leaflet/edit/master/site/source/pages/examples/editing.hbs">Edit this sample on GitHub</a> </div> </div> <div style='clear:both;'></div> </div> <div class="container centered-text"> Esri Leaflet is a project from the <a href="http://pdx.esri.com">Esri PDX R&D Center</a> and the <a href="https://github.com/Esri/esri-leaflet/graphs/contributors">Esri Community</a> </div> </div> <script src="../js/script.js"></script> </body> </html>