/
Show clustered points in popup.html
159 lines (130 loc) · 7.65 KB
/
Show clustered points in popup.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Show clustered points in popup - 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 display selectable list of points within a cluster in a popup. When an item is selected, the content of the popup will update to show the details of the selected point. " />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, markers, pins, pushpins, symbols, layer, bubbles, clustering, superclusterer, earthquakes, USGS" />
<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;
//GeoJSON feed of all earthquakes from the past 30 days. Sourced from the USGS.
var earthquakeFeed = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";
function getMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-97, 39],
zoom: 3,
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 popup but leave it closed so we can update it and display it later.
popup = new atlas.Popup();
//Create a data source for the point data.
datasource = new atlas.source.DataSource(null, {
//Tell the data source to cluster point data.
cluster: true
});
map.sources.add(datasource);
//Create a symbol layer to render the clusters.
var clusterLayer = new atlas.layer.SymbolLayer(datasource, null, {
textOptions: {
textField: ['get', 'point_count_abbreviated'],
offset: [0, -1.2],
color: "#ffffff",
size: 14
},
filter: ['has', 'point_count'] //Filter individual points from this layer.
});
//Add click event to the clusters.
map.events.add('click', clusterLayer, clusterClicked);
//Add two symbol layers to the map, one for clusters, one for individual points.
map.layers.add([
clusterLayer,
//Create a layer to render the individual locations.
new atlas.layer.SymbolLayer(datasource, null, {
filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.
})
]);
//Retrieve a GeoJSON data set and add it to the data source.
datasource.importDataFromUrl(earthquakeFeed);
});
}
function clusterClicked(e) {
if (e && e.shapes && e.shapes.length > 0 && e.shapes[0].properties.cluster) {
//Get the clustered point from the event.
var cluster = e.shapes[0];
//If there are more than 10 points in the cluster, zoom the map in.
if (cluster.properties.point_count > 10) {
//Get the cluster expansion zoom level. This is the zoom level at which the cluster starts to break apart.
datasource.getClusterExpansionZoom(cluster.properties.cluster_id).then(function (zoom) {
//Update the map camera to be centered over the cluster.
map.setCamera({
center: cluster.geometry.coordinates,
zoom: zoom,
type: 'ease',
duration: 200
});
});
} else {
//If there are 10 or less points in a cluster, display a popup with a list.
//Get all points in the cluster. Set the offset to 0 and the limit to Infinity to return all points.
datasource.getClusterLeaves(cluster.properties.cluster_id, Infinity, 0).then(function (points) {
var html = ['<div style="padding:10px;">Cluster<br/><ul>'];
//Create a list of links for each point. Use one of the properties as the display text. Pass the ID of each shape into a function when clicked.
for (var i = 0; i < points.length; i++) {
html.push('<li><a href="javascript:void(0)" points[i].getId(), '\')">', points[i].getProperties().title, '</a></li>');
}
html.push('</ul></div>');
//Update the content and position of the popup.
popup.setOptions({
content: html.join(''),
position: cluster.geometry.coordinates,
pixelOffset: [0, -18]
});
//Open the popup.
popup.open(map);
});
}
}
}
function shapeSelected(id) {
//Get the shape from the data source by ID.
var shape = datasource.getShapeById(id);
//Update the content of the popup with the details of the selected point.
popup.setOptions({
content: atlas.PopupTemplate.applyTemplate(shape.getProperties())
});
}
</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>Show clustered points in popup</legend>
This sample shows how to display selectable list of points within a cluster in a popup. When an item is selected, the content of the popup will update to show the details of the selected point.
A list will be shown for clusters that have 10 or less points. Larger clusters will zoom in when clicked.
</fieldset>
</body>
</html>