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.46/dijit/themes/tundra/tundra.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.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
:"da61bdeed95c44f4abe81252a3b4c246",
            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;

         
//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