<!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.
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.