trescube/mapping_workshop_dynamic_historic_districts.html

## mapping_workshop_dynamic_historic_districts.html
<!DOCTYPE html>
<html>
  <head>
    <title>Delaware Mapping Workshop - National Register Historic Districts</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        const dataUrl = 'https://opendata.arcgis.com/datasets/a42d6e8095894faa9b55797280f6ece9_2.geojson';

        let center = {lat: 39.726, lng: -75.597};
        let zoom = 11;

        // infoWindow that will display info about the historic district
        let infoWindow = new google.maps.InfoWindow();

        const map = new google.maps.Map(document.getElementById('map'), {
          center: center,
          mapTypeId: 'roadmap',
          zoom: zoom
        });

        // fires whenever the map (but not a polygon) is clicked
        map.addListener('click', function(event) {
          map.setCenter(center);
          map.setZoom(zoom);
        });

        // load the data
        map.data.loadGeoJson(dataUrl);

        // stylize the feature polygons
        map.data.setStyle(function(feature) {
          return {
            strokeWeight: 1,
            fillColor: 'green'
          };
        });

        // when a new feature is added to the map, calculate and save off the bounds
        map.data.addListener('addfeature', function(event) {
            // calculate the bounds for each feature
            const bounds = new google.maps.LatLngBounds();

            // iterate the polygon points, extending the bounds
            event.feature.getGeometry().forEachLatLng(function(latLng) {
              bounds.extend(latLng);
            });

            // save bounds as a property for later use
            event.feature.setProperty('bounds', bounds);

        });

        // when a feature is clicked, fit the map to its bounds
        map.data.addListener('click', function(event) {
          map.fitBounds(event.feature.getProperty('bounds'));
        });

        // fires when mouse cursor enters polygon
        // reconfigure the infoWindow and display
        map.data.addListener('mouseover', function(event) {
          infoWindow.setContent(event.feature.getProperty('CRSNUM'));
          infoWindow.setPosition(event.feature.getProperty('bounds').getCenter());
          infoWindow.open(map);
        });

        // fires when mouse cursor leaves polygon
        // remove the infoWindow from the map
        map.data.addListener('mouseout', function(event) {
        });

      }

    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=<YOUR API KEY>
&callback=initMap"
    ></script>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Delaware Mapping Workshop - National Register Historic Districts</title>
	<meta name="viewport" content="initial-scale=1.0">
	<meta charset="utf-8">
	<style>
	#map {
	height: 100%;
	}
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script>
	function initMap() {
	const dataUrl = 'https://opendata.arcgis.com/datasets/a42d6e8095894faa9b55797280f6ece9_2.geojson';

	let center = {lat: 39.726, lng: -75.597};
	let zoom = 11;

	// infoWindow that will display info about the historic district
	let infoWindow = new google.maps.InfoWindow();

	const map = new google.maps.Map(document.getElementById('map'), {
	center: center,
	mapTypeId: 'roadmap',
	zoom: zoom
	});

	// fires whenever the map (but not a polygon) is clicked
	map.addListener('click', function(event) {
	map.setCenter(center);
	map.setZoom(zoom);
	});

	// load the data
	map.data.loadGeoJson(dataUrl);

	// stylize the feature polygons
	map.data.setStyle(function(feature) {
	return {
	strokeWeight: 1,
	fillColor: 'green'
	};
	});

	// when a new feature is added to the map, calculate and save off the bounds
	map.data.addListener('addfeature', function(event) {
	// calculate the bounds for each feature
	const bounds = new google.maps.LatLngBounds();

	// iterate the polygon points, extending the bounds
	event.feature.getGeometry().forEachLatLng(function(latLng) {
	bounds.extend(latLng);
	});

	// save bounds as a property for later use
	event.feature.setProperty('bounds', bounds);

	});

	// when a feature is clicked, fit the map to its bounds
	map.data.addListener('click', function(event) {
	map.fitBounds(event.feature.getProperty('bounds'));
	});

	// fires when mouse cursor enters polygon
	// reconfigure the infoWindow and display
	map.data.addListener('mouseover', function(event) {
	infoWindow.setContent(event.feature.getProperty('CRSNUM'));
	infoWindow.setPosition(event.feature.getProperty('bounds').getCenter());
	infoWindow.open(map);
	});

	// fires when mouse cursor leaves polygon
	// remove the infoWindow from the map
	map.data.addListener('mouseout', function(event) {
	});

	}

	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=<YOUR API KEY>
	&callback=initMap"
	></script>


	</body>
	</html>