-
Notifications
You must be signed in to change notification settings - Fork 456
/
Copy pathPulse animation with bubble layer.html
140 lines (113 loc) · 6.16 KB
/
Pulse animation with 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pulse animation with 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 create a pulse animation using a bubble layer as a pulse." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, animate, animation, symbol, bubble" />
<meta name="author" content="Microsoft Azure Maps" /><meta name="version" content="1.0" />
<meta name="screenshot" content="screenshot.gif" />
<!-- 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, bubbleLayer;
//A duration for the animation in ms.
var duration = 2500;
//Max radius of the pulse circle.
var maxRadius = 30;
function getMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 9,
pitch: 60,
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 data source to add your data to.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create some random points
var points = [];
for (var i = 0; i < 100; i++) {
datasource.add(new atlas.data.Point([-122.33 + Math.random() - 0.5, 47.6 + Math.random() / 2 - 0.25]));
}
datasource.add(points);
//A bubble layer that will have its radius scaled during animation to create a pulse.
bubbleLayer = new atlas.layer.BubbleLayer(datasource, null, {
color: 'rgb(0, 204, 255)',
createIndicators: true, // to enable bubble layer a11y feature
//Hide the stroke of the bubble.
strokeWidth: 0,
//Make bubbles stay flat on the map when the map is pitched.
pitchAlignment: 'map'
});
//Add a layers for rendering data.
map.layers.add([
bubbleLayer,
//A symbol layer to be the main icon layer for the data point.
new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//For smoother animation, ignore the placement of the icon. This skips the label collision calculations and allows the icon to overlap map labels.
ignorePlacement: true,
//For smoother animation, allow symbol to overlap all other symbols on the map.
allowOverlap: true
},
textOptions: {
//For smoother animation, ignore the placement of the text. This skips the label collision calculations and allows the text to overlap map labels.
ignorePlacement: true,
//For smoother animation, allow text to overlap all other symbols on the map.
allowOverlap: true
}
})
]);
animate(0);
});
}
function animate(timestamp) {
//Calculate progress as a ratio of the duration between 0 and 1.
progress = timestamp % duration / duration;
//Early in the animaiton, make the radius small but don't render it. The map transitions between radiis, which causes a flash when going from large radius to small radius. This resolves that.
if (progress < 0.1) {
bubbleLayer.setOptions({
radius: 0,
opacity: 0
});
} else {
bubbleLayer.setOptions({
radius: maxRadius * progress,
//Have the opacity fade as the radius becomes larger.
opacity: Math.max(0.9 - progress, 0)
});
}
//Request the next frame of the animation.
animation = requestAnimationFrame(animate);
}
</script>
</head>
<body onload="getMap()">
<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>Pulse animation with bubble layer</legend>
This sample shows how to create a pulse animation using a bubble layer as a pulse. A second layer (symbol, bubble...) can be used to show the main data point.
</fieldset>
</body>
</html>