-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (76 loc) · 3.04 KB
/
index.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
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Indoor Maps App</title>
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.css"
type="text/css" />
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.css"
type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.js"></script>
<script src="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.js"></script>
<!-- <script src="node_modules\azure-maps-control\dist\atlas.js"></script>
<script src="node_modules\azure-maps-indoor\dist\atlas-indoor.js"></script> -->
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#map-id {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map-id"></div>
<script>
const subscriptionKey = "xxx";
const tilesetId = "xxx";
const statesetId = "xxx";
const map = new atlas.Map("map-id", {
//use your facility's location
center: [-122.132600, 47.636202],
//or, you can use bounds: [# west, # south, # east, # north] and replace # with your Map bounds"anchorLatitude": 10.094929466783569,"anchorLongitude": 48.88442167270967,
view: 'Auto',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: subscriptionKey
},
zoom: 22,
});
const levelControl = new atlas.control.LevelControl({
position: "top-right",
});
const indoorManager = new atlas.indoor.IndoorManager(map, {
levelControl: levelControl, //level picker
tilesetId: tilesetId,
statesetId: statesetId // Optional
});
indoorManager.setOptions({ geography: 'eu' });
console.log(indoorManager)
indoorManager.setDynamicStyling(true);
map.events.add("levelchanged", indoorManager, (eventData) => {
//put code that runs after a level has been changed
console.log("The level has changed:", eventData);
});
map.events.add("facilitychanged", indoorManager, (eventData) => {
//put code that runs after a facility has been changed
console.log("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, "unit");
features.forEach(function (feature) {
console.log(feature);
// if (feature.layer.id == 'indoor_unit_office') {
// }
});
});
</script>
</body>
</html>