Solved! Go to Solution.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"/>
<title>Create web map from JSON</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css" />
<link rel="stylesheet" href="css/layout.css"/>
<script src="http://js.arcgis.com/3.6/"></script>
<script>
require([
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/dom",
"esri/map",
"esri/geometry/Extent",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"esri/IdentityManagerBase", "esri/kernel",
"dojo/domReady!"
], function (
parser,
ready,
BorderContainer,
ContentPane,
dom,
Map,
Extent,
urlUtils,
arcgisUtils,
Legend,
Scalebar, IMB, kernel
) {
ready(function () {
parser.parse();
var webmapId = "<INSERT WEBMAP ID HERE>";
var userId = "<INSERT USER ID HERE>";
var tokenStr = "<INSERT TOKEN HERE>";
var token = {
"server": "http://www.arcgis.com/sharing/rest",
"userId": userId,
"token": tokenStr,
"ssl": false,
"expires": 7200
};
kernel.id.registerToken(token);
arcgisUtils.createMap(webmapId, "map").then(function (response) {
var map = response.map;
//By default the extent will be that of the web map. Here we change it
//to a custom extent.
//add the scalebar
var scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
//add the legend. Note that we use the utility method getLegendLayers to get
//the layers to display in the legend from the createMap response.
var legendLayers = arcgisUtils.getLegendLayers(response);
var legendDijit = new Legend({
map: map,
layerInfos: legendLayers
}, "legend");
legendDijit.startup();
});
});
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div id="title"></div>
<div id="subtitle"></div>
</div>
<div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
<div id="legend"></div>
</div>
</div>
</body>
</html>
A side note; The application needs to be owned by the same user as the web maps being accessed otherwise authentication will be granted.