Skip to content

Instantly share code, notes, and snippets.

@ajzeigert
Created January 21, 2016 21:56
Show Gist options
  • Save ajzeigert/6d979af7beb969cd933d to your computer and use it in GitHub Desktop.
Save ajzeigert/6d979af7beb969cd933d to your computer and use it in GitHub Desktop.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment