Skip to content

Instantly share code, notes, and snippets.

@danswick

danswick/index.html

Last active November 8, 2020 21:38
Show Gist options
  • Save danswick/2f72bc392b65e77f6a9c to your computer and use it in GitHub Desktop.
Save danswick/2f72bc392b65e77f6a9c to your computer and use it in GitHub Desktop.
Download ZIP
Mapbox GL Marker Blip
Raw
index.html
<!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>
@brunakov
Copy link

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