-
Notifications
You must be signed in to change notification settings - Fork 0
/
mapanimation.js
41 lines (37 loc) · 1.43 KB
/
mapanimation.js
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
// This array contains the coordinates for all bus stops between MIT and Harvard
const busStops = [
[-71.093729, 42.359244],
[-71.094915, 42.360175],
[-71.0958, 42.360698],
[-71.099558, 42.362953],
[-71.103476, 42.365248],
[-71.106067, 42.366806],
[-71.108717, 42.368355],
[-71.110799, 42.369192],
[-71.113095, 42.370218],
[-71.115476, 42.372085],
[-71.117585, 42.373016],
[-71.118625, 42.374863],
];
// TODO: add your own access token
mapboxgl.accessToken = 'pk.eyJ1Ijoicm9ib21hbjEzMTMiLCJhIjoiY2xwdHdrNmc2MGV2aDJqcDlrc2llbGpucCJ9.XCGEa8fAc48nL10Oro1DIQ';
// This is the map instance
let map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-71.104081, 42.365554],
zoom: 14,
});
// TODO: add a marker to the map at the first coordinates in the array busStops. The marker variable should be named "marker"
let marker = new mapboxgl.Marker().setLngLat([-71.104081, 42.365554]).addTo(map);
// counter here represents the index of the current bus stop
let counter = 0;
function move() {
setTimeout(()=>{
if(counter >= busStops.length) // Use counter to access bus stops in the array busStops
return;
marker.setLngLat(busStops[counter]); //Use the function marker.setLngLat() to update the marker coordinates
counter++;
move(); // Make sure you call move() after you increment the counter.}
}, 1000); // move the marker on the map every 1000ms.
}