Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
145 lines (120 sloc) 5.16 KB
<!DOCTYPE html>
<title>Animate a Line - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows how to animate the position of a line on the map by updating its coordinates and layer." />
<meta name="keywords" content="map, gis, API, SDK, animate, animation, line, linestring, polyline" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="" type="text/css" />
<script src=""></script>
<script type='text/javascript'>
var map, datasource, line;
var speedFactor = 30; //The number of frames per longitude degree.
var animation;
var startTime = 0;
var progress = 0; //Progress = timestamp - startTime
var resetTime = false; //Indicates if the animation time needs to be reset.
var pauseButton = document.getElementById('pause');
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
view: 'Auto',
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
//Wait until the map resources are ready.'ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
//Create a layer that defines how to render the line on the map.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
strokeColor: 'red',
strokeWidth: 5
//Create a line object and wrap it with the Shape class for easier updating.
line = new atlas.Shape(new[[0, 0], [0, 0]])));
startTime =;
//Start the animation.
var pauseButton = document.getElementById('pause');
pauseButton.addEventListener('click', function () {
if (pauseButton.classList.contains('pause')) {
} else {
resetTime = true;
//If the browser tab gains/losses focus, reset startTime and progress, and pause requestAnimationFrame.
document.addEventListener('visibilitychange', function () {
resetTime = true;
function animateLine(timestamp) {
if (resetTime) {
//Resume previous progress.
startTime = - progress;
resetTime = false;
} else if (timestamp) {
progress = timestamp - startTime;
} else {
progress = 0;
//Restart if it finishes a loop.
if (progress > speedFactor * 360) {
startTime = timestamp;
line.setCoordinates([[0, 0], [0, 0]]);
} else {
var x = progress / speedFactor;
//Draw a sine wave with some math.
var y = Math.sin(x * Math.PI / 90) * 40;
//Append new coordinates to the line.
var coords = line.getCoordinates();
coords.push([x, y]);
//Update the line on the map.
// Request the next frame of the animation.
animation = requestAnimationFrame(animateLine);
#myMap {
position: relative;
width: 100%;
height: 600px;
#pause {
position: absolute;
top: 20PX;
left: 20PX;
#pause::after {
content: 'Pause';
#pause.pause::after {
content: 'Play';
<body onload='GetMap()'>
<div id='myMap'></div>
<button id="pause"></button>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>Animate a Line</legend>
This sample shows how to animate the position of a line on the map by appending coordinates to it over time.
You can’t perform that action at this time.