Draw & animate a line on a map
Create a sine wave by dynamically drawing a polyline on a map.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Draw & animate a line on a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map')
.setView([0, 0], 3)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));;
// Add a new line to the map with no points.
var polyline = L.polyline([]).addTo(map);
// Keep a tally of how many points we've added to the map.
var pointsAdded = 0;
// Start drawing the polyline.
add();
function add() {
// `addLatLng` takes a new latLng coordinate and puts it at the end of the
// line. You optionally pull points from your data or generate them. Here
// we make a sine wave with some math.
polyline.addLatLng(
L.latLng(
Math.cos(pointsAdded / 20) * 30,
pointsAdded));
// Pan the map along with where the line is being added.
map.setView([0, pointsAdded], 3);
// Continue to draw and pan the map by calling `add()`
// until `pointsAdded` reaches 360.
if (++pointsAdded < 360) window.setTimeout(add, 100);
}
</script>
Get a free Mapbox account to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and
replacing the Map ID
with
one of your own from your projects.
Having trouble with JavaScript? Try out Codecademy
or contact our support team.