Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Explore in the sandbox
View live sample
Download as a zip file
Description
This sample shows how to display and edit data from an ArcGIS.com map using the Dojo layout widgets. The application layout includes the editor widget and requires that the map contain data from a feature service.
The data for the sample application comes from an ArcGIS.com map. You can use ArcGIS.com to discover existing maps or create your own. After creating the map, you can use this sample layout to build an application with little or no development required.
The application has the url parameters listed below. If no url parameters are specified, the sample uses hardcoded values from within the application.
- webmap: Use this to specify the item id for the ArcGIS.com map. The webmap item must be shared publicly.
webMap=a193c5459e6e4fd99ebf09d893d65cf0
For information on working with the Dojo layout widgets see the Build Application Layouts help document.
Note: In the sample application the CSS and JavaScript are inlined in the page to make it easier to view the code. However in the real world the CSS and JavaScript are typically contained in external files. Click here to download a zipped version of the sample which uses external files for the JavaScript and CSS.
Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Editing layout using map data from ArcGIS.com</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css">
<script src="https://js.arcgis.com/3.29/"></script>
<script>
require([
"dojo/ready",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"esri/map",
"esri/config",
"esri/tasks/GeometryService",
"esri/urlUtils",
"esri/arcgis/utils",
"dojo/dom",
"dojo/_base/array",
"esri/dijit/editing/Editor",
"dojo/domReady!"
], function(
ready,
parser,
BorderContainer,
ContentPane,
Map,
config,
GeometryService,
urlUtils,
arcgisUtils,
dom,
array,
Editor
) {
ready(function(){
parser.parse();
config.defaults.io.proxyUrl = "/proxy/";
config.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
//check to see if a webmap was specified using URL params. If not use the
//hardcoded webmap id
var urlObject = urlUtils.urlToObject(document.location.href);
var webmap = "a193c5459e6e4fd99ebf09d893d65cf0";
if(urlObject.query && urlObject.query.webmap){
webmap = urlObject.query.webmap;
}
//create the map
arcgisUtils.createMap(webmap, "map", {
mapOptions: {
sliderStyle: "large"
},
ignorePopups: true
}).then(function(response){
var map = response.map;
dom.byId("title").innerHTML = response.itemInfo.item.title;
dom.byId("snippet").innerHTML = response.itemInfo.item.snippet;
dom.byId("dataSource").innerHTML = "<a target='_blank' href='https://www.arcgis.com/home/item.html?id=" + webmap + "'>View data details</a>";
//create the editor widget
var layerInfo = [];
var layers = response.itemInfo.itemData.operationalLayers;
array.forEach(layers, function (layer){
layerInfo.push({
"featureLayer": layer.layerObject
});
});
var settings = {
map: map,
layerInfos: layerInfo
};
var editorWidget = new Editor({
settings: settings
},"editorDiv");
editorWidget.startup();
});
});
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"
style="width:100%; height:100%;">
<div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<div id="title">
</div>
<div id="snippet">
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">
<div id="editorDiv">
</div>
</div>
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
</div>
<div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
<div id="dataSource"></div>
</div>
</div>
</body>
</html>