Last active
November 8, 2020 21:38
-
-
Save danswick/2f72bc392b65e77f6a9c to your computer and use it in GitHub Desktop.
Mapbox GL Marker Blip
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <title></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.12.2/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.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> | |
| mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og'; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/mapbox/streets-v8', | |
| center: [0, 0], | |
| zoom: 2 | |
| }); | |
| var framesPerSecond = 15; | |
| var initialOpacity = 1 | |
| var opacity = initialOpacity; | |
| var initialRadius = 8; | |
| var radius = initialRadius; | |
| var maxRadius = 18; | |
| map.on('load', function () { | |
| // Add a source and layer displaying a point which will be animated in a circle. | |
| map.addSource('point', { | |
| "type": "geojson", | |
| "data": { | |
| "type": "Point", | |
| "coordinates": [ | |
| 0, 0 | |
| ] | |
| } | |
| }); | |
| map.addLayer({ | |
| "id": "point", | |
| "source": "point", | |
| "type": "circle", | |
| "paint": { | |
| "circle-radius": initialRadius, | |
| "circle-radius-transition": {duration: 0}, | |
| "circle-opacity-transition": {duration: 0}, | |
| "circle-color": "#007cbf" | |
| } | |
| }); | |
| map.addLayer({ | |
| "id": "point1", | |
| "source": "point", | |
| "type": "circle", | |
| "paint": { | |
| "circle-radius": initialRadius, | |
| "circle-color": "#007cbf" | |
| } | |
| }); | |
| function animateMarker(timestamp) { | |
| setTimeout(function(){ | |
| requestAnimationFrame(animateMarker); | |
| radius += (maxRadius - radius) / framesPerSecond; | |
| opacity -= ( .9 / framesPerSecond ); | |
| map.setPaintProperty('point', 'circle-radius', radius); | |
| map.setPaintProperty('point', 'circle-opacity', opacity); | |
| if (opacity <= 0) { | |
| radius = initialRadius; | |
| opacity = initialOpacity; | |
| } | |
| }, 1000 / framesPerSecond); | |
| } | |
| // Start the animation. | |
| animateMarker(0); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
I have tried with this:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></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.12.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body onload="draw()">
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoieUZiWmwtVSJ9.0cPQywdbPVmvHiHJ6NwdXA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [0, 0],
zoom: 2
});
var framesPerSecond = 15;
var initialOpacity = 1;
var opacity = initialOpacity;
var initialRadius = 8;
var radius = initialRadius;
var maxRadius = 18;
var id = 0;
var points = [];
function flyTo(lat, lon) {
map.flyTo({
center: [lon, lat],
zoom: 9,
bearing: 0,
// These options control the flight curve, making it move
// slowly and zoom out almost completely before starting
// to pan.
speed: 0.8, // make the flying slow
curve: 1, // change the speed at which it zooms out
// This can be any easing function: it takes a number between
// 0 and 1 and returns another number between 0 and 1.
easing: function(t) {
return t;
}
});
}
function Point(id, src) {
this.id = id;
this.source = src;
}
function addPoint(lat, lon) {
// Add a source and layer displaying a point which will be animated in a circle.
id = id + 1;
src = "points" + id;
point = new Point(id, src);
points.push(point);
map.addSource(src, {
"type": "geojson",
"data": {
"type": "Point",
"coordinates": [
lon, lat
]
}
});
map.addLayer({
"id": "point" + id,
"source": src,
"type": "circle",
"paint": {
"circle-radius": initialRadius,
"circle-radius-transition": {
duration: 0
},
"circle-opacity-transition": {
duration: 0
},
"circle-color": "#007cbf"
}
});
map.addLayer({
"id": "point1" + id,
"source": src,
"type": "circle",
"paint": {
"circle-radius": initialRadius,
"circle-color": "#007cbf"
}
});
// Start the animation.
}
function updatePoint(point) {
radius += (maxRadius - radius) / framesPerSecond;
opacity -= (0.9 / framesPerSecond);
map.setPaintProperty("point" + point.id, 'circle-radius', radius);
map.setPaintProperty("point" + point.id, 'circle-opacity', opacity);
if (opacity <= 0) {
radius = initialRadius;
opacity = initialOpacity;
}
}
function draw() {
// console.log("inside draw")
setInterval(function() {
for (var i = 0; i < points.length; i++) {
updatePoint(points[i]);
};
}, 1000 / framesPerSecond);
}
</script>
</body>
</html>but as soon I addPoint(x,y) the animation speed doubles . Any feedback would be much appreciated !
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello!
Is there a way I can add multiple animated markers ?