trescube/mapping_workshop_dynamic_bike_routes.html

## mapping_workshop_dynamic_bike_routes.html
<!DOCTYPE html>
<html>
  <head>
    <title>Delaware Mapping Workshop - Statewide Bike Routes</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;
      }
      #info-box {
        background-color: white;
        border: 1px solid black;
        bottom: 30px;
        height: 160px;
        padding: 10px;
        position: absolute;
        left: 30px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="info-box">
      <table id="legend">
        <tr>
          <th align="left">Route Name</th>
          <th>Color</th>
        </tr>
      </table>
    </div>
    <script>
      const routes = {
        'Bicycle Route 1':                 'black',
        'Delmar-Felton':                   'green',
        'Kenneth Pike-Wilmington':         'gray',
        'Milford-Selbyville':              'blue',
        'Northern Branch of Bike Route 1': 'purple',
        'Wilmington-Milford':              'yellow'
      };

      // dynamically populate the legend
      const tableRef = document.getElementById('legend');

      Object.keys(routes).forEach(function(route) {
        const row = tableRef.insertRow();

        const nameCell = row.insertCell();
        nameCell.appendChild(document.createTextNode(route));

        const colorCell = row.insertCell();
        colorCell.setAttribute('bgcolor', routes[route]);

      });

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

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

        map.data.loadGeoJson(dataUrl);

        map.data.setStyle(function(feature) {
          return {
            // use the routes lookup table for this route's color
            strokeColor: routes[feature.getProperty('PRIMARY')],
            strokeWeight: 4
          };

        });

      }

    </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 - Statewide Bike Routes</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;
	}
	#info-box {
	background-color: white;
	border: 1px solid black;
	bottom: 30px;
	height: 160px;
	padding: 10px;
	position: absolute;
	left: 30px;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<div id="info-box">
	<table id="legend">
	<tr>
	<th align="left">Route Name</th>
	<th>Color</th>
	</tr>
	</table>
	</div>
	<script>
	const routes = {
	'Bicycle Route 1': 'black',
	'Delmar-Felton': 'green',
	'Kenneth Pike-Wilmington': 'gray',
	'Milford-Selbyville': 'blue',
	'Northern Branch of Bike Route 1': 'purple',
	'Wilmington-Milford': 'yellow'
	};

	// dynamically populate the legend
	const tableRef = document.getElementById('legend');

	Object.keys(routes).forEach(function(route) {
	const row = tableRef.insertRow();

	const nameCell = row.insertCell();
	nameCell.appendChild(document.createTextNode(route));

	const colorCell = row.insertCell();
	colorCell.setAttribute('bgcolor', routes[route]);

	});

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

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

	map.data.loadGeoJson(dataUrl);

	map.data.setStyle(function(feature) {
	return {
	// use the routes lookup table for this route's color
	strokeColor: routes[feature.getProperty('PRIMARY')],
	strokeWeight: 4
	};

	});

	}

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


	</body>
	</html>