ajzeigert/index.html

## 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>
	<!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>