Hide Table of Contents
View Layout with right pane, map data from ArcGIS.com sample in sandbox
Layout with right pane, map data from ArcGIS.com

Description

This sample shows how to display a map from ArcGIS.com in a sample layout created using the Dojo layout widgets. The layout contains a header where the default title from the ArcGIS.com map is displayed. A link to the ArcGIS.com map item is included in the footer. This layout contains a right panel where you can add additional content such as widgets, additional text, legends etc.

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 additional information on working with the Dojo layout widgets see the Build Application Layouts help document.


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>Layout with right pane, map data from ArcGIS.com</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/soria/soria.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/dojox/grid/resources/soriaGrid.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
    <link rel="stylesheet" href="css/layout.css">

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="https://js.arcgis.com/3.46/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.IdentityManager");
      dojo.require("esri.arcgis.utils");

      var map;

      function init() {
        //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
        esri.config.defaults.geometryService = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        var urlObject = esri.urlToObject(document.location.href);
        var webmap = "44f0b42dadd74a48b5aa54788582b690";
        var bingMapsKey;
        if (urlObject.query) {
          webmap = urlObject.query.webmap;
          bingMapsKey = urlObject.query.bingMapsKey;
        }

        var mapDeferred = esri.arcgis.utils.createMap(webmap, "map", {
          mapOptions: {
            slider: true
          },
          bingMapsKey: bingMapsKey || prompt("Please enter your bing maps key"),
          geometryServiceURL: "https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"
        });
        mapDeferred.then(function(response) {
          map = response.map;
          dojo.byId("title").innerHTML = response.itemInfo.item.title;
          dojo.byId("dataSource").innerHTML = "<a target='_blank' href='https://www.arcgis.com/home/item.html?id=" + webmap + "'>View data details</a>";
        }, function(error) {
          console.log("Map creation failed: ", dojo.toJson(error));
        });
      }

      //show map on load
      dojo.ready(init);
    </script>
  </head>

  <body class="soria">
    <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" class="roundedCorners"
        data-dojo-props="region:'top'">
        <div id="title"></div>
      </div>

      <div id="map" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners"
        data-dojo-props="region:'center'">
      </div>

      <div data-dojo-type="dijit.layout.ContentPane" id="rightPane" class="roundedCorners"
      data-dojo-props="region:'right',splitter:'true'">
        Right section
      </div>

      <div id="footer" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane"
      data-dojo-props="region:'bottom'">
        <span id="dataSource"></span>
      </div>

    </div>
  </body>
</html>
 
          
Show Modal