Exercise 13 3D - 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/WebScene",
"esri/views/SceneView",
"esri/widgets/Editor"
], function(WebScene, SceneView, Editor) {
3. Change the map to a WebScene and edit the view.
var webscene = new WebScene({
portalItem: {
id: "206a6a13162c4d9a95ea6a87abad2437"
}
});
var view = new SceneView({
container: "viewDiv",
map: webscene
});
4. For the editing tool to identify the size and the rotation, you need to set them as visual variables in the renderer:
var renderer = {
type: "unique-value",
visualVariables: [
{
type: "size",
field: "SIZE",
axis: "height",
valueUnit: "meters"
},
{
type: "rotation",
field: "ROTATION"
}
],
};
5. 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,
renderer: renderer
});
view.ui.add(editor, "top-right");
});
6. Finally, add the editor to the html.
<div id="editorDiv"></div>
Your app should display a map of features in a scene near the water. You should be able to add, edit, and delete features. Feel free to play around with adding features, changing the sizes and locations, etc.
If you're stuck, ensure that your code looks like the solution in the picture below:
Final Solution