tomgrek/index.html Secret

## 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.42.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        transform: translateZ(0);
    }
    </style>
</head>

<body>
    <div id='map' clas='map'></div>
    <script>
    let cells = {};
    let cellKeys = [];
    mapboxgl.accessToken = 'pk.[YOUR_MAPBOX_TOKEN]';
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/[YOUR_MAPBOX_STYLE]?optimize=true',
        center: [-100, 36],
        minZoom: 4,
        zoom: 4
    });

    const paint = {
      'fill-color': {
        default: 'transparent',
        property: 'ZCTA5CE10',
        type: 'categorical',
        stops: [ ['94105', '#ff0000'] ],
      },
      'fill-opacity': 0.7,
    };

    const drawFrame = () => {
      map.removeLayer('cells');
      let newCells = JSON.parse(JSON.stringify(cells));
      for (const key of cellKeys) {
        let sumAliveNeighbors = 0;
        for (const neighbor of cells[key].adjacent) {
          if (cells[neighbor].alive) sumAliveNeighbors = sumAliveNeighbors + 1;
        }
        if (sumAliveNeighbors < 2) newCells[key].alive = false;
        if (sumAliveNeighbors === 3 || sumAliveNeighbors === 4) newCells[key].alive = true;
        if (sumAliveNeighbors >= 5) newCells[key].alive = false;
      }
      paint['fill-color'].stops = cellKeys.reduce((acc, key) => {
        if (newCells[key].alive) {
          acc.push([key, '#110933']);
        }
        return acc;
      }, []);
      cells = JSON.parse(JSON.stringify(newCells));

      map.addLayer({
        id: 'cells',
        type: 'fill',
        source: `zip-tiles`,
        'source-layer': `[us-zipcode-layer]`,
        'minzoom': 4,
        paint,
        }, 'water');
      setTimeout(() => {
        map.setPaintProperty('cells', 'fill-opacity', 0.74);
      }, 100);
    };

    map.on('load', function() {
      fetch('./[some_json].json')
        // json has keys equal to US zip codes
        // each zip code has keys: adjacent(string of adjacent zips e.g. '[94105, 94107]')
        .then(resp => resp.json())
        .then(j => {
          console.log('JSON decoded');
          cells = j;
          cellKeys = Object.keys(cells);
          cellKeys.map(key => cells[key].adjacent = JSON.parse(cells[key].adjacent));
          cellKeys.map(key => cells[key].alive = !!parseInt(Math.random() * 3 - 1));
          setInterval(drawFrame, 200);
        });

      map.addSource(`zip-tiles`, {
       type: 'vector',
       url: 'mapbox://[my-style-with-zipcode-sources]',
      });

      map.addLayer({
        id: 'cells',
        type: 'fill',
        source: `zip-tiles`,
        'source-layer': `[source-layer]`,
        'minzoom': 4,
        paint,
      }, 'water');
    });
    </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.42.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body {
	margin: 0;
	padding: 0;
	}
	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	transform: translateZ(0);
	}
	</style>
	</head>

	<body>
	<div id='map' clas='map'></div>
	<script>
	let cells = {};
	let cellKeys = [];
	mapboxgl.accessToken = 'pk.[YOUR_MAPBOX_TOKEN]';
	const map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/[YOUR_MAPBOX_STYLE]?optimize=true',
	center: [-100, 36],
	minZoom: 4,
	zoom: 4
	});

	const paint = {
	'fill-color': {
	default: 'transparent',
	property: 'ZCTA5CE10',
	type: 'categorical',
	stops: [ ['94105', '#ff0000'] ],
	},
	'fill-opacity': 0.7,
	};

	const drawFrame = () => {
	map.removeLayer('cells');
	let newCells = JSON.parse(JSON.stringify(cells));
	for (const key of cellKeys) {
	let sumAliveNeighbors = 0;
	for (const neighbor of cells[key].adjacent) {
	if (cells[neighbor].alive) sumAliveNeighbors = sumAliveNeighbors + 1;
	}
	if (sumAliveNeighbors < 2) newCells[key].alive = false;
	if (sumAliveNeighbors === 3 \|\| sumAliveNeighbors === 4) newCells[key].alive = true;
	if (sumAliveNeighbors >= 5) newCells[key].alive = false;
	}
	paint['fill-color'].stops = cellKeys.reduce((acc, key) => {
	if (newCells[key].alive) {
	acc.push([key, '#110933']);
	}
	return acc;
	}, []);
	cells = JSON.parse(JSON.stringify(newCells));

	map.addLayer({
	id: 'cells',
	type: 'fill',
	source: `zip-tiles`,
	'source-layer': `[us-zipcode-layer]`,
	'minzoom': 4,
	paint,
	}, 'water');
	setTimeout(() => {
	map.setPaintProperty('cells', 'fill-opacity', 0.74);
	}, 100);
	};

	map.on('load', function() {
	fetch('./[some_json].json')
	// json has keys equal to US zip codes
	// each zip code has keys: adjacent(string of adjacent zips e.g. '[94105, 94107]')
	.then(resp => resp.json())
	.then(j => {
	console.log('JSON decoded');
	cells = j;
	cellKeys = Object.keys(cells);
	cellKeys.map(key => cells[key].adjacent = JSON.parse(cells[key].adjacent));
	cellKeys.map(key => cells[key].alive = !!parseInt(Math.random() * 3 - 1));
	setInterval(drawFrame, 200);
	});

	map.addSource(`zip-tiles`, {
	type: 'vector',
	url: 'mapbox://[my-style-with-zipcode-sources]',
	});

	map.addLayer({
	id: 'cells',
	type: 'fill',
	source: `zip-tiles`,
	'source-layer': `[source-layer]`,
	'minzoom': 4,
	paint,
	}, 'water');
	});
	</script>
	</body>

	</html>