csessig86/IA_poverty

## 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>