-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path.tmp_test2.html.19477~
139 lines (114 loc) · 4.08 KB
/
.tmp_test2.html.19477~
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
ArcGIS API for JavaScriptSELECT A SECTION
Samples
Hide Table of Contents
Samples Overview
Latest Samples
Analytics
Directions and Routing
Dynamic Layers
Editing
Geocoding
Graphics
HTML5
Image Layers
Map
Maps from ArcGIS.com
Editing layout using map data from ArcGIS.com
Fade effect using ArcGIS.com web maps
Gauges with ArcGIS.com webmap
Geodesic buffers with ArcGIS.com webmap
Web map by ID
Web map using JSON
Mobile
Popups and Info Windows
Portal
Printing
Query and Select
Renderers
Secure Resources
Tiled Layers
Time
Vector Feature Layers
Web map by ID
View live sample
Download as a zip file
Description
This sample application displays a web map generated using the ArcGIS.com map viewer. The web map's author used the tools in the map viewer to select a basemap, add the operational layers, define an initial extent and create popup windows.
The ArcGIS API for JavaScript has utility methods that allow you to consume the web maps from a JavaScript application: esri.arcgis.utils.createMap. In this snippet, the utility methods are used to create a map using the unique id for the web map.
var mapDeferred = esri.arcgis.utils.createMap(itemInfo, "map");
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="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css">
<script src="http://js.arcgis.com/3.8/"></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();
arcgisUtils.createMap("ec719a60670d4c00afbb3e06a19f8eb2","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>
</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>
Please contact the team to comment or give suggestions.
Copyright © Environmental Systems Research Institute, Inc.