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