D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ajzeigert
Full window
Github gist
Pulsing markers in Mapbox GL JS
<!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.eyJ1IjoiYWp6ZWlnZXJ0IiwiYSI6IldLdVhKN1UifQ.43CCALwNLBzVybtPFvcaJQ'; var map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location zoom: 3, // starting zoom hash: true // updates the url to reflect map position }); var elevated_points = 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_geography_regions_elevation_points.geojson' map.on('style.load', function(){ map.addSource('mountains', { 'type': 'geojson', 'data': elevated_points }); var baseLayout = { 'text-field': '#', 'text-font': ['Open Sans Extrabold', 'Arial Unicode MS Bold'], 'text-size': 40, // 'text-padding': 60, // 'text-allow-overlap': true, 'text-ignore-placement': true } var basePaint = { 'text-color': 'rgba(0,0,0,1)', 'text-opacity': 1, } map.addLayer({ 'id': 'mountains-pulse', 'type': 'symbol', 'source': 'mountains', 'layout': baseLayout, 'paint': basePaint }) map.addLayer({ 'id': 'mountains', 'type': 'symbol', 'source': 'mountains', 'layout': baseLayout, 'paint': basePaint }); map.setPaintProperty('mountains-pulse', 'text-color', 'yellow') map.setLayoutProperty('mountains-pulse', 'text-size', 40) var framesPerSecond = 30; var multiplier = 1; var opacity = .1; var textSize = 40; function pulseMarker(timestamp){ setTimeout(function() { requestAnimationFrame(pulseMarker) // console.log(timestamp) multiplier += .1; opacity -= ( .9 / framesPerSecond ); console.log(opacity); textSize += ( 50 / framesPerSecond ); map.setPaintProperty('mountains-pulse', 'text-opacity', opacity) map.setLayoutProperty('mountains-pulse', 'text-size', textSize) if (opacity <= 0.1) { opacity = 1; textSize = 40; } }, 1000 / framesPerSecond ); } pulseMarker(0); }) </script> </body> </html>
https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.js