Skip to content

Commit cd7b701

Browse files
rbrundrittrbrundritt
committed
Fix animation samples
Several bug fixes for animation samples.
1 parent daf8d77 commit cd7b701

10 files changed

Lines changed: 55 additions & 561 deletions

File tree

‎Samples/Animations/Animated tile layer/Animated tile layer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@
116116
//Create the animation manager.
117117
layer = new atlas.layer.AnimatedTileLayer({
118118
tileLayerOptions: tlOptions,
119-
duration: numTimestamps * 800, //Allow one second for each frame (tile layer) in the animation.
119+
duration: numTimestamps * 1000, //Allow one second for each frame (tile layer) in the animation.
120120
autoPlay: true,
121121
loop: true
122122
});

‎Samples/Animations/Moving dashed line/Moving dashed line.html‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>Animate marker along path - Azure Maps Web SDK Samples</title>
4+
<title>Moving dashed line - Azure Maps Web SDK Samples</title>
55

66
<meta charset="utf-8" />
7-
<link rel="shortcut icon" href="/favicon.ico"/>
8-
7+
<link rel="shortcut icon" href="/favicon.ico" />
8+
99
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
10-
<meta name="description" content="This sample shows how to easily animate a HTML marker along a path on the map." />
11-
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, animation, animate, animations, point, symbol, pushpin, marker, pin" />
12-
<meta name="author" content="Microsoft Azure Maps" /><meta name="version" content="1.0" />
10+
<meta name="description" content="This sample shows how to easily animate the dashes of a line to making it look like it is flowing." />
11+
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, animation, animate, animations, linestring, line" />
12+
<meta name="author" content="Microsoft Azure Maps" />
13+
<meta name="version" content="1.0" />
1314
<meta name="screenshot" content="screenshot.gif" />
1415

1516
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
@@ -60,9 +61,9 @@
6061
[-122.33787, 47.61295],
6162
[-122.34217, 47.60964]
6263
]));
63-
64-
//Add a layer for rendering line data.
65-
layer = new atlas.layer.LineLayer(datasource, null, {
64+
65+
//Add a layer for rendering line data.
66+
layer = new atlas.layer.LineLayer(datasource, null, {
6667
strokeWidth: 4
6768
});
6869
map.layers.add(layer);
@@ -79,8 +80,8 @@
7980
<div style="position:absolute;top:0px;left:calc(50% - 100px);background-color:white;padding:5px;">Click the map to animate marker.</div>
8081

8182
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
82-
<legend>Animate marker along path</legend>
83-
This sample shows how to easily animate a HTML marker along a path on the map.
83+
<legend>Moving dashed line</legend>
84+
This sample shows how to easily animate the dashes of a line to making it look like it is flowing.
8485
This sample uses the open source <a href="https://github.com/Azure-Samples/azure-maps-animations" target="_blank">Azure Maps Animation module</a>
8586
</fieldset>
8687
</body>

‎Samples/Controls/Fullscreen control options/Fullscreen control options.html‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,6 @@
1616
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
1717
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
1818

19-
<!-- Add reference to the fullscreen control module. -->
20-
<script src="/lib/azure-maps/azure-maps-fullscreen-control.min.js"></script>
21-
2219
<script>
2320
var map, fullscreenControl;
2421

@@ -64,11 +61,26 @@
6461
}
6562

6663
function update() {
67-
fullscreenControl.setOptions({
64+
if (fullscreenControl) {
65+
//Remove the control and event.
66+
map.events.remove('fullscreenchanged', fullscreenControl, displayEventInfo);
67+
map.controls.remove(fullscreenControl);
68+
}
69+
70+
//Create a control with the new options.
71+
fullscreenControl = new atlas.control.FullscreenControl({
6872
style: getSelectValue('style'),
6973
hideIfUnsupported: document.getElementById('hideIfUnsupported').checked,
7074
container: (getSelectValue('container') === 'map') ? null : '.testContainer'
7175
});
76+
77+
//Add events to the control.
78+
map.events.add('fullscreenchanged', fullscreenControl, displayEventInfo);
79+
80+
//Add control and a style control to the map.
81+
map.controls.add(fullscreenControl, {
82+
position: 'top-right'
83+
});
7284
}
7385

7486
function openTab(elm, tabName) {
@@ -155,7 +167,6 @@
155167
<fieldset class="sidePanel">
156168
<legend>Fullscreen control options</legend>
157169
This sample shows all the options of the fullscreen control.
158-
This samples uses the open source <a href="https://github.com/Azure-Samples/azure-maps-fullscreen-control" target="_blank">Azure Maps Fullscreen Control module</a>.
159170
<br /><br />
160171

161172
<div class="tab">

‎Samples/Controls/Fullscreen control/Fullscreen control.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,6 @@
1616
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
1717
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
1818

19-
<!-- Load in the JavaScript that has our custom control. -->
20-
<script src="/lib/azure-maps/azure-maps-fullscreen-control.min.js"></script>
21-
2219
<script>
2320
var map;
2421

@@ -69,7 +66,6 @@
6966
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
7067
<legend>Fullscreen control</legend>
7168
This sample shows how to add a fullscreen button to the map to display it in fullscreen mode.
72-
This samples uses the open source <a href="https://github.com/Azure-Samples/azure-maps-fullscreen-control" target="_blank" title="Azure Maps Fullscreen Control module">Azure Maps Fullscreen Control module</a>.
73-
</fieldset>
69+
</fieldset>
7470
</body>
7571
</html>

‎Samples/Heat Map Layer/Simple Heat Map Layer/Simple Heat Map Layer.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,18 +45,18 @@
4545
//Wait until the map resources are ready.
4646
map.events.add('ready', function () {
4747

48-
//Create a data source and add it to the map.
49-
datasource = new atlas.source.DataSource();
50-
map.sources.add(datasource);
48+
//Create a data source and add it to the map.
49+
datasource = new atlas.source.DataSource();
50+
map.sources.add(datasource);
5151

52-
//Load a data set of points, in this case earthquake data from the USGS.
53-
datasource.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson');
52+
//Load a data set of points, in this case earthquake data from the USGS.
53+
datasource.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson');
5454

55-
//Create a heatmap and add it to the map.
56-
map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
57-
radius: 10,
58-
opacity: 0.8
59-
}), 'labels');
55+
//Create a heatmap and add it to the map.
56+
map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
57+
radius: 10,
58+
opacity: 0.8
59+
}), 'labels');
6060
});
6161
}
6262
</script>

