Skip to content

Instantly share code, notes, and snippets.

@csessig86 csessig86/IA_poverty
Created Dec 14, 2011

Embed
What would you like to do?
Poverty rates across IA map - Uses Google's mouseover effect to change polygon colors
<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>
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.