Hide Table of Contents
View Web map using url parameters sample in sandbox
Web map using url parameters

Description

This sample shows how to display a map from www.arcgis.com in a sample layout created using the Dojo layout widgets. This application allows application users to specify a web map id as a url parameter.

The template also contains a configuration section that allows the template developer to specify default values. If no url parameters are specified, the sample uses the hardcoded values from within the application.

  • webmap: Use this to specify the item id for the ArcGIS.com map.
  • title: Specify the item id for the ArcGIS.com map. This will be overwritten if a webmap id is specified via url.
  • subtitle: Enter a default subtitle for the map. If nothing is specified the web map snippet is used as the subtitle.
  • sharingurl: Enter a url to your organizations content - by default this is http://www.arcgis.com/sharing/rest/content/items.

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>Web map using url parameters</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
    <link rel="stylesheet" href="css/layout.css"/>

     <script>var dojoConfig = {parseOnLoad: true};</script>
     <script src="https://js.arcgis.com/3.28/"></script>
     <script>
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.map");
        dojo.require("esri.IdentityManager");
        dojo.require("esri.dijit.Scalebar");
        dojo.require("esri.arcgis.utils");
        
        var map, urlObject;
        var configOptions;
       
        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");
      
          //specify any default settings for your map 
          //for example a bing maps key or a default web map id
          configOptions = {
            webmap:"dbd1c6d52f4e447f8c01d14a691a70fe",
            title:"",
            subtitle:"",
            //www.arcgis.com sharing url is used. modify this if yours is different
            sharingurl:"https://www.arcgis.com/sharing/rest/content/items"
          };
          
          esri.arcgis.utils.arcgisUrl = configOptions.sharingurl;
          esri.config.defaults.io.proxyUrl = "/proxy/";
          
          //get the web map id from the url 
          urlObject = esri.urlToObject(document.location.href);
          urlObject.query = urlObject.query || {};
          if(urlObject.query && urlObject.query.webmap){
             configOptions.webmap = urlObject.query.webmap;
          }
          
          //create the map using the web map id specified using configOptions or via the url parameter
          var mapDeferred = esri.arcgis.utils.createMap(configOptions.webmap, "map");

          mapDeferred.then(function (response) {
            //map title and subtitle
            dojo.byId("title").innerHTML = configOptions.title ||response.itemInfo.item.title;
            dojo.byId("subtitle").innerHTML = configOptions.subtitle || response.itemInfo.item.snippet || "";
            map = response.map;

            if (map.loaded) {
              initUI();
            } else {
              dojo.connect(map, "onLoad", initUI);
            }
                   
          }, function(error){
            console.log('Create Map Failed: ' , dojo.toJson(error));
          });
        }
        
        function initUI(){   
          //add scalebar or other components like a legend, overview map etc
          var scalebar = new esri.dijit.Scalebar({
            map: map,
            scalebarUnit:"english" 
          });         
        }

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

    <body class="tundra">
      <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer"  data-dojo-props="design:'headline',gutters:false" 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="subtitle"></div>
        </div>

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

      </div>
    </body>

</html>
 
          
Show Modal