‎Samples/Map/Swipe map with fullscreen support/Swipe map with fullscreen support.html‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,6 @@
1919
<!-- Load in the JavaScript for the swipe map module. -->
2020
<script src="/lib/azure-maps/azure-maps-swipe-map.min.js"></script>
2121

22-
<!-- Load in the JavaScript for the fullscreen module. -->
23-
<script src="/lib/azure-maps/azure-maps-fullscreen-control.min.js"></script>
24-
2522
<script>
2623
var primaryMap, secondaryMap, primaryDataSource, secondaryDataSource;
2724

‎Static/lib/azure-maps/azure-maps-animations.js‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -688,9 +688,9 @@ MIT License
688688
case 'MultiPoint':
689689
if (feature.properties[timestampProperty] &&
690690
Array.isArray(feature.properties[timestampProperty]) &&
691-
feature.geometry.coordinates.length === feature.properties[timestampProperty]) {
691+
feature.geometry.coordinates.length === feature.properties[timestampProperty].length) {
692692
for (var i = 0, len = feature.geometry.coordinates.length; i < len; i++) {
693-
t = azmaps.math.parseTimestamp(feature.properties[timestampProperty]);
693+
t = azmaps.math.parseTimestamp(feature.properties[timestampProperty][i]);
694694
if (t) {
695695
pts.push(new azmaps.data.Feature(new azmaps.data.Point(feature.geometry.coordinates[i]), {
696696
_timestamp: t.getTime()
@@ -1189,7 +1189,7 @@ MIT License
11891189
self._curFrameIdx = frameIdx;
11901190
if (frameIdx !== -1) {
11911191
self._invokeEvent('onframe', {
1192-
type: 'onFrame',
1192+
type: 'onframe',
11931193
frameIdx: frameIdx,
11941194
animation: self,
11951195
numFrames: self._numFrames
@@ -1246,14 +1246,14 @@ MIT License
12461246
var self = _this;
12471247
self._id = AnimationManager.instance.add(self);
12481248
var numFrames = 0;
1249-
if (options) {
1250-
self.setOptions(options);
1251-
if (options.tileLayerOptions) {
1252-
numFrames = options.tileLayerOptions.length;
1253-
}
1249+
if (options && options.tileLayerOptions) {
1250+
numFrames = options.tileLayerOptions.length;
12541251
}
12551252
self._animation = new FrameBasedAnimationTimer(numFrames, self._onFrame, options);
12561253
self._onComplete = self._animation._onComplete;
1254+
if (options) {
1255+
self.setOptions(options);
1256+
}
12571257
return _this;
12581258
}
12591259
/**************************
@@ -1352,24 +1352,19 @@ MIT License
13521352
animation.setNumberOfFrames(opt.tileLayerOptions.length);
13531353
}
13541354
var frameIdx = (animation) ? self._animation.getCurrentFrameIdx() : 0;
1355+
if ((frameIdx == -1 || frameIdx > tileLayers.length)) {
1356+
frameIdx = 0;
1357+
}
13551358
if (frameIdx >= 0) {
13561359
self._currentTileLayer = tileLayers[frameIdx];
13571360
self._currentTileLayer.setOptions({ fadeDuration: 0, visible: true });
13581361
}
13591362
}
13601363
if (typeof options.visible === 'boolean') {
13611364
opt.visible = options.visible;
1362-
if (options.visible) {
1363-
var frameIdx = animation.getCurrentFrameIdx();
1364-
if (options.tileLayerOptions.length > 0) {
1365-
self._currentTileLayer.setOptions({ fadeDuration: 0, opacity: options.tileLayerOptions[frameIdx].opacity });
1366-
}
1367-
}
1368-
else {
1369-
tileLayers.forEach(function (l) { return l.setOptions({
1370-
opacity: 0
1371-
}); });
1372-
}
1365+
tileLayers.forEach(function (l) { return l.setOptions({
1366+
visible: options.visible
1367+
}); });
13731368
}
13741369
}
13751370
if (animation) {

‎Static/lib/azure-maps/azure-maps-animations.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)