/
Custom navigation controls.html
169 lines (146 loc) · 6.73 KB
/
Custom navigation controls.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom navigation controls - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows how to create a set of map navigation controls that can be placed anywhere on the page." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, controls, navigation controls, pan, zoom, pitch, tilt, rotate, satellite, aerial, imagery" />
<meta name="author" content="Microsoft Azure Maps" /><meta name="version" content="1.0" />
<meta name="screenshot" content="screenshot.jpg" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<script>
var map, datasource;
function getMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 12,
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
//Use Microsoft Entra ID authentication.
authType: 'anonymous',
clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', //Your Azure Maps client id for accessing your Azure Maps account.
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Microsoft Entra ID Token.
var tokenServiceUrl = 'https://samples.azuremaps.com/api/GetAzureMapsToken';
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
}
//Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
//authType: 'subscriptionKey',
//subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'
}
});
}
function zoomMap(offset) {
var cam = map.getCamera();
map.setCamera({
//Zoom the map within the range of min/max zoom of the map.
zoom: Math.max(cam.minZoom, Math.min(cam.maxZoom, cam.zoom + offset)),
type: 'ease',
duration: 250
})
}
//Number of degrees to change pitch the map per click.
const pitchStep = 10;
function pitchMap(offset) {
map.setCamera({
//Pitch the map within the range of 0 - 60 degrees.
pitch: Math.max(0, Math.min(60, map.getCamera().pitch + offset * pitchStep)),
type: 'ease',
duration: 250
})
}
//Number of degrees to change rotate the map per click.
const bearingStep = 15;
function rotateMap(offset) {
map.setCamera({
bearing: map.getCamera().bearing + offset * bearingStep,
type: 'ease',
duration: 250
})
}
function mapStyleChanged(elm) {
map.setStyle({
style: elm.options[elm.selectedIndex].value
});
}
</script>
<style>
.mapContainer, #myMap {
position: relative;
width: 100%;
min-width: 290px;
height: 600px;
}
.controlContainer {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
}
.controlContainer .navButton {
float: left;
margin: 2px;
background-color: #fff;
box-shadow: rgb(0 0 0 / 16%) 0 0 4px;
border: none;
border-radius: 2px;
width: 32px;
height: 32px;
padding: 2px 8px;
color: black;
font-size: 20px;
font-weight: bold;
text-align: center;
text-decoration: none;
line-height: 20px;
display: inline-block;
cursor: pointer;
}
.controlContainer .navButton:hover {
color: deepskyblue;
}
.controlContainer .navSelect {
width: 140px;
padding: 5px;
font-size: 14px;
}
.controlContainer .navSelect:hover {
color: black;
}
</style>
</head>
<body >
<!-- Wrap the map with a container div that's the same size to make it easy to absolutely position controls anywhere above the map. -->
<div class="mapContainer">
<div id="myMap"></div>
<!-- Since we want the controls to appear together, grouping them inside a div that will be absolutely positioned. -->
<div class="controlContainer">
<button class="navButton" title="Zoom In">+</button>
<button class="navButton" title="Zoom Out">⚊</button>
<button class="navButton" title="Derease Pitch">🠗</button>
<button class="navButton" title="Increase Pitch">🠕</button>
<button class="navButton" title="Rotate Right">⟳</button>
<button class="navButton" title="Rotate Left">⟲</button>
<select class="navButton navSelect" title="Map Style">
<option value="road" selected="selected">Road</option>
<option value="grayscale_dark">Dark Grayscale</option>
<option value="grayscale_light">Light Grayscale</option>
<option value="night">Night</option>
<option value="satellite">Satellite</option>
<option value="satellite_road_labels">Hybrid</option>
</select>
</div>
</div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>Custom navigation controls</legend>
This sample shows how to create a set of map navigation controls that can be placed anywhere on the page.
Instead of extending the atlas.Control class, this simply floats absolutely positioned HTML controls overtop of the map.
</fieldset>
</body>
</html>