sansumbrella/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Highlight 3D Building By ID</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.53.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.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.eyJ1IjoiZGF2aWQtd2lja3MiLCJhIjoiY2p4Nmx3cjhzMDEybjN4c3gzbzh3cTZncyJ9.PTQf1HJSLa-qzXCeY-NIHw";
      var map = new mapboxgl.Map({
        style: "mapbox://styles/david-wicks/cjsgl6i5b43cc1frlz1o4uolc",
        center: [-74.0066, 40.7135],
        zoom: 15.5,
        pitch: 45,
        bearing: -17.6,
        container: "map",
        hash: true
      });

      // The 'building' layer in the mapbox-streets vector source contains building-height
      // data from OpenStreetMap.
      map.on("load", function() {
        // Insert the layer beneath any symbol layer.
        var layers = map.getStyle().layers;

        var labelLayerId;
        for (var i = 0; i < layers.length; i++) {
          if (layers[i].type === "symbol" && layers[i].layout["text-field"]) {
            labelLayerId = layers[i].id;
            break;
          }
        }

        map.addLayer(
          {
            id: "3d-buildings",
            source: "composite",
            "source-layer": "buildings_plus",
            filter: ["==", "extrude", "true"],
            type: "fill-extrusion",
            minzoom: 14,
            paint: {
              // color based on feature state
              "fill-extrusion-color": ["match", ["feature-state", "highlight"], "true", "#F0F", "#09F"],
              // use an 'interpolate' expression to add a smooth transition effect to the
              // buildings as the user zooms in
              "fill-extrusion-height": ["interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "height"]],
              "fill-extrusion-base": ["interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "min_height"]],
              "fill-extrusion-opacity": 0.6
            }
          },
          labelLayerId
        );

        map.on("click", e => {
          const features = map.queryRenderedFeatures(e.point, { layers: ["3d-buildings"] });
          const feature = features[0];
          if (feature) {
            selectFeature(feature.id);
          }
        });

        const selectFeature = (() => {
          let previous;
          return id => {
            if (id !== previous && previous !== undefined) {
              map.setFeatureState(
                { source: "composite", sourceLayer: "buildings_plus", id: previous },
                { highlight: "false" }
              );
            }
            previous = id;
            map.setFeatureState({ source: "composite", sourceLayer: "buildings_plus", id }, { highlight: "true" });
          };
        })();
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Highlight 3D Building By ID</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.53.0/mapbox-gl.js"></script>
	<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.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.eyJ1IjoiZGF2aWQtd2lja3MiLCJhIjoiY2p4Nmx3cjhzMDEybjN4c3gzbzh3cTZncyJ9.PTQf1HJSLa-qzXCeY-NIHw";
	var map = new mapboxgl.Map({
	style: "mapbox://styles/david-wicks/cjsgl6i5b43cc1frlz1o4uolc",
	center: [-74.0066, 40.7135],
	zoom: 15.5,
	pitch: 45,
	bearing: -17.6,
	container: "map",
	hash: true
	});

	// The 'building' layer in the mapbox-streets vector source contains building-height
	// data from OpenStreetMap.
	map.on("load", function() {
	// Insert the layer beneath any symbol layer.
	var layers = map.getStyle().layers;

	var labelLayerId;
	for (var i = 0; i < layers.length; i++) {
	if (layers[i].type === "symbol" && layers[i].layout["text-field"]) {
	labelLayerId = layers[i].id;
	break;
	}
	}

	map.addLayer(
	{
	id: "3d-buildings",
	source: "composite",
	"source-layer": "buildings_plus",
	filter: ["==", "extrude", "true"],
	type: "fill-extrusion",
	minzoom: 14,
	paint: {
	// color based on feature state
	"fill-extrusion-color": ["match", ["feature-state", "highlight"], "true", "#F0F", "#09F"],
	// use an 'interpolate' expression to add a smooth transition effect to the
	// buildings as the user zooms in
	"fill-extrusion-height": ["interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "height"]],
	"fill-extrusion-base": ["interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "min_height"]],
	"fill-extrusion-opacity": 0.6
	}
	},
	labelLayerId
	);

	map.on("click", e => {
	const features = map.queryRenderedFeatures(e.point, { layers: ["3d-buildings"] });
	const feature = features[0];
	if (feature) {
	selectFeature(feature.id);
	}
	});

	const selectFeature = (() => {
	let previous;
	return id => {
	if (id !== previous && previous !== undefined) {
	map.setFeatureState(
	{ source: "composite", sourceLayer: "buildings_plus", id: previous },
	{ highlight: "false" }
	);
	}
	previous = id;
	map.setFeatureState({ source: "composite", sourceLayer: "buildings_plus", id }, { highlight: "true" });
	};
	})();
	});
	</script>
	</body>
	</html>