samgehret/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Display buildings in 3D</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.54.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/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.eyJ1Ijoic2FtZ2VocmV0IiwiYSI6ImNqdm4wbHh4dTFpbWkzeXJ1dDB3bzh1dncifQ.f3XOEb-rpmdWVJ4v0bJwRw';

        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/light-v10',
            center: [-73.981309, 40.766580],
            pitch: 40,
            zoom: 16
        });

        map.on('load', function () {

            // buildingsArray contains unique building IDs for the two highlighted buildings. To get these programatically, you can use
            // Mapbox tilequery API. For example:
            //https://api.mapbox.com/v4/mapbox.buildings-plus-v1/tilequery/-73.9785,40.7663.json?limit=1&radius=0&geometry=polygon&dedupe=true&access_token=pk.eyJ1IjoicGV0aXRlY2Fzc2lzIiwiYSI6ImNqMWpxaTV4MjAxajQyd29hdmFwNm1xZjIifQ.wUhRkRf7PVPqDIDcp4Hdug

            let buildingsArray = [382016719, 433055452]

            map.addSource('buildings_new', {
                type: 'vector',
                url: 'mapbox://mapbox.buildings-plus-v1'
            })

            // use set feature state to add a "feature-state attribute." This effectively writes a new attribute into the feature within the tileset.
            buildingsArray.forEach(function (building) {
                map.setFeatureState({
                    source: 'buildings_new',
                    sourceLayer: 'buildings_plus',
                    id: building
                }, {
                    extrude_test: true
                });
            })

            map.addLayer({
                "id": "buildings-plus-v1",
                "type": "fill-extrusion",
                "source": 'buildings_new',
                "source-layer": "buildings_plus",
                "paint": {
                    // here we are saying, if the building feature, extrude_test, is not null, color based on the match attribute, if not color white.
                    'fill-extrusion-color': ['case',
                        ['!=', ['feature-state', 'extrude_test'], null],
                        [
                            'match',
                            ['get', 'type'],
                            'construction', 'orange',
                            /* other */
                            'yellow'
                        ],
                        'white'
                    ],
                    // here we are saying, if the building feature, extrude_test, is not null, then extrude based on height, otherwise extrude height = 0
                    'fill-extrusion-height': ['case',
                        ['!=', ['feature-state', 'extrude_test'], null],
                        ['get', 'height'],
                        0
                    ],
                    'fill-extrusion-base': 0,
                    'fill-extrusion-opacity': .6
                }
            });
        });
    </script>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset='utf-8' />
	<title>Display buildings in 3D</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.54.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/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.eyJ1Ijoic2FtZ2VocmV0IiwiYSI6ImNqdm4wbHh4dTFpbWkzeXJ1dDB3bzh1dncifQ.f3XOEb-rpmdWVJ4v0bJwRw';

	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/light-v10',
	center: [-73.981309, 40.766580],
	pitch: 40,
	zoom: 16
	});

	map.on('load', function () {

	// buildingsArray contains unique building IDs for the two highlighted buildings. To get these programatically, you can use
	// Mapbox tilequery API. For example:
	//https://api.mapbox.com/v4/mapbox.buildings-plus-v1/tilequery/-73.9785,40.7663.json?limit=1&radius=0&geometry=polygon&dedupe=true&access_token=pk.eyJ1IjoicGV0aXRlY2Fzc2lzIiwiYSI6ImNqMWpxaTV4MjAxajQyd29hdmFwNm1xZjIifQ.wUhRkRf7PVPqDIDcp4Hdug

	let buildingsArray = [382016719, 433055452]

	map.addSource('buildings_new', {
	type: 'vector',
	url: 'mapbox://mapbox.buildings-plus-v1'
	})

	// use set feature state to add a "feature-state attribute." This effectively writes a new attribute into the feature within the tileset.
	buildingsArray.forEach(function (building) {
	map.setFeatureState({
	source: 'buildings_new',
	sourceLayer: 'buildings_plus',
	id: building
	}, {
	extrude_test: true
	});
	})

	map.addLayer({
	"id": "buildings-plus-v1",
	"type": "fill-extrusion",
	"source": 'buildings_new',
	"source-layer": "buildings_plus",
	"paint": {
	// here we are saying, if the building feature, extrude_test, is not null, color based on the match attribute, if not color white.
	'fill-extrusion-color': ['case',
	['!=', ['feature-state', 'extrude_test'], null],
	[
	'match',
	['get', 'type'],
	'construction', 'orange',
	/* other */
	'yellow'
	],
	'white'
	],
	// here we are saying, if the building feature, extrude_test, is not null, then extrude based on height, otherwise extrude height = 0
	'fill-extrusion-height': ['case',
	['!=', ['feature-state', 'extrude_test'], null],
	['get', 'height'],
	0
	],
	'fill-extrusion-base': 0,
	'fill-extrusion-opacity': .6
	}
	});
	});
	</script>

	</body>

	</html>