-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsample.html
128 lines (105 loc) · 5.6 KB
/
sample.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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creator indoor maps - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description"
content="This is a demo of the Azure Maps Creator indoor maps tutorial and the how-to implementation for the Azure Maps Web SDK." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, Creator, indoor maps, indoor, building" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css"
type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<!-- Add references to the Azure Maps Map Creator module JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.css"
type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.js"></script>
<script type='text/javascript'>
var map, indoorManager;
//Your tileset and stateset ID's for Azure Maps Creator.
const tilesetId = "xxx";
const statesetId = "xxx";
const subscriptionKey = "xxx";
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.132600, 47.636202],
zoom: 19,
style: 'grayscale_light',
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: subscriptionKey
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Add a map style selection control.
map.controls.add(new atlas.control.StyleControl({ mapStyles: "all" }), { position: "top-right" });
//Create an indoor maps manager.
indoorManager = new atlas.indoor.IndoorManager(map, {
tilesetId: tilesetId,
statesetId: statesetId // Optional
});
indoorManager.setOptions({ geography: 'eu' });
//Add a level control to the indoor manager.
indoorManager.setOptions({
levelControl: new atlas.control.LevelControl({ position: 'top-right' })
});
if (statesetId.length > 0) {
indoorManager.setDynamicStyling(true);
}
//Add event for when the focused facility level changes.
map.events.add('levelchanged', indoorManager, (eventData) => {
//code that you want to run after a level has been changed
writeToInfoPanel('The level has changed:', eventData);
});
//Add event for when the focused facility changes.
map.events.add('facilitychanged', indoorManager, (eventData) => {
//code that you want to run after a facility has been changed
writeToInfoPanel('The facility has changed:', eventData);
});
/* Upon a mouse click, log the feature properties to the browser's console. */
map.events.add("click", function (e) {
var features = map.layers.getRenderedShapes(e.position, 'indoor');
writeToInfoPanel('Feature(s) clicked:', features);
features.forEach(function (feature) {
if (feature.layer.id == 'indoor_unit_office') {
console.log(feature);
}
});
});
});
}
function writeToInfoPanel(msg, json) {
document.getElementById('infoPanel-msg').innerHTML = msg;
//Remove "map" object from json to prevent circular reference, and format JSON string.
document.getElementById('infoPanel-json').value = JSON.stringify(Object.assign({}, json, { map: undefined }), null, '\t').replace(/\"([^(\")"]+)\":/g, "$1:");
}
</script>
</head>
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<div id="infoPanel"
style="position:absolute;top:10px;left:10px;width:260px;height:580px;border:solid 1px #000;background-color:white;padding:5px;">
<div id="infoPanel-msg"></div>
<textarea id="infoPanel-json" style="width:250px;height:550px;white-space:nowrap"></textarea>
</div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>
<h1 style="font-size:16px">Creator indoor maps</h1>
</legend>
This is a demo of the <a
href="https://docs.microsoft.com/en-us/azure/azure-maps/tutorial-creator-indoor-maps">Azure Maps Creator
indoor maps tutorial</a> and the <a
href="https://docs.microsoft.com/en-us/azure/azure-maps/how-to-use-indoor-module">how-to implementation for
the Azure Maps Web SDK</a>.
Click on the facility to make the level picker appear.
</fieldset>
</body>
</html>