Pulsing markers in Mapbox GL JS by ajzeigert

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.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>