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


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.


<!DOCTYPE html>
    <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.27/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
    <link rel="stylesheet" href="css/layout.css"/>

     <script>var dojoConfig = {parseOnLoad: true};</script>
     <script src="https://js.arcgis.com/3.27/"></script>
        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 = {
            //www.arcgis.com sharing url is used. modify this if yours is different
          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) {
            } 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,

        //show map on load 

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


Show Modal