Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Web map using url parameters
Explore in the sandbox
View live sample
Download as a zip file
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.26/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css"/>
<script>var dojoConfig = {parseOnLoad: true};</script>
<script src="https://js.arcgis.com/3.26/"></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>