danvk/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>Update a choropleth layer by zoom level</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.44.1/mapbox-gl.js'></script>

  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>

  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
  <style>
      body { margin:0; padding:0; }
      #map { position:absolute; top:0; bottom:0; width:100%; }
      #update { position: absolute; top: 20px; left: 20px; z-index: 1; font-size: 2em; }
  </style>
</head>
<body>

<div id='map'></div>
<button id='update'>Change Colors</button>

<script src="index.js"></script>

</body>
</html>

## index.js
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFudmsiLCJhIjoiY2lrZzJvNDR0MDBhNXR4a2xqNnlsbWx3ciJ9.myJhweYd_hrXClbKk8XLgQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-73.9781213544922, 40.72382748514871],
    zoom: 11
});

let geojson;
const featureCollectionP = fetch("nyc-blockgroups.land.topojson")
    .then(response => response.json())
    .then(nyc => {
      geojson = topojson.feature(nyc, nyc.objects['nyc-blockgroups.land']);
      console.log('GeoJSON is ', JSON.stringify(geojson).length, ' bytes');
    });

const mapP = new Promise((resolve, reject) => {
  map.on('load', resolve);
});

const scale = d3.scaleLinear().range(['#ff0000', '#00ff00']);
function randomValues(geojson) {
  const out = [];
  for (const feature of geojson.features) {
    out.push({id: feature.properties.geo_id, value: Math.random()});
  }
  return out;
}

function makeExpression() {
  const expression = [
    'match',
    ['get', 'geo_id']
  ];
  for (const {id, value} of randomValues(geojson)) {
    expression.push(id, scale(value));
  }
  expression.push('#0000ff');  // default
  return expression;
}

Promise.all([mapP, featureCollectionP]).then(() => {
  map.addSource('blocks', {
    type: 'geojson',
    data: geojson,
  });

  map.addLayer({
    'id': 'blocks-join',
    'type': 'fill',
    'source': 'blocks',
    'paint': {
      'fill-color': makeExpression(),
      'fill-opacity': 0.8
    }
  });
});

document.getElementById('update').addEventListener('click', () => {
  map.setPaintProperty('blocks-join', 'fill-color', makeExpression());
});

## nyc-blockgroups.land.topojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              nyc-blockgroups.land.topojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Update a choropleth layer by zoom level</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.44.1/mapbox-gl.js'></script>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>

	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	#update { position: absolute; top: 20px; left: 20px; z-index: 1; font-size: 2em; }
	</style>
	</head>
	<body>

	<div id='map'></div>
	<button id='update'>Change Colors</button>

	<script src="index.js"></script>

	</body>
	</html>
	mapboxgl.accessToken = 'pk.eyJ1IjoiZGFudmsiLCJhIjoiY2lrZzJvNDR0MDBhNXR4a2xqNnlsbWx3ciJ9.myJhweYd_hrXClbKk8XLgQ';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/light-v9',
	center: [-73.9781213544922, 40.72382748514871],
	zoom: 11
	});

	let geojson;
	const featureCollectionP = fetch("nyc-blockgroups.land.topojson")
	.then(response => response.json())
	.then(nyc => {
	geojson = topojson.feature(nyc, nyc.objects['nyc-blockgroups.land']);
	console.log('GeoJSON is ', JSON.stringify(geojson).length, ' bytes');
	});

	const mapP = new Promise((resolve, reject) => {
	map.on('load', resolve);
	});

	const scale = d3.scaleLinear().range(['#ff0000', '#00ff00']);
	function randomValues(geojson) {
	const out = [];
	for (const feature of geojson.features) {
	out.push({id: feature.properties.geo_id, value: Math.random()});
	}
	return out;
	}

	function makeExpression() {
	const expression = [
	'match',
	['get', 'geo_id']
	];
	for (const {id, value} of randomValues(geojson)) {
	expression.push(id, scale(value));
	}
	expression.push('#0000ff'); // default
	return expression;
	}

	Promise.all([mapP, featureCollectionP]).then(() => {
	map.addSource('blocks', {
	type: 'geojson',
	data: geojson,
	});

	map.addLayer({
	'id': 'blocks-join',
	'type': 'fill',
	'source': 'blocks',
	'paint': {
	'fill-color': makeExpression(),
	'fill-opacity': 0.8
	}
	});
	});

	document.getElementById('update').addEventListener('click', () => {
	map.setPaintProperty('blocks-join', 'fill-color', makeExpression());
	});