Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Editing layout using map data from ArcGIS.com
Explore in the sandbox
View live sample
Description
This sample shows how to display and edit data from an ArcGIS.com map using 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=459a495fc16d4d4caa35e92e895694c8
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.
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.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css">
<script src="https://js.arcgis.com/3.46/"></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.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 = "459a495fc16d4d4caa35e92e895694c8";
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>