Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Map of historic places in Eastern Iowa
## 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.