csessig86 · December 14, 2011 02:59
diff --git a/IA_poverty b/IA_poverty
 <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 - Poverty in Iowa</title> 

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

 #search {
  	font-family: Arial, sans-serif; 
 	width: 610px; 
 	padding-left: 50px; }

 #map_canvas { height: 90%; width:100%; }
  
 #legend {
    position: absolute;
    top:63px;
    right:13px;
    width:225px;
    background-color:#FFFFFF;
    padding:10px;
    font-family: Arial, sans-serif;
    font-size:13px;
    border: 1px solid #999999;
    line-height:1.3em;
 	opacity: .85; 
 }

 #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:20px; width:150px; margin: 10px 0; font-weight: bold;}
 #legend .colors span {height:20px; width:20px; margin-right:5px; display:block; float:left; clear:left; opacity: .75;}
 #legend .one {background-color: #1b9e77;}
 #legend .two {background-color: #d95f02;}
 #legend .three {background-color: #7570b3;}
 #legend .four {background-color: #e7298a;}

 #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="http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/src/fusiontips_compiled.js"></script>
 <script type="text/javascript" id="script">
 var map;
 var layer;
 var tableid = 2415095;
 var geocoder = new google.maps.Geocoder();

 function map() {
 	map = new google.maps.Map(document.getElementById('map_canvas'), {
 		center: new google.maps.LatLng(42.02688415249635, -92.94073664453128),
 		zoom: 8,
 		minZoom: 6,
 		maxZoom: 13,
 		mapTypeControl: false,
 		streetViewControl: false,
 		mapTypeId: google.maps.MapTypeId.TERRAIN
 	});
 	layer = new google.maps.FusionTablesLayer({
 		query: {
 			select: 'geometry',
 			from: tableid
 		},
 		suppressInfoWindows: true
 	});
 	layer.setMap(map);
 	//map tips
 	layer.enableMapTips({
 		select: "'Number', 'Tract', 'County', 'Population for whom poverty status is determined - Total', 'Population for whom poverty status is determined - Below poverty level', 'Population for whom poverty status is determined - Percent below poverty level', 'One race - White', 'One race - Black', 'Other', 'Two or more races'", // list of columns to query, typially need only one column.
 		from: tableid, // fusion table name
 		geometryColumn: 'geometry', // geometry column name
 		suppressMapTips: true, // optional, whether to show map tips. default false
 		delay: 1, // milliseconds mouse pause before send a server query. default 300.
 		tolerance: 6 // tolerance in pixel around mouse. default is 6.
 		});
 	
 	//here's the pseudo-hover
 	google.maps.event.addListener(layer, 'mouseover', function(fEvent) {
 var row = fEvent.row;
 var NumVal = row['Number'].value;
 	layer.setOptions({
 		query: {
 			select: 'geometry',
 			from: tableid
 		},
 		suppressInfoWindows: true,
 		styles: [{
 			where: "'Number' = " + NumVal,
 			polygonOptions: {
 				fillColor: "#4D4D4D",
 				fillOpacity: 0.6
 			}
 		}]
 	});
 $('#info').html(
 	'<h1 align="center">' + row['Tract'].value + '</h1>' + 
 	'<h2 align="center">' + row['County'].value + '</h2>' +
 	'<hr />' +
 	'<p><strong>Population</strong>: ' + row['Population for whom poverty status is determined - Total'].value + '<br />' +
 	'- <strong>Below poverty level</strong>: ' + row['Population for whom poverty status is determined - Below poverty level'].value + '<br />' +
 	'- <strong>Percent</strong>: ' + row['Population for whom poverty status is determined - Percent below poverty level'].value + '%' + '</p>' +
 	'<p><strong>Demographics</strong>' + '<br />' +
 	'- <strong>White</strong>: ' + row['One race - White'].value + '<br />' +
 	'- <strong>Black</strong>: ' + row['One race - Black'].value + '<br />' +
 	'- <strong>Other</strong>: ' + row['Other'].value + '<br />' +
 	'- <strong>Two or more races</strong>: ' + row['Two or more races'].value + '</p>');
 });
 	//mouseout
 	google.maps.event.addListener(layer, 'mouseout', function(fevt) {
 		$("#info").html('<h2 align="center">Move your mouse over the map for more details:</h2>' +
 		'<br />' +
 		'<br />' +
 		'<br />');
 	});
 }
 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(10);
    } 
  });
 }

 // Register Enter key press to submit form
 window.onkeypress = enterSubmit;
 function enterSubmit() {
  if(event.keyCode==13) {
    zoomtoaddress();
  }
 }
 function initialize() {
    map();
 }
 google.maps.event.addDomListener(window, 'load', initialize);
 </script> 
 </head> 
 <body>
 <script type='text/javascript' src='http://stats.townnews.com/shared-content/stats/common/tracker.js'></script>
 <script type='text/javascript'>
 <!--
 if (typeof(TNStats_Tracker) !== 'undefined' && typeof(TNTracker) === 'undefined') { TNTracker = new TNStats_Tracker('wcfcourier.com'); TNTracker.setTrackerDomain('stats.townnews.com'); TNTracker.trackPageView(); }
 // -->
 </script>
 	<table border="0" cellspacing="0" cellpadding="0" style="height: 50px;" >
 		<tr>
 			<td><a href="http://wcfcourier.com"><img src="http://wcfcourier.com/app/special/taxes/WCF_header.jpg" width="250px" height="41px" style="border: 0;" /></a></td>
 			<td>
 				<div id="search" height="41px"><strong>Search for your hometown:</strong>
 				<input id="address" type="text">
 				<input onClick="zoomtoaddress()" value="Search" type="button">
 			</td>
 		</tr>
 	</table>

 <div id="map_canvas"></div>
 <div id="legend">
            
            <h1>Poverty in Iowa<br></h1>
            <hr />
            <p>- New data released by the U.S. Census shows poverty is dispersed across the state of Iowa.
            <br />
            - This map is broken down into Census tracts and is color-coded based on the percentage of the population that fall below the poverty level:</p>
            
            <div class="colors">
              <span class="one"></span> 0 - 8%<br>
              <span class="two"></span> 8 - 20%<br>
              <span class="three"></span> 20 - 40%<br>
              <span class="four"></span> 40 - 100%<br>
            </div>
            <br />
        <div>
 			<p>
 			<div id="info">
 				<h2 align="center">Move your mouse over the map for more details:</h2>
 				<br />
 				<br />
 				<br />
 			</div>
 			</p>
 			<hr />
 		<p>
 			<em>Source: <a href="http://factfinder2.census.gov/faces/nav/jsf/pages/searchresults.xhtml?refresh=t" target="_blank">U.S. Census Bureau</a>
 			<br />
 			Map by: <a href="http://twitter.com/CourierEssig" target="_blank">Chris Essig</a></em>
 		</p>
 	</div>
 </div>
 </body> 
 </html>
	<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 - Poverty in Iowa</title>

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

	#search {
	font-family: Arial, sans-serif;
	width: 610px;
	padding-left: 50px; }

	#map_canvas { height: 90%; width:100%; }

	#legend {
	position: absolute;
	top:63px;
	right:13px;
	width:225px;
	background-color:#FFFFFF;
	padding:10px;
	font-family: Arial, sans-serif;
	font-size:13px;
	border: 1px solid #999999;
	line-height:1.3em;
	opacity: .85;
	}

	#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:20px; width:150px; margin: 10px 0; font-weight: bold;}
	#legend .colors span {height:20px; width:20px; margin-right:5px; display:block; float:left; clear:left; opacity: .75;}
	#legend .one {background-color: #1b9e77;}
	#legend .two {background-color: #d95f02;}
	#legend .three {background-color: #7570b3;}
	#legend .four {background-color: #e7298a;}

	#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="http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/src/fusiontips_compiled.js"></script>
	<script type="text/javascript" id="script">
	var map;
	var layer;
	var tableid = 2415095;
	var geocoder = new google.maps.Geocoder();

	function map() {
	map = new google.maps.Map(document.getElementById('map_canvas'), {
	center: new google.maps.LatLng(42.02688415249635, -92.94073664453128),
	zoom: 8,
	minZoom: 6,
	maxZoom: 13,
	mapTypeControl: false,
	streetViewControl: false,
	mapTypeId: google.maps.MapTypeId.TERRAIN
	});
	layer = new google.maps.FusionTablesLayer({
	query: {
	select: 'geometry',
	from: tableid
	},
	suppressInfoWindows: true
	});
	layer.setMap(map);
	//map tips
	layer.enableMapTips({
	select: "'Number', 'Tract', 'County', 'Population for whom poverty status is determined - Total', 'Population for whom poverty status is determined - Below poverty level', 'Population for whom poverty status is determined - Percent below poverty level', 'One race - White', 'One race - Black', 'Other', 'Two or more races'", // list of columns to query, typially need only one column.
	from: tableid, // fusion table name
	geometryColumn: 'geometry', // geometry column name
	suppressMapTips: true, // optional, whether to show map tips. default false
	delay: 1, // milliseconds mouse pause before send a server query. default 300.
	tolerance: 6 // tolerance in pixel around mouse. default is 6.
	});

	//here's the pseudo-hover
	google.maps.event.addListener(layer, 'mouseover', function(fEvent) {
	var row = fEvent.row;
	var NumVal = row['Number'].value;
	layer.setOptions({
	query: {
	select: 'geometry',
	from: tableid
	},
	suppressInfoWindows: true,
	styles: [{
	where: "'Number' = " + NumVal,
	polygonOptions: {
	fillColor: "#4D4D4D",
	fillOpacity: 0.6
	}
	}]
	});
	$('#info').html(
	'<h1 align="center">' + row['Tract'].value + '</h1>' +
	'<h2 align="center">' + row['County'].value + '</h2>' +
	'<hr />' +
	'<p><strong>Population</strong>: ' + row['Population for whom poverty status is determined - Total'].value + '<br />' +
	'- <strong>Below poverty level</strong>: ' + row['Population for whom poverty status is determined - Below poverty level'].value + '<br />' +
	'- <strong>Percent</strong>: ' + row['Population for whom poverty status is determined - Percent below poverty level'].value + '%' + '</p>' +
	'<p><strong>Demographics</strong>' + '<br />' +
	'- <strong>White</strong>: ' + row['One race - White'].value + '<br />' +
	'- <strong>Black</strong>: ' + row['One race - Black'].value + '<br />' +
	'- <strong>Other</strong>: ' + row['Other'].value + '<br />' +
	'- <strong>Two or more races</strong>: ' + row['Two or more races'].value + '</p>');
	});
	//mouseout
	google.maps.event.addListener(layer, 'mouseout', function(fevt) {
	$("#info").html('<h2 align="center">Move your mouse over the map for more details:</h2>' +
	'<br />' +
	'<br />' +
	'<br />');
	});
	}
	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(10);
	}
	});
	}

	// Register Enter key press to submit form
	window.onkeypress = enterSubmit;
	function enterSubmit() {
	if(event.keyCode==13) {
	zoomtoaddress();
	}
	}
	function initialize() {
	map();
	}
	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	</head>
	<body>
	<script type='text/javascript' src='http://stats.townnews.com/shared-content/stats/common/tracker.js'></script>
	<script type='text/javascript'>
	<!--
	if (typeof(TNStats_Tracker) !== 'undefined' && typeof(TNTracker) === 'undefined') { TNTracker = new TNStats_Tracker('wcfcourier.com'); TNTracker.setTrackerDomain('stats.townnews.com'); TNTracker.trackPageView(); }
	// -->
	</script>
	<table border="0" cellspacing="0" cellpadding="0" style="height: 50px;" >
	<tr>
	<td><a href="http://wcfcourier.com"><img src="http://wcfcourier.com/app/special/taxes/WCF_header.jpg" width="250px" height="41px" style="border: 0;" /></a></td>
	<td>
	<div id="search" height="41px"><strong>Search for your hometown:</strong>
	<input id="address" type="text">
	<input onClick="zoomtoaddress()" value="Search" type="button">
	</td>
	</tr>
	</table>

	<div id="map_canvas"></div>
	<div id="legend">

	<h1>Poverty in Iowa<br></h1>
	<hr />
	<p>- New data released by the U.S. Census shows poverty is dispersed across the state of Iowa.
	<br />
	- This map is broken down into Census tracts and is color-coded based on the percentage of the population that fall below the poverty level:</p>

	<div class="colors">
	<span class="one"></span> 0 - 8%<br>
	<span class="two"></span> 8 - 20%<br>
	<span class="three"></span> 20 - 40%<br>
	<span class="four"></span> 40 - 100%<br>
	</div>
	<br />
	<div>
	<p>
	<div id="info">
	<h2 align="center">Move your mouse over the map for more details:</h2>
	<br />
	<br />
	<br />
	</div>
	</p>
	<hr />
	<p>
	<em>Source: <a href="http://factfinder2.census.gov/faces/nav/jsf/pages/searchresults.xhtml?refresh=t" target="_blank">U.S. Census Bureau</a>
	<br />
	Map by: <a href="http://twitter.com/CourierEssig" target="_blank">Chris Essig</a></em>
	</p>
	</div>
	</div>
	</body>
	</html>