Layout with header and footer, map data from ArcGIS.com | ArcGIS API for JavaScript 3.46

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.

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.

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>Map with Header and footer - 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>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.arcgis.utils");
      dojo.require("esri.IdentityManager");

      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) {
          dojo.byId("title").innerHTML = response.itemInfo.item.title;
          dojo.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
          dojo.byId("dataSource").innerHTML = "<a target='_blank' href='https://www.arcgis.com/home/item.html?id=" + webmap + "'>View data details</a>";

          map = response.map;
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        },function(error){
          console.log("Map creation failed: ", dojo.toJson(error));
        });
      }
      //show map on load
      dojo.ready(init);
    </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" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
        <div id="title"></div>
        <div id="subtitle" class="roundedCorners">
        </div>
      </div>

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

	Site wide shortcuts
`?`	Bring up this help dialog
`esc`	Dismiss this help dialog
`gh`	Go to Home
`gg`	Go to Guide
`ga`	Go to API Reference
`gs`	Go to Sample Code
`gt`	Scroll to top of page
`spacebar`	Scroll page down
`shift spacebar`	Scroll page up
`gb`	Scroll to bottom of page

	Sample Code
`/`	Focus search
`es`	Explore in the Sandbox
`s`	Share in online code editor
`vl`	View live example

Explore in the sandbox View live sample

Description

Code

Keyboard shortcuts

Explore in the sandbox
View live sample