Insert automatic delay between line animations in Mapbox GL JSjQuery: Can I call delay() between addClass() and such?Add delays between UIView AnimationsDelay between animation in javascriptMapbox - Continent borders geo codes neededCSS Animation Delay in Between LoopDraw an animated line between two markers in MapBoxAnimated Marker on MapboxAdding markers to map (Mapbox)How do you center the map on a clicked symbol using MapBox and React Native?How do I set state of activeID to be the specific feature.id of a selected icon on MapBox in React Native
How can I fix the dull colors I am getting in Ubuntu 19.04 Terminal?
Why are Democratic presidential candidates promising free health care for Illegal Immigrants?
Were initial voiced stops voiceless in early Latin?
Graduate student with abysmal English writing skills, how to help
Does throwing a penny at a train stop the train?
Single word for "refusing to move to next activity unless present one is completed."
Is a request to book a business flight ticket for a graduate student an unreasonable one?
Can Jimmy hang on his rope?
If your plane is out-of-control, why does military training instruct releasing the joystick to neutralize controls?
Does a wizard need their hands free in order to cause their familiar from the Find Familiar spell to reappear?
What were the main German words for a prostitute before 1800?
Why weren't bootable game disks ever common on the IBM PC?
Integer Lists of Noah
Why is the ladder of the LM always in the dark side of the LM?
What does the phrase "head down the rat's hole" mean here?
Some interesting calculation puzzle that I made
What's the point of having a RAID 1 configuration over incremental backups to a secondary drive?
LED glows slightly during soldering
What are the original Russian words for a prostitute?
Is there any reason why MCU changed the Snap to Blip
Why do we need common sense in AI?
Which star / galaxy is moving away from us the fastest?
DFT vs. MP2 for stacked dimer
How do native German speakers usually express skepticism (using even) about a premise?
Insert automatic delay between line animations in Mapbox GL JS
jQuery: Can I call delay() between addClass() and such?Add delays between UIView AnimationsDelay between animation in javascriptMapbox - Continent borders geo codes neededCSS Animation Delay in Between LoopDraw an animated line between two markers in MapBoxAnimated Marker on MapboxAdding markers to map (Mapbox)How do you center the map on a clicked symbol using MapBox and React Native?How do I set state of activeID to be the specific feature.id of a selected icon on MapBox in React Native
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
0
I'm working with Mapbox GL JS, and am trying to add a delay to a series of line animations.
I am new to working with Javascript, and have unsuccesfully tried adapting some examples of delays into my project.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>So many Dots</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.j'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
<style>
body margin:0; padding:0;
#map position:absolute; top:0; bottom:0; width:100%;
</style>
</head>
<body>
<style>
.overlay
position: absolute;
top: 10px;
left: 10px;
.overlay button
font:600 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #3386c0;
color: #fff;
display: inline-block;
margin: 0;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 3px;
.overlay button:hover
background-color:#4ea0da;
</style>
<script
src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js' charset='utf-8'>
<div id='map'></div>
<div class='overlay'>
<button id='replay'>Replay</button>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY29waGFuaW0iLCJhIjoiY2pxcHd0ZWp6MDRicDQzczB3YWV4eG5sdSJ9.OOFgoDb-cRD1xm3i6wfVBw';
var map = new mapboxgl.Map(
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-43.1, 35.5],
zoom: 3
);
var route =
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-6.290259838, 36.52988052],[-82.36749268,23.1321106]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-75.80809021, 20.02582932],[-75.16217804, 39.95222092]
]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-66.47891235, 18.22506332]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-16.55675697, 28.29053116]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[2.341439962, 48.85720825]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-3.699919939, 42.341259]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-75.80809021, 20.02582932],[-74.00714111, 40.71455002]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-102.5251389, 23.94062042]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-75.53836823, 10.42504978]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-6.001959801, 37.38787842],[-82.36749268, 23.1321106]
]
,
]
;
// A single point that animates along the route.
// Coordinates are initially set to origin.
var point =
"type": "FeatureCollection",
"features": [
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-6.290259838, 36.52988052]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-75.80809021, 20.02582932]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-75.80809021, 20.02582932]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-6.001959801, 37.38787842]
,
]
;
for (j = 0; j < route.features.length; j++)
// Calculate the distance in kilometers between route start/end point.
for(i=0;i<11;i++)
var lineDistance = turf.lineDistance(route.features[j], 'kilometers');
console.log(lineDistance)
var arc = [];
// Number of steps to use in the arc and animation, more steps means
// a smoother arc and animation, but too many steps will result in a
// low frame rate
var steps = 1000;
// Draw an arc between the `origin` & `destination` of the two points
for (var i = 0; i < lineDistance; i += lineDistance / steps)
var segment = turf.along(route.features[j], i, 'kilometers');
arc.push(segment.geometry.coordinates);
// Update the route with calculated arc coordinates
route.features[j].geometry.coordinates = arc;
// Used to increment the value of the point measurement against the route.
var counter = 0;
map.on('load', function ()
// Add a source and layer displaying a point which will be animated in a circle.
map.addSource('route',
"type": "geojson",
"data": route
);
map.addSource('point',
"type": "geojson",
"data": point
);
map.addLayer(
"id": "route",
"source": "route",
"type": "line",
"paint":
"line-width": 1,
"line-color": "#007cbf"
);
map.addLayer(
"id": "point",
"source": "point",
"type": "circle",
"paint":
"circle-radius": 2,
"circle-color": "#000000"
);
map.addLayer(
"layout":
"icon-image": "circle",
"icon-rotate": ["get", "bearing"],
"icon-rotation-alignment": "map",
"icon-allow-overlap": true,
"icon-ignore-placement": true
);
function animate(featureIdx, cntr)
// Update point geometry to a new position based on counter denoting
// the index to access the arc.
if (cntr >= route.features[featureIdx].geometry.coordinates.length-1)
return;
point.features[featureIdx].geometry.coordinates = route.features[featureIdx].geometry.coordinates[cntr];
point.features[featureIdx].properties.bearing = turf.bearing(
turf.point(route.features[featureIdx].geometry.coordinates[cntr >= steps ? cntr - 1 : cntr]),
turf.point(route.features[featureIdx].geometry.coordinates[cntr >= steps ? cntr : cntr + 1])
);
// Update the source with this new data.
map.getSource('point').setData(point);
// Request the next frame of animation so long the end has not been reached.
if (cntr < steps)
requestAnimationFrame(function()animate(featureIdx, cntr+1););
document.getElementById('replay').addEventListener('click', function()
// Set the coordinates of the original point back to origin
point.features[0].geometry.coordinates = origin;
// Update the source layer
map.getSource('point').setData(point);
// Reset the counter
cntr = 0;
// Restart the animation.
animate(0,cntr);
animate(1,cntr);
animate(2,cntr);
animate(3,cntr);
animate(4,cntr);
animate(5,cntr);
animate(6,cntr);
animate(7,cntr);
animate(8,cntr);
animate(9,cntr);
);
// Start the animation.
animate(0, 0);
animate(1, 0);
animate(2, 0);
animate(3, 0);
animate(4, 0);
animate(5, 0);
animate(6, 0);
animate(7, 0);
animate(8, 0);
animate(9, 0);
);
</script>
</body>
</html>
I would like the animations to run with a slight delay in start time between each feature.
animation line mapbox delay
asked Mar 26 at 0:55
cophanimcophanim
11 bronze badge
add a comment |
0
I'm working with Mapbox GL JS, and am trying to add a delay to a series of line animations.
I am new to working with Javascript, and have unsuccesfully tried adapting some examples of delays into my project.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>So many Dots</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.j'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
<style>
body margin:0; padding:0;
#map position:absolute; top:0; bottom:0; width:100%;
</style>
</head>
<body>
<style>
.overlay
position: absolute;
top: 10px;
left: 10px;
.overlay button
font:600 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #3386c0;
color: #fff;
display: inline-block;
margin: 0;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 3px;
.overlay button:hover
background-color:#4ea0da;
</style>
<script
src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js' charset='utf-8'>
<div id='map'></div>
<div class='overlay'>
<button id='replay'>Replay</button>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY29waGFuaW0iLCJhIjoiY2pxcHd0ZWp6MDRicDQzczB3YWV4eG5sdSJ9.OOFgoDb-cRD1xm3i6wfVBw';
var map = new mapboxgl.Map(
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-43.1, 35.5],
zoom: 3
);
var route =
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-6.290259838, 36.52988052],[-82.36749268,23.1321106]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-75.80809021, 20.02582932],[-75.16217804, 39.95222092]
]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-66.47891235, 18.22506332]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-16.55675697, 28.29053116]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[2.341439962, 48.85720825]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-3.699919939, 42.341259]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-75.80809021, 20.02582932],[-74.00714111, 40.71455002]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-102.5251389, 23.94062042]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-75.53836823, 10.42504978]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-6.001959801, 37.38787842],[-82.36749268, 23.1321106]
]
,
]
;
// A single point that animates along the route.
// Coordinates are initially set to origin.
var point =
"type": "FeatureCollection",
"features": [
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-6.290259838, 36.52988052]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-75.80809021, 20.02582932]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-75.80809021, 20.02582932]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-6.001959801, 37.38787842]
,
]
;
for (j = 0; j < route.features.length; j++)
// Calculate the distance in kilometers between route start/end point.
for(i=0;i<11;i++)
var lineDistance = turf.lineDistance(route.features[j], 'kilometers');
console.log(lineDistance)
var arc = [];
// Number of steps to use in the arc and animation, more steps means
// a smoother arc and animation, but too many steps will result in a
// low frame rate
var steps = 1000;
// Draw an arc between the `origin` & `destination` of the two points
for (var i = 0; i < lineDistance; i += lineDistance / steps)
var segment = turf.along(route.features[j], i, 'kilometers');
arc.push(segment.geometry.coordinates);
// Update the route with calculated arc coordinates
route.features[j].geometry.coordinates = arc;
// Used to increment the value of the point measurement against the route.
var counter = 0;
map.on('load', function ()
// Add a source and layer displaying a point which will be animated in a circle.
map.addSource('route',
"type": "geojson",
"data": route
);
map.addSource('point',
"type": "geojson",
"data": point
);
map.addLayer(
"id": "route",
"source": "route",
"type": "line",
"paint":
"line-width": 1,
"line-color": "#007cbf"
);
map.addLayer(
"id": "point",
"source": "point",
"type": "circle",
"paint":
"circle-radius": 2,
"circle-color": "#000000"
);
map.addLayer(
"layout":
"icon-image": "circle",
"icon-rotate": ["get", "bearing"],
"icon-rotation-alignment": "map",
"icon-allow-overlap": true,
"icon-ignore-placement": true
);
function animate(featureIdx, cntr)
// Update point geometry to a new position based on counter denoting
// the index to access the arc.
if (cntr >= route.features[featureIdx].geometry.coordinates.length-1)
return;
point.features[featureIdx].geometry.coordinates = route.features[featureIdx].geometry.coordinates[cntr];
point.features[featureIdx].properties.bearing = turf.bearing(
turf.point(route.features[featureIdx].geometry.coordinates[cntr >= steps ? cntr - 1 : cntr]),
turf.point(route.features[featureIdx].geometry.coordinates[cntr >= steps ? cntr : cntr + 1])
);
// Update the source with this new data.
map.getSource('point').setData(point);
// Request the next frame of animation so long the end has not been reached.
if (cntr < steps)
requestAnimationFrame(function()animate(featureIdx, cntr+1););
document.getElementById('replay').addEventListener('click', function()
// Set the coordinates of the original point back to origin
point.features[0].geometry.coordinates = origin;
// Update the source layer
map.getSource('point').setData(point);
// Reset the counter
cntr = 0;
// Restart the animation.
animate(0,cntr);
animate(1,cntr);
animate(2,cntr);
animate(3,cntr);
animate(4,cntr);
animate(5,cntr);
animate(6,cntr);
animate(7,cntr);
animate(8,cntr);
animate(9,cntr);
);
// Start the animation.
animate(0, 0);
animate(1, 0);
animate(2, 0);
animate(3, 0);
animate(4, 0);
animate(5, 0);
animate(6, 0);
animate(7, 0);
animate(8, 0);
animate(9, 0);
);
</script>
</body>
</html>
I would like the animations to run with a slight delay in start time between each feature.
animation line mapbox delay
asked Mar 26 at 0:55
cophanimcophanim
11 bronze badge
add a comment |
0
0
0
I'm working with Mapbox GL JS, and am trying to add a delay to a series of line animations.
I am new to working with Javascript, and have unsuccesfully tried adapting some examples of delays into my project.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>So many Dots</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.j'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
<style>
body margin:0; padding:0;
#map position:absolute; top:0; bottom:0; width:100%;
</style>
</head>
<body>
<style>
.overlay
position: absolute;
top: 10px;
left: 10px;
.overlay button
font:600 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #3386c0;
color: #fff;
display: inline-block;
margin: 0;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 3px;
.overlay button:hover
background-color:#4ea0da;
</style>
<script
src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js' charset='utf-8'>
<div id='map'></div>
<div class='overlay'>
<button id='replay'>Replay</button>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY29waGFuaW0iLCJhIjoiY2pxcHd0ZWp6MDRicDQzczB3YWV4eG5sdSJ9.OOFgoDb-cRD1xm3i6wfVBw';
var map = new mapboxgl.Map(
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-43.1, 35.5],
zoom: 3
);
var route =
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-6.290259838, 36.52988052],[-82.36749268,23.1321106]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-75.80809021, 20.02582932],[-75.16217804, 39.95222092]
]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-66.47891235, 18.22506332]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-16.55675697, 28.29053116]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[2.341439962, 48.85720825]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-3.699919939, 42.341259]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-75.80809021, 20.02582932],[-74.00714111, 40.71455002]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-102.5251389, 23.94062042]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-75.53836823, 10.42504978]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-6.001959801, 37.38787842],[-82.36749268, 23.1321106]
]
,
]
;
// A single point that animates along the route.
// Coordinates are initially set to origin.
var point =
"type": "FeatureCollection",
"features": [
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-6.290259838, 36.52988052]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-75.80809021, 20.02582932]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-75.80809021, 20.02582932]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-6.001959801, 37.38787842]
,
]
;
for (j = 0; j < route.features.length; j++)
// Calculate the distance in kilometers between route start/end point.
for(i=0;i<11;i++)
var lineDistance = turf.lineDistance(route.features[j], 'kilometers');
console.log(lineDistance)
var arc = [];
// Number of steps to use in the arc and animation, more steps means
// a smoother arc and animation, but too many steps will result in a
// low frame rate
var steps = 1000;
// Draw an arc between the `origin` & `destination` of the two points
for (var i = 0; i < lineDistance; i += lineDistance / steps)
var segment = turf.along(route.features[j], i, 'kilometers');
arc.push(segment.geometry.coordinates);
// Update the route with calculated arc coordinates
route.features[j].geometry.coordinates = arc;
// Used to increment the value of the point measurement against the route.
var counter = 0;
map.on('load', function ()
// Add a source and layer displaying a point which will be animated in a circle.
map.addSource('route',
"type": "geojson",
"data": route
);
map.addSource('point',
"type": "geojson",
"data": point
);
map.addLayer(
"id": "route",
"source": "route",
"type": "line",
"paint":
"line-width": 1,
"line-color": "#007cbf"
);
map.addLayer(
"id": "point",
"source": "point",
"type": "circle",
"paint":
"circle-radius": 2,
"circle-color": "#000000"
);
map.addLayer(
"layout":
"icon-image": "circle",
"icon-rotate": ["get", "bearing"],
"icon-rotation-alignment": "map",
"icon-allow-overlap": true,
"icon-ignore-placement": true
);
function animate(featureIdx, cntr)
// Update point geometry to a new position based on counter denoting
// the index to access the arc.
if (cntr >= route.features[featureIdx].geometry.coordinates.length-1)
return;
point.features[featureIdx].geometry.coordinates = route.features[featureIdx].geometry.coordinates[cntr];
point.features[featureIdx].properties.bearing = turf.bearing(
turf.point(route.features[featureIdx].geometry.coordinates[cntr >= steps ? cntr - 1 : cntr]),
turf.point(route.features[featureIdx].geometry.coordinates[cntr >= steps ? cntr : cntr + 1])
);
// Update the source with this new data.
map.getSource('point').setData(point);
// Request the next frame of animation so long the end has not been reached.
if (cntr < steps)
requestAnimationFrame(function()animate(featureIdx, cntr+1););
document.getElementById('replay').addEventListener('click', function()
// Set the coordinates of the original point back to origin
point.features[0].geometry.coordinates = origin;
// Update the source layer
map.getSource('point').setData(point);
// Reset the counter
cntr = 0;
// Restart the animation.
animate(0,cntr);
animate(1,cntr);
animate(2,cntr);
animate(3,cntr);
animate(4,cntr);
animate(5,cntr);
animate(6,cntr);
animate(7,cntr);
animate(8,cntr);
animate(9,cntr);
);
// Start the animation.
animate(0, 0);
animate(1, 0);
animate(2, 0);
animate(3, 0);
animate(4, 0);
animate(5, 0);
animate(6, 0);
animate(7, 0);
animate(8, 0);
animate(9, 0);
);
</script>
</body>
</html>
I would like the animations to run with a slight delay in start time between each feature.
animation line mapbox delay
asked Mar 26 at 0:55
cophanimcophanim
11 bronze badge
I'm working with Mapbox GL JS, and am trying to add a delay to a series of line animations.
I am new to working with Javascript, and have unsuccesfully tried adapting some examples of delays into my project.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>So many Dots</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.j'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
<style>
body margin:0; padding:0;
#map position:absolute; top:0; bottom:0; width:100%;
</style>
</head>
<body>
<style>
.overlay
position: absolute;
top: 10px;
left: 10px;
.overlay button
font:600 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #3386c0;
color: #fff;
display: inline-block;
margin: 0;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 3px;
.overlay button:hover
background-color:#4ea0da;
</style>
<script
src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js' charset='utf-8'>
<div id='map'></div>
<div class='overlay'>
<button id='replay'>Replay</button>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY29waGFuaW0iLCJhIjoiY2pxcHd0ZWp6MDRicDQzczB3YWV4eG5sdSJ9.OOFgoDb-cRD1xm3i6wfVBw';
var map = new mapboxgl.Map(
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-43.1, 35.5],
zoom: 3
);
var route =
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-6.290259838, 36.52988052],[-82.36749268,23.1321106]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-75.80809021, 20.02582932],[-75.16217804, 39.95222092]
]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-66.47891235, 18.22506332]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-16.55675697, 28.29053116]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[2.341439962, 48.85720825]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-3.699919939, 42.341259]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-75.80809021, 20.02582932],[-74.00714111, 40.71455002]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-102.5251389, 23.94062042]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-75.53836823, 10.42504978]
]
,
"type": "Feature",
"geometry":
"type": "LineString",
"coordinates": [
[-6.001959801, 37.38787842],[-82.36749268, 23.1321106]
]
,
]
;
// A single point that animates along the route.
// Coordinates are initially set to origin.
var point =
"type": "FeatureCollection",
"features": [
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-6.290259838, 36.52988052]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-75.80809021, 20.02582932]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-75.80809021, 20.02582932]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
,
"type": "Feature",
"properties": ,
"geometry":
"type": "Point",
"coordinates": [-6.001959801, 37.38787842]
,
]
;
for (j = 0; j < route.features.length; j++)
// Calculate the distance in kilometers between route start/end point.
for(i=0;i<11;i++)
var lineDistance = turf.lineDistance(route.features[j], 'kilometers');
console.log(lineDistance)
var arc = [];
// Number of steps to use in the arc and animation, more steps means
// a smoother arc and animation, but too many steps will result in a
// low frame rate
var steps = 1000;
// Draw an arc between the `origin` & `destination` of the two points
for (var i = 0; i < lineDistance; i += lineDistance / steps)
var segment = turf.along(route.features[j], i, 'kilometers');
arc.push(segment.geometry.coordinates);
// Update the route with calculated arc coordinates
route.features[j].geometry.coordinates = arc;
// Used to increment the value of the point measurement against the route.
var counter = 0;
map.on('load', function ()
// Add a source and layer displaying a point which will be animated in a circle.
map.addSource('route',
"type": "geojson",
"data": route
);
map.addSource('point',
"type": "geojson",
"data": point
);
map.addLayer(
"id": "route",
"source": "route",
"type": "line",
"paint":
"line-width": 1,
"line-color": "#007cbf"
);
map.addLayer(
"id": "point",
"source": "point",
"type": "circle",
"paint":
"circle-radius": 2,
"circle-color": "#000000"
);
map.addLayer(
"layout":
"icon-image": "circle",
"icon-rotate": ["get", "bearing"],
"icon-rotation-alignment": "map",
"icon-allow-overlap": true,
"icon-ignore-placement": true
);
function animate(featureIdx, cntr)
// Update point geometry to a new position based on counter denoting
// the index to access the arc.
if (cntr >= route.features[featureIdx].geometry.coordinates.length-1)
return;
point.features[featureIdx].geometry.coordinates = route.features[featureIdx].geometry.coordinates[cntr];
point.features[featureIdx].properties.bearing = turf.bearing(
turf.point(route.features[featureIdx].geometry.coordinates[cntr >= steps ? cntr - 1 : cntr]),
turf.point(route.features[featureIdx].geometry.coordinates[cntr >= steps ? cntr : cntr + 1])
);
// Update the source with this new data.
map.getSource('point').setData(point);
// Request the next frame of animation so long the end has not been reached.
if (cntr < steps)
requestAnimationFrame(function()animate(featureIdx, cntr+1););
document.getElementById('replay').addEventListener('click', function()
// Set the coordinates of the original point back to origin
point.features[0].geometry.coordinates = origin;
// Update the source layer
map.getSource('point').setData(point);
// Reset the counter
cntr = 0;
// Restart the animation.
animate(0,cntr);
animate(1,cntr);
animate(2,cntr);
animate(3,cntr);
animate(4,cntr);
animate(5,cntr);
animate(6,cntr);
animate(7,cntr);
animate(8,cntr);
animate(9,cntr);
);
// Start the animation.
animate(0, 0);
animate(1, 0);
animate(2, 0);
animate(3, 0);
animate(4, 0);
animate(5, 0);
animate(6, 0);
animate(7, 0);
animate(8, 0);
animate(9, 0);
);
</script>
</body>
</html>
I would like the animations to run with a slight delay in start time between each feature.
animation line mapbox delay
animation line mapbox delay
asked Mar 26 at 0:55
cophanimcophanim
11 bronze badge
asked Mar 26 at 0:55
cophanimcophanim
11 bronze badge
asked Mar 26 at 0:55
cophanimcophanim
11 bronze badge
asked Mar 26 at 0:55
cophanimcophanim
11 bronze badge
asked Mar 26 at 0:55
cophanimcophanim
11 bronze badge
11 bronze badge
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55348403%2finsert-automatic-delay-between-line-animations-in-mapbox-gl-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Is this question similar to what you get asked at work? Learn more about asking and sharing private information with your coworkers using Stack Overflow for Teams.
Is this question similar to what you get asked at work? Learn more about asking and sharing private information with your coworkers using Stack Overflow for Teams.
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55348403%2finsert-automatic-delay-between-line-animations-in-mapbox-gl-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
