Hide Table of Contents
View Web map by ID sample in sandbox
Web map by ID

Description

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.

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>Create web map from id</title>

 
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
 
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">

 
<script src="https://js.arcgis.com/3.46/" 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("ae2fdf0e6aeb4d5dbc2dd97f88bf5531", "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>
 
         
Show Modal