This repository has been archived by the owner on May 24, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 127
/
Customizing Clustered Pushpins.html
93 lines (78 loc) · 4.13 KB
/
Customizing Clustered Pushpins.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Customizing Clustered Pushpins - Bing Maps 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="Customizing the clustered pushpins can be done by passing a callback function into the clusteredPinCallback option of the cluster layer." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, Bing, Bing Maps" />
<meta name="author" content="Microsoft Bing Maps" />
<meta name="screenshot" content="bmv8-customclusteredpushpinsexample.jpg" />
<script type="text/javascript">
var map, clusterLayer;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap',{
zoom: 3
});
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
//Generate 3000 random pushpins in the map view.
var pins = Microsoft.Maps.TestDataGenerator.getPushpins(3000, map.getBounds());
//Create a ClusterLayer with options and add it to the map.
clusterLayer = new Microsoft.Maps.ClusterLayer(pins, {
clusteredPinCallback: createCustomClusteredPin,
gridSize: 80
});
map.layers.insert(clusterLayer);
});
}
function createCustomClusteredPin(cluster) {
//Define variables for minimum cluster radius, and how wide the outline area of the circle should be.
var minRadius = 12;
var outlineWidth = 7;
//Get the number of pushpins in the cluster
var clusterSize = cluster.containedPushpins.length;
//Calculate the radius of the cluster based on the number of pushpins in the cluster, using a logrithmic scale.
var radius = Math.log(clusterSize) / Math.log(10) * 5 + minRadius;
//Default cluster color is red.
var fillColor = 'rgba(255, 40, 40, 0.5)';
if (clusterSize < 10) {
//Make the cluster green if there are less than 10 pushpins in it.
fillColor = 'rgba(20, 180, 20, 0.5)';
} else if (clusterSize < 100) {
//Make the cluster yellow if there are 10 to 99 pushpins in it.
fillColor = 'rgba(255, 210, 40, 0.5)';
}
//Create an SVG string of two circles, one on top of the other, with the specified radius and color.
var svg = ['<svg xmlns="https://www.w3.org/2000/svg" width="', (radius * 2), '" height="', (radius * 2), '">',
'<circle cx="', radius, '" cy="', radius, '" r="', radius, '" fill="', fillColor, '"/>',
'<circle cx="', radius, '" cy="', radius, '" r="', radius - outlineWidth, '" fill="', fillColor, '"/>',
'</svg>'];
//Customize the clustered pushpin using the generated SVG and anchor on its center.
cluster.setOptions({
icon: svg.join(''),
anchor: new Microsoft.Maps.Point(radius, radius),
textOffset: new Microsoft.Maps.Point(0, radius - 8) //Subtract 8 to compensate for height of text.
});
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;background-color:gray"></div>
<fieldset style="width:800px;margin-top:10px;">
<legend>Cluster Layer Customizations Sample</legend>
This sample shows how to customize the rendering of a cluster layer. In this case it adjusts the grid cell size used for clustering,
and represents clusters using a custom created SVG that is scaled and colored based on the number of pushpins in it.
</fieldset>
<script>
// Dynamic load the Bing Maps Key and Script
// Get your own Bing Maps key at https://www.microsoft.com/maps
(async () => {
let script = document.createElement("script");
let bingKey = await fetch("https://samples.azuremaps.com/api/GetBingMapsKey").then(r => r.text()).then(key => { return key });
script.setAttribute("src", `https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=${bingKey}`);
document.body.appendChild(script);
})();
</script>
</body>
</html>