forked from Esri/quickstart-map-phonegap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_basicwebmap.html
109 lines (97 loc) · 4.03 KB
/
index_basicwebmap.html
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>Basic Map</title>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#mapDiv {
height: 100%;
width: 100%;
margin: 0px;
}
</style>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div id="header" class="shadow roundedCorners" data-dojo-type="ContentPane" data-dojo-props="region:'top'">
<div id="title"></div>
<div id="subtitle"></div>
</div>
<div id="mapDiv" class="roundedCorners shadow" data-dojo-type="ContentPane" data-dojo-props="region:'center'"></div>
<div id="rightPane" class="roundedCorners shadow" data-dojo-type="ContentPane" data-dojo-props="region:'right'" >
<div id="legend"></div>
</div>
</div>
<!-- Load the library references for ArcGIS API for JavaScript -->
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<script type="text/javascript" src="http://js.arcgis.com/3.7compact"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
console.log('Received Event: ' + id);
mapInit();
}
};
var mapInit = function(){
require(["esri/map","esri/arcgis/utils","esri/dijit/Legend","esri/dijit/Scalebar","dijit/layout/BorderContainer",
"dijit/layout/ContentPane"],
function(Map,utils,Legend,Scalebar,BorderContainer,ContentPane) {
// Create map
var map = null;
utils.arcgisUrl = utils.arcgisUrl.replace("file:", "http:");
utils.createMap("4778fee6371d4e83a22786029f30c7e1", "mapDiv")
.then(function(response) {
console.log("hah");
dojo.byId("title").innerHTML = response.itemInfo.item.title;
dojo.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
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();
},function(error){
console.log("Map creation failed: ", dojo.toJson(error));
});
}
);
}
app.initialize();
</script>
</body>
</html>