Census Data Map

This example combines markers, infoWindows, and a HTML5 legend.

Try it here as a Google Gadget:

The data for this map is available here

Detailed instructions to acquire the US Census data and create this map are found in the Census Data Acquisition section

HTML and JavaScript Google Gadget xml

HTML and JavaScript for a server. This data file is needed for this example.

<html>

<head>

<title>Tennessee Alzheimer's Deaths</title>

// Authors: Eric Reinsmidt & Stephanie Smullen

// Description: Creates a map using Google V3 Maps API and US Census data

function initialize() {

var myOptions = {zoom: 7,center: new google.maps.LatLng(36.4,-86.0),mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false,

navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL } };

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

legend();

makeRequest("alzcounties.csv");

google.maps.event.addListener(map, 'click', function() {

infowindow.close();

map.setCenter(center); });

}

var xhr = false;

// issue AJAX request

function makeRequest(url) {

if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }

else if (window.ActiveXObject) {xhr = new ActiveXObject("Microsoft.XMLHTTP");}

if (xhr) {

xhr.onreadystatechange = response;

xhr.open("GET", url, true);

xhr.send(null);

}

else document.write("ERROR - could not create XMLHttpRequest");

}

// process AJAX request when ready, expecting an CSV document

function response() {

var xmldoc = '';

if (xhr.readyState == 4) {

if (xhr.status == 200 || xhr.status == 0) {csvdoc = xhr.responseText; dispCSV(csvdoc); }

else document.write("ERROR - " + xhr.status);

}

function dispCSV(csvdoc) {

var colors = [ "rgba( 34,102, 51,0.8)", "rgba( 73,134, 88,0.8)", "rgba(118,168,130,0.8)",

"rgba(167,207,180,0.8)", "rgba(219,245,232,0.8)"];

var lower = [ 0, 18, 30.2, 39.5, 48];

x = csvdoc.split("\n");

for (i=0;i<x.length;i++) {

a=x[i].split('|');

var countyPolygon = [];

var countyLineCoords = [];

for (j=0; j<5; j++)

if (a[2]>lower[j]) color=colors[j];

for (var j = 0; j < a[3]-1; j++)

countyLineCoords[j] = new google.maps.LatLng(a[6+j*2],a[7+j*2]);

countyPolygon[i] = new google.maps.Polygon({title: a[0], path: countyLineCoords,

strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: .5,

fillColor: color, fillOpacity: 0.75, zIndex: 0 });

countyPolygon[i].setMap(map);

countyPolygon[i].set("countyName", a[0]);

countyPolygon[i].set("numDeaths", a[1]);

countyPolygon[i].set("deathRate", a[2]);

google.maps.event.addListener(countyPolygon[i], 'click', openInfowindow);

infowindow = new google.maps.InfoWindow();

}

return;

}

function openInfowindow(event) {

var contentString = "<b>County: <\/b>" + this.get("countyName") + "<br />";

contentString += "<b>Number of Deaths: <\/b> " + this.get("numDeaths") + "<br />";

contentString += "<b>Death Rate per 100K: <\/b> " + this.get("deathRate") + "<br />";

infowindow.setContent(contentString);

infowindow.setPosition(event.latLng);

infowindow.open(map);

}

// Description: Creates a legend using HTML5 <canvas>

function legend() {

var colors = [ "rgba( 34,102, 51,0.8)", "rgba( 73,134, 88,0.8)", "rgba(118,168,130,0.8)",

"rgba(167,207,180,0.8)", "rgba(219,245,232,0.8)"];

var text = ["48.1 - 57.4","39.6 - 48.0","30.3 - 39.5","18.1 - 30.2","3.0 - 18.0"];

ctx = document.getElementById("canvas_container").getContext("2d");

//text header above rects//

ctx.textAlign = 'center';

ctx.font = '15pt Verdana';

ctx.fillText('Tennessee Counties', 265, 25);

ctx.font = '11pt Verdana';

ctx.fillText('Rate (3-year age adjusted)', 265, 45);

ctx.font = '8pt Verdana';

for (i=0; i<5; i++) {

ctx.fillStyle = colors[i];

ctx.fillRect(40+i*100, 65, 65, 35);

ctx.strokeRect(40+i*100, 65, 65, 35, 2);

ctx.fillStyle = "#000000";

ctx.fillText(text[i], 72.5+i*100, 115);

}

</script>

</head>

<p><strong>NUMBER OF DEATHS FROM ALZHEIMER'S DISEASE WITH THREE YEAR AGE ADJUSTED* RATES PER 100,000 POPULATION, TENNESSEE RESIDENT DATA, 2006-2008</strong></p>

</div>

</div>

<p class="center">Click on a county to see more information.</p>

<canvas id="canvas_container" width="530" height="125">Your browser does not support the canvas tag. Try Google <a href="http://google.com/chrome">Chrome</a> or Mozilla <a href="http://www.mozilla.com">Firefox</a>.</canvas>

</div>

<p>* Adjusted to age distribution of 2000 standard population of the United States, as used by the National Center for Health Statistics. Source: Tennessee Department of Health, Division of Health Statistics.</p>

<a href="http://sites.google.com/site/stephaniesmullen/files/mapexamples/R15367-ThreeYearAgeAdjustedAlzheimersDeaths-2006-2008.pdf" target="_blank">view data in pdf format</a><br />

<a href="https://sites.google.com/site/stephaniesmullen/google-map-examples/census-data-acquisition">map creation instructions</a></p>

</div>

</body>

</html>

Google Gadget xml

The functions makeRequest and response are replaced with the Google Gadgets AJAX interface. The functions dispCSV, drawLegend and createList have been omitted. The style sheet and JavaScript were included as they were in the Simple Tree Menu example.

<?xml version="1.0" encoding="UTF-8" ?>

<ModulePrefs title="Map with HTML5 legend and Simple Tree Menu" height="300"

description="Map with HTML5 legend and Simple Tree Menu"

author="Stephanie Smullen" author_email="stephanie.smullen@gmail.com">

</ModulePrefs>

<![CDATA[

</div>

</div>

// .... stylesheet and JavaScript as in Simple Tree Menu ...

// declare global variables

function initialize() {

var myOptions = {zoom: 6,center: new google.maps.LatLng(35.0, -87.5),mapTypeId: google.maps.MapTypeId.TERRAIN};

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

if(navigator.geolocation) {

browserSupportFlag = true;

navigator.geolocation.getCurrentPosition(function(position) {

map.setCenter(new google.maps.LatLng(position.coords.latitude,position.coords.longitude));

}, function() {

handleNoGeolocation(browserSupportFlag);

});

}

makeRequest("http://sites.google.com/site/stephaniesmullen/files/mapexamples/SECounties-Entries.csv");

}

function makeRequest (url) {

var params = {};

params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;

gadgets.io.makeRequest(url, response, params);

}

function response (obj) {

dispCSV(obj.text);

}

// ..... dispCSV, drawLegend and CreateList as before ....

gadgets.util.registerOnLoadHandler(initialize);

</script>

]]>

</Content>

</Module>