Exercise 13 - Using the Editor Widget
Exercise:
In this lab you will create an app that allows users to add, edit, or delete features. It uses the editor widget, which is new as of version 4.11. The application links to a web map that contains an editable layer from ArcGIS Online.
1. Add the following css to the style. This code adds a scrollbar to the list of editable attributes if the size exceeds 350px:
.esri-editor .esri-item-list__scroller {
max-height: 350px;
}
2. Update the require statement and function definition:
require([
"esri/WebMap",
"esri/views/MapView",
"esri/widgets/Editor"
], function(WebMap, MapView, Editor) {
3. Change the map to a WebMap and edit the view.
var webmap = new WebMap({
portalItem: {
id: "325015b250b04602be82499a8ac62a59"
}
});
var view = new MapView({
container: "viewDiv",
map: webmap
});
4. When the view is ready, disable popups, create the editor widget, and add it to the top right corner.
view.when(function() {
view.popup.autoOpenEnabled = false;
var editor = new Editor({
view: view
});
view.ui.add(editor, "top-right");
});
5. Finally, add the editor to the html.
<div id="editorDiv"></div>
Your app should display a map of tourist locations in DC. You should be able to add, edit, and delete features.
If you're stuck, ensure that your code looks like the solution in the picture below:
Final Solution