/
Vector tile bubble layer.html
179 lines (148 loc) · 8.27 KB
/
Vector tile bubble layer.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
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vector tile bubble layer - 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 how to use a vector tile service to render point data on the map." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, markers, pins, pushpins, symbols, layer, bubbles, clustering, vector tiles, mbtiles, traffic, layer, flow, incidents" />
<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, popup;
function getMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-74, 40.723],
style: 'grayscale_dark',
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]'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a reusable popup.
popup = new atlas.Popup();
//Create a vector tile source and add it to the map.
datasource = new atlas.source.VectorTileSource(null, {
tiles: ['https://{azMapsDomain}/traffic/incident/tile/pbf?api-version=1.0&zoom={z}&x={x}&y={y}'],
maxZoom: 22
});
map.sources.add(datasource);
//Create a layer for clustered points.
var clusterLayer = new atlas.layer.BubbleLayer(datasource, null, {
createIndicators: true, // to enable bubble layer a11y feature
//The name of the data layer within the data source to pass into this rendering layer.
sourceLayer: 'Traffic incident POI',
//Scale the size of the clustered bubble based on the size of the cluster.
radius: [
'step',
['get', 'cluster_size'],
15, //Default of 15 pixel radius.
10, 20, //If cluster_size >= 10, radius is 20 pixels.
20, 25 //If cluster_size >= 20, radius is 25 pixels.
],
//Make clusters a single color.
color: 'purple',
strokeWidth: 0,
//Only rendered data points which have a cluster_size property.
filter: ['has', 'cluster_size']
});
//Add a click event to the layer so we can zoom in when a user clicks a cluster.
map.events.add('click', clusterLayer, clusterClicked);
//Create a layer for individual incident points.
var incidentLayer = new atlas.layer.BubbleLayer(datasource, null, {
createIndicators: true, // to enable bubble layer a11y feature
//The name of the data layer within the data source to pass into this rendering layer.
sourceLayer: 'Traffic incident POI',
//Color the bubble based on the magnitude of the incident.
color: [
'match',
['get', 'magnitude'],
1, 'green', //Minor
2, 'orange', //Moderate
3, 'red', //Major
'gray' //Unknown or undefined
],
//Filter out clustered points from this layer.
filter: ['all', ['!', ['has', 'cluster_size']]]//, ['!', ['get', 'poi_type'], 'end_poi']]
});
//Add a click event to the layer to display details about the incident.
map.events.add('click', incidentLayer, featureClicked);
map.layers.add([
clusterLayer,
//Create a symbol layer to render the size of clusters.
new atlas.layer.SymbolLayer(datasource, null, {
//The name of the data layer within the data source to pass into this rendering layer.
sourceLayer: 'Traffic incident POI',
iconOptions: {
image: 'none' //Hide the icon image.
},
textOptions: {
textField: ['get', 'cluster_size'],
offset: [0, 0.4],
color: 'white'
}
}),
incidentLayer
]);
});
}
function featureClicked(e) {
//Make sure the event occurred on a shape feature.
if (e.shapes && e.shapes.length > 0) {
//Since the data is coming from a vector tile source, it will be a raw GeoJSON feature and not a Shape class.
var f = e.shapes[0];
//If the shape is a Point, use its coordinates to position the popup, otherwise use the mouse location.
var pos = (f.geometry.type === 'Point') ? f.geometry.coordinates : e.position;
//Update the content and position of the popup.
popup.setOptions({
//Apply a template to the properties of the shape feature.
content: atlas.PopupTemplate.applyTemplate(f.properties),
position: pos
});
//Open the popup.
popup.open(map);
}
}
function clusterClicked(e) {
//Zoom the map in one zoom level where the mouse was clicked. Animate the transition.
map.setCamera({
center: e.position,
zoom: map.getCamera().zoom + 1,
type: 'ease',
duration: 250
});
}
</script>
</head>
<body >
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>Vector tile bubble layer</legend>
This sample shows how to how to use a vector tile service to render point data on the map.
In this case traffic incident data is rendered as clusters and points on the map using bubble and symbol layers.
<br /><br />
This sample uses the <a href="https://docs.microsoft.com/en-us/rest/api/maps/traffic/gettrafficincidenttile">Azure Maps vector tile traffic incident service</a>.
Detailed information about the format of the traffic incident vector tiles can be found
<a href="https://developer.tomtom.com/traffic-api/traffic-api-documentation-traffic-incidents/vector-incident-tiles">here</a>.
</fieldset>
</body>
</html>