djfan/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Catchment Area: 03-08155</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.2/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.css' rel='stylesheet' />
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
    <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.eyJ1IjoiZGpmYW4iLCJhIjoiY2tkaHJuODE0MnR1YjJ1cGQ5aGh3Nnl1eCJ9.bXGFsmSx5uKKnHPgiHDs8g';
var center = [-73.9862093, 40.7985055];
var radius = 15;
var precision = 0.05;
var epsilon = 0.000001; // small number so that grid cells have some non zero height

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: center,
    zoom: 9,
    pitch: 60
});

var grid = turf.hexGrid(turf.bbox(turf.circle(center, radius)), precision);
var dome = turf.featureCollection(grid.features.map(function (feature) {
	var point = turf.centroid(feature);
	var distance = turf.distance(center, point);
	if (distance > radius) {
		return; // will be filtered out later
	}

	// sphere r^2 = x^2 + y^2 + z^2
	// therefore z = Math.sqrt(r^2 - x^2 - y^2)
	//             = Math.sqrt(r^2 - (x^2 + y^2))
	// but distance^2 = x^2 + y^2
	// so z = Math.sqrt(r^2 - distance^2)
	var z = Math.sqrt(Math.pow(radius, 2) - Math.pow(distance, 2));
	z = isNaN(z) ? 0 : z;

	return turf.feature(feature.geometry, {
		base_height: z * 1000, // z is km so times 1000 to get meters
		height: (z * 1000) + (distance * 1000 + epsilon) * 0.1 // TODO with a bit of maths you could work out exactly how much extrusion to use based on the distance and precision variables
	});
}).filter(function (feature) {
	// filter out null features, which resulted where the grid point was outside the circle
	return feature;
}));

map.on('load', function () {
	map.addSource('dome', {
		type: 'geojson',
		data: dome
	});

    map.addSource("catchment", {
        type: "geojson",
        // data: "file:///Users/u844505/Desktop/catchment0308155.geojson"
        // data: "https://gist.githubusercontent.com/djfan/03daa7cdbfe53b696fbdc1b2c94729f4/raw/21fb08193ed6fa972590d225557cbf14ed04522a/catchment.geojson",
        data: "https://gist.githubusercontent.com/djfan/03daa7cdbfe53b696fbdc1b2c94729f4/raw/a57361fb98a27aefa67b50e2d6c6e39d402e1b3e/catchment_new.geojson",
    });


    map.addLayer({
            id: 'maine',
            type: 'fill',
            source: 'catchment',
            layout: {},
            paint: {
                'fill-color': '#088',
                'fill-opacity': 0.5
                }
            });

	map.addLayer({
		id: 'dome',
		type: 'fill-extrusion',
		source: 'dome',
		layout: {},
		paint: {
			'fill-extrusion-color': 'red',
			'fill-extrusion-base': {
				type: 'identity',
				property: 'base_height'
			},
			'fill-extrusion-height': {
				type: 'identity',
				property: 'height'
			},
			'fill-extrusion-opacity': 0.5
		}
	});


});
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Catchment Area: 03-08155</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.2/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.css' rel='stylesheet' />
	<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
	<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.eyJ1IjoiZGpmYW4iLCJhIjoiY2tkaHJuODE0MnR1YjJ1cGQ5aGh3Nnl1eCJ9.bXGFsmSx5uKKnHPgiHDs8g';
	var center = [-73.9862093, 40.7985055];
	var radius = 15;
	var precision = 0.05;
	var epsilon = 0.000001; // small number so that grid cells have some non zero height

	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v9',
	center: center,
	zoom: 9,
	pitch: 60
	});

	var grid = turf.hexGrid(turf.bbox(turf.circle(center, radius)), precision);
	var dome = turf.featureCollection(grid.features.map(function (feature) {
	var point = turf.centroid(feature);
	var distance = turf.distance(center, point);
	if (distance > radius) {
	return; // will be filtered out later
	}

	// sphere r^2 = x^2 + y^2 + z^2
	// therefore z = Math.sqrt(r^2 - x^2 - y^2)
	// = Math.sqrt(r^2 - (x^2 + y^2))
	// but distance^2 = x^2 + y^2
	// so z = Math.sqrt(r^2 - distance^2)
	var z = Math.sqrt(Math.pow(radius, 2) - Math.pow(distance, 2));
	z = isNaN(z) ? 0 : z;

	return turf.feature(feature.geometry, {
	base_height: z * 1000, // z is km so times 1000 to get meters
	height: (z * 1000) + (distance * 1000 + epsilon) * 0.1 // TODO with a bit of maths you could work out exactly how much extrusion to use based on the distance and precision variables
	});
	}).filter(function (feature) {
	// filter out null features, which resulted where the grid point was outside the circle
	return feature;
	}));

	map.on('load', function () {
	map.addSource('dome', {
	type: 'geojson',
	data: dome
	});

	map.addSource("catchment", {
	type: "geojson",
	// data: "file:///Users/u844505/Desktop/catchment0308155.geojson"
	// data: "https://gist.githubusercontent.com/djfan/03daa7cdbfe53b696fbdc1b2c94729f4/raw/21fb08193ed6fa972590d225557cbf14ed04522a/catchment.geojson",
	data: "https://gist.githubusercontent.com/djfan/03daa7cdbfe53b696fbdc1b2c94729f4/raw/a57361fb98a27aefa67b50e2d6c6e39d402e1b3e/catchment_new.geojson",
	});


	map.addLayer({
	id: 'maine',
	type: 'fill',
	source: 'catchment',
	layout: {},
	paint: {
	'fill-color': '#088',
	'fill-opacity': 0.5
	}
	});

	map.addLayer({
	id: 'dome',
	type: 'fill-extrusion',
	source: 'dome',
	layout: {},
	paint: {
	'fill-extrusion-color': 'red',
	'fill-extrusion-base': {
	type: 'identity',
	property: 'base_height'
	},
	'fill-extrusion-height': {
	type: 'identity',
	property: 'height'
	},
	'fill-extrusion-opacity': 0.5
	}
	});



	});
	</script>

	</body>
	</html>