trescube/mapping_workshop_dynamic_directions_to_historic_homes.html

## mapping_workshop_dynamic_directions_to_historic_homes.html
<!DOCTYPE html>
<html>
  <head>
    <title>Delaware Mapping Workshop - Directions to Historic Homes</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        font: 90% sans-serif;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>

    <div id="map" style="float:left;width:70%; height:100%"></div>
    <div style="float:right;width:30%;height 100%" id="directionsPanel"></div>
    <script>
      function isHouse(feature) {
        return feature.getProperty('NAME1').endsWith(' House');
      }

      function builtBetween(feature, startYear, endYear) {
        const yearBuilt = parseInt(feature.getProperty('YR_BUILT'));

        return yearBuilt >= startYear && yearBuilt < endYear;
      }

      function initMap() {
        const dataUrl = 'https://opendata.arcgis.com/datasets/443ea44c8297443d997e5fbc06b6c86f_0.geojson';

        const geocoder = new google.maps.Geocoder();

        const origin = '221 Academy Street, Newark, DE';
        let originLatLng;

        const map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 39.1172707, lng: -75.4815594},
          mapTypeId: 'terrain',
          zoom: 9
        });

        // geocode the origin and drop a marker on the map
        geocoder.geocode( { 'address': origin}, function(results, status) {
          console.log('geocode status: ' + status);
          if (status == 'OK') {
            originMarker = new google.maps.Marker({
              position: results[0].geometry.location,
              title: 'Starting Point',
              map: map
            });

            originLatLng = originMarker.getPosition();

          } else {
            alert('Geocode was not successful for the following reason: ' + status);
            originMarker = undefined;
          }

        });

        const directionsService = new google.maps.DirectionsService();
        const directionsDisplay = new google.maps.DirectionsRenderer();

        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directionsPanel'));

        // load the data
        map.data.loadGeoJson(dataUrl, {}, function(features) {
          // remove all features that aren't houses built between a certain year range
          features.forEach(function(feature) {
            if (!(isHouse(feature) && builtBetween(feature, 1700, 1750))) {
              map.data.remove(feature);
            }

          });

        });

        // stylize the points
        map.data.setStyle(function(feature) {
          return {
            title: feature.getProperty('NAME1') + '\nBuilt in ' + feature.getProperty("YR_BUILT"),
            strokeWeight: 1,
            icon: 'https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-18-24.png'
          };
        });

        // when a feature is clicked, calculate directions
        map.data.addListener('click', function(event) {
          // if the origin couldn't be geocoded, alert and return
          if (!originLatLng) {
            alert('Unable to geocode origin address');
            return;
          }

          let destinationLatLng;

          // just a point, should just be one latLng
          event.feature.getGeometry().forEachLatLng(function (latLng) {
            destinationLatLng = latLng;
          });

          // setup the directions request
          const request = {
            origin:      originLatLng.lat() + ',' + originLatLng.lng(),
            destination: destinationLatLng.lat() + ',' + destinationLatLng.lng(),
            travelMode:  'DRIVING'
          };

          // make the directions request
          directionsService.route(request, function(response, status) {
            if (status == 'OK') {
              // if everything went fine, display the directions
              directionsDisplay.setDirections(response);
            } else {
              alert('Directions was not successful for the following reason: ' + status);
            }
          });

        });

      }

    </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 - Directions to Historic Homes</title>
	<meta name="viewport" content="initial-scale=1.0">
	<meta charset="utf-8">
	<style>
	#map {
	height: 100%;
	}
	html, body {
	font: 90% sans-serif;
	height: 100%;
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>

	<div id="map" style="float:left;width:70%; height:100%"></div>
	<div style="float:right;width:30%;height 100%" id="directionsPanel"></div>
	<script>
	function isHouse(feature) {
	return feature.getProperty('NAME1').endsWith(' House');
	}

	function builtBetween(feature, startYear, endYear) {
	const yearBuilt = parseInt(feature.getProperty('YR_BUILT'));

	return yearBuilt >= startYear && yearBuilt < endYear;
	}

	function initMap() {
	const dataUrl = 'https://opendata.arcgis.com/datasets/443ea44c8297443d997e5fbc06b6c86f_0.geojson';

	const geocoder = new google.maps.Geocoder();

	const origin = '221 Academy Street, Newark, DE';
	let originLatLng;

	const map = new google.maps.Map(document.getElementById('map'), {
	center: {lat: 39.1172707, lng: -75.4815594},
	mapTypeId: 'terrain',
	zoom: 9
	});

	// geocode the origin and drop a marker on the map
	geocoder.geocode( { 'address': origin}, function(results, status) {
	console.log('geocode status: ' + status);
	if (status == 'OK') {
	originMarker = new google.maps.Marker({
	position: results[0].geometry.location,
	title: 'Starting Point',
	map: map
	});

	originLatLng = originMarker.getPosition();

	} else {
	alert('Geocode was not successful for the following reason: ' + status);
	originMarker = undefined;
	}

	});

	const directionsService = new google.maps.DirectionsService();
	const directionsDisplay = new google.maps.DirectionsRenderer();

	directionsDisplay.setMap(map);
	directionsDisplay.setPanel(document.getElementById('directionsPanel'));

	// load the data
	map.data.loadGeoJson(dataUrl, {}, function(features) {
	// remove all features that aren't houses built between a certain year range
	features.forEach(function(feature) {
	if (!(isHouse(feature) && builtBetween(feature, 1700, 1750))) {
	map.data.remove(feature);
	}

	});

	});

	// stylize the points
	map.data.setStyle(function(feature) {
	return {
	title: feature.getProperty('NAME1') + '\nBuilt in ' + feature.getProperty("YR_BUILT"),
	strokeWeight: 1,
	icon: 'https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-18-24.png'
	};
	});

	// when a feature is clicked, calculate directions
	map.data.addListener('click', function(event) {
	// if the origin couldn't be geocoded, alert and return
	if (!originLatLng) {
	alert('Unable to geocode origin address');
	return;
	}

	let destinationLatLng;

	// just a point, should just be one latLng
	event.feature.getGeometry().forEachLatLng(function (latLng) {
	destinationLatLng = latLng;
	});

	// setup the directions request
	const request = {
	origin: originLatLng.lat() + ',' + originLatLng.lng(),
	destination: destinationLatLng.lat() + ',' + destinationLatLng.lng(),
	travelMode: 'DRIVING'
	};

	// make the directions request
	directionsService.route(request, function(response, status) {
	if (status == 'OK') {
	// if everything went fine, display the directions
	directionsDisplay.setDirections(response);
	} else {
	alert('Directions was not successful for the following reason: ' + status);
	}
	});

	});

	}

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




	</body>
	</html>