csessig86/national_register

## national_register
## View online: http://wcfcourier.com/app/special/national_register/

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>WCFCourier.com - Historic places in Eastern Iowa</title>

<style>
body { font-family: Arial, sans-serif; }

#search {
  	font-family: Arial, sans-serif;}

#map_canvas {
	border: 1px solid #999999;
	height: 565px;
	width:700px;
}

#legend {
    width:225px;
    background-color:#FFFFFF;
    padding:10px;
    font-family: Arial, sans-serif;
    font-size:14px;
    border: 1px solid #999999;
    line-height:1.3em;
}

#legend h1 {font-size:18px; margin:0 0 4px 0; text-align: center;}
#legend h2 {font-size:14px; margin:0;}
#legend h3 {font-size:13px; margin: 10px 0 0 0;}

#legend .colors {float:left;line-height:23px; width:150px; margin: 10px 0; font-weight: bold;}
#legend .colors span {height:20px; width:20px; margin-right:5px; display:block; float:left; clear:left;}
#legend .one {background-color: #2b8cbe; border: 1px solid #000000;}
#legend .two {background-color: #7bccc4; border: 1px solid #000000;}
#legend .three {background-color: #bae4bc; border: 1px solid #000000;}
#legend .four {background-color: #f0f9e8; border: 1px solid #000000;}

#legend p {clear:both; margin:5px 0 0 0;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<!-- INCLUDE THIS SCRIPT REFERENCE FOR MOUSEOVER -->
<script type="text/javascript" src="fusiontips.js"></script>

<script type="text/javascript" id="script">
var map;
var layer;
var geocoder = new google.maps.Geocoder();

function loadmap() {
	layer2 = new google.maps.FusionTablesLayer({
		query: {
			select: 'geometry',
			from: 2814002
		},
		suppressInfoWindows: true
	});
	layer2.setMap(map);

	layer3 = new google.maps.FusionTablesLayer({
		query: {
			select: 'geometry',
			from: 2824727
		},
		suppressInfoWindows: true
	});
	layer3.setMap(map);

	layer = new google.maps.FusionTablesLayer({
		query: {
			select: 'Mappable_location',
			from: 2813443
		},
		suppressInfoWindows: true,
		styles: [{
			markerOptions: {
				iconName: "small_blue"
			}
		}]
	});
	layer.setMap(map);

	// Enables rollover
	layer.enableMapTips({
		select: "'Name', 'Location', 'City', 'Significance'",
		from: 2813443,
		geometryColumn: 'Mappable_location',
		suppressMapTips: false,
		delay: 1,
		tolerance: 8
	});
}

function zoomtoaddress() {

  // Use the geocoder to geocode the address
  geocoder.geocode( { 'address': document.getElementById("address").value }, function(results, status) {
    // If the status of the geocode is OK
    if (status == google.maps.GeocoderStatus.OK) {
      // Change the center and zoom of the map
      map.setCenter(results[0].geometry.location);
      map.setZoom(12);
    }
  });
}

// Register Enter key press to submit form
window.onkeypress = enterSubmit;
function enterSubmit() {
  if(event.keyCode==13) {
    zoomtoaddress();
  }
}

function initialize() {
	map = new google.maps.Map(document.getElementById('map_canvas'), {
	    center: new google.maps.LatLng(42.5, -92.2),
		zoom: 10,
		minZoom: 8,
		maxZoom: 20,
		mapTypeControl: false,
	  	streetViewControl: false,
	    mapTypeId: google.maps.MapTypeId.TERRAIN
	});
	loadmap();
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>

<table>
	<tr>
		<td><div id="map_canvas"></div></td>
		<td><div id="legend">
			<div>
            <h1>Historic Places in <br /> Eastern Iowa<br></h1>
            <hr />
            <p>- This map shows all places in and around Black Hawk County that are listed on the National Register of Historic Places. Places are represented by blue dots.</p>
			<p>- City limits are color-coded based on the average age of when their historic locations were most significant:</p>

            <div class="colors">
              <span class="one"></span> 1850<br>
              <span class="two"></span> 1851 - 1875<br>
              <span class="three"></span> 1876 - 1900<br>
              <span class="four"></span> 1901 - 1925<br>
            </div>
            <br />
			<p>- Rollover a place to see during what era(s) it was historically significant.</p>
			</div>
			<p>
				<div id="search"><strong>- Search for your hometown:</strong><br />
				<input id="address" type="text"><br />
				<input onClick="zoomtoaddress()" value="Search" type="button">
			</p>
			<hr />
			<p>
			<em>Source: <a href="http://nrhp.focus.nps.gov/natreg/docs/All_Data.html" target="_blank">NRIS</a>
			<br />
			Map by: <a href="http://twitter.com/CourierEssig" target="_blank">Chris Essig</a></em>
		</p>
		</div></div></td>
	</tr>
</table>
</body>
</html>
	## View online: http://wcfcourier.com/app/special/national_register/

	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

	<title>WCFCourier.com - Historic places in Eastern Iowa</title>

	<style>
	body { font-family: Arial, sans-serif; }

	#search {
	font-family: Arial, sans-serif;}

	#map_canvas {
	border: 1px solid #999999;
	height: 565px;
	width:700px;
	}

	#legend {
	width:225px;
	background-color:#FFFFFF;
	padding:10px;
	font-family: Arial, sans-serif;
	font-size:14px;
	border: 1px solid #999999;
	line-height:1.3em;
	}

	#legend h1 {font-size:18px; margin:0 0 4px 0; text-align: center;}
	#legend h2 {font-size:14px; margin:0;}
	#legend h3 {font-size:13px; margin: 10px 0 0 0;}

	#legend .colors {float:left;line-height:23px; width:150px; margin: 10px 0; font-weight: bold;}
	#legend .colors span {height:20px; width:20px; margin-right:5px; display:block; float:left; clear:left;}
	#legend .one {background-color: #2b8cbe; border: 1px solid #000000;}
	#legend .two {background-color: #7bccc4; border: 1px solid #000000;}
	#legend .three {background-color: #bae4bc; border: 1px solid #000000;}
	#legend .four {background-color: #f0f9e8; border: 1px solid #000000;}

	#legend p {clear:both; margin:5px 0 0 0;}

	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

	<!-- INCLUDE THIS SCRIPT REFERENCE FOR MOUSEOVER -->
	<script type="text/javascript" src="fusiontips.js"></script>

	<script type="text/javascript" id="script">
	var map;
	var layer;
	var geocoder = new google.maps.Geocoder();

	function loadmap() {
	layer2 = new google.maps.FusionTablesLayer({
	query: {
	select: 'geometry',
	from: 2814002
	},
	suppressInfoWindows: true
	});
	layer2.setMap(map);

	layer3 = new google.maps.FusionTablesLayer({
	query: {
	select: 'geometry',
	from: 2824727
	},
	suppressInfoWindows: true
	});
	layer3.setMap(map);

	layer = new google.maps.FusionTablesLayer({
	query: {
	select: 'Mappable_location',
	from: 2813443
	},
	suppressInfoWindows: true,
	styles: [{
	markerOptions: {
	iconName: "small_blue"
	}
	}]
	});
	layer.setMap(map);

	// Enables rollover
	layer.enableMapTips({
	select: "'Name', 'Location', 'City', 'Significance'",
	from: 2813443,
	geometryColumn: 'Mappable_location',
	suppressMapTips: false,
	delay: 1,
	tolerance: 8
	});
	}

	function zoomtoaddress() {

	// Use the geocoder to geocode the address
	geocoder.geocode( { 'address': document.getElementById("address").value }, function(results, status) {
	// If the status of the geocode is OK
	if (status == google.maps.GeocoderStatus.OK) {
	// Change the center and zoom of the map
	map.setCenter(results[0].geometry.location);
	map.setZoom(12);
	}
	});
	}

	// Register Enter key press to submit form
	window.onkeypress = enterSubmit;
	function enterSubmit() {
	if(event.keyCode==13) {
	zoomtoaddress();
	}
	}

	function initialize() {
	map = new google.maps.Map(document.getElementById('map_canvas'), {
	center: new google.maps.LatLng(42.5, -92.2),
	zoom: 10,
	minZoom: 8,
	maxZoom: 20,
	mapTypeControl: false,
	streetViewControl: false,
	mapTypeId: google.maps.MapTypeId.TERRAIN
	});
	loadmap();
	}

	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	</head>
	<body>

	<table>
	<tr>
	<td><div id="map_canvas"></div></td>
	<td><div id="legend">
	<div>
	<h1>Historic Places in <br /> Eastern Iowa<br></h1>
	<hr />
	<p>- This map shows all places in and around Black Hawk County that are listed on the National Register of Historic Places. Places are represented by blue dots.</p>
	<p>- City limits are color-coded based on the average age of when their historic locations were most significant:</p>

	<div class="colors">
	<span class="one"></span> 1850<br>
	<span class="two"></span> 1851 - 1875<br>
	<span class="three"></span> 1876 - 1900<br>
	<span class="four"></span> 1901 - 1925<br>
	</div>
	<br />
	<p>- Rollover a place to see during what era(s) it was historically significant.</p>
	</div>
	<p>
	<div id="search"><strong>- Search for your hometown:</strong><br />
	<input id="address" type="text"><br />
	<input onClick="zoomtoaddress()" value="Search" type="button">
	</p>
	<hr />
	<p>
	<em>Source: <a href="http://nrhp.focus.nps.gov/natreg/docs/All_Data.html" target="_blank">NRIS</a>
	<br />
	Map by: <a href="http://twitter.com/CourierEssig" target="_blank">Chris Essig</a></em>
	</p>
	</div></div></td>
	</tr>
	</table>
	</body>
	</html>