Draw and edit shapes from a hosted feature service using the Leaflet Geoman plugin. This plugin allows you to edit the features in a hosted feature layer and pass the edits back to the server.
Draw, edit, and delete shapes. To learn how, click the info button.
<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.12/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet-vector@4.2.5/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>