This sample displays a map generated using the ArcGIS.com map viewer. The map's author used the tools in the map viewer to select a basemap, add operational layers, define an initial extent and create popup windows.
The ArcGIS API for JavaScript has a utility method that allow you to use maps from ArcGIS.com or your own Portal in a JavaScript application: esri/arcgis/utils.createMap, which is used in this sample. In addition, you can also specify a portal URL, via thearcgisUrlproperty,besides the default ArcGIS Online URL ofhttp://www.arcgis.com/sharing/rest/content/items.
<!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>Create web map from id</title> <link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css"> <script src="https://js.arcgis.com/3.29/" data-dojo-config="async:true"></script> <script> require([ "dojo/parser", "dojo/ready", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/dom", "esri/map", "esri/urlUtils", "esri/arcgis/utils", "esri/dijit/Legend", "esri/dijit/Scalebar", "dojo/domReady!" ], function ( parser, ready, BorderContainer, ContentPane, dom, Map, urlUtils, arcgisUtils, Legend, Scalebar ) { ready(function () { parser.parse(); //if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL //arcgisUtils.arcgisUrl = "https://pathto/portal/sharing/content/items"; arcgisUtils.createMap("4abe6a830b8f466dacf8abfde567a781", "map").then(function (response) { //update the app dom.byId("title").innerHTML = response.itemInfo.item.title; dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet; var map = response.map; //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> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } body { font-family: "Helvetica"; } #header { background-color: #E8E8E8; height: 65px; margin: 5px 5px; } #mainWindow { width: 100%; height: 100%; } #title { padding-top: 2px; padding-left: 10px; font-size: 18pt; font-weight: 700; } #subtitle { font-size: small; padding-left: 40px; } #rightPane { background-color: #E8E8E8; margin: 5px; width: 20%; } #map { margin: 5px; padding: 0; } </style> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"> <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 id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'"> <div id="legend"></div> </div> </div> </body> </html>