Hide Table of Contents
View Editing layout using map data from ArcGIS.com sample in sandbox
Editing layout using map data from ArcGIS.com

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>
 
          
Show Modal