Simple Census Example

This example combines markers, infoWindows, and a HTML5 legend. Using US Census data.

Try it here as a Google Gadget:

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. The data files needed for this example are in this zip file.

<html>

<head>

<title>Arizona Counties -- Example</title>

html {height : 99%;}

body.body {height : 99%;margin : 0;padding : 0;}

div.header {text-align : center;width : 80%;border : 0;margin-left : auto;margin-right : auto;}

div.map {width : 50%;height : 50%;margin-left : auto;margin-right : auto;}

div.footer {width : 80%;height : 10%;margin-left : auto;margin-right : auto;text-align : center;border : 0;}

</style>

// Authors: Eric Reinsmidt & Stephanie Smullen

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

function initialize() {

var myOptions = {zoom: 6,center: new google.maps.LatLng(34.5,-111.7),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("arizona_dataset.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 separator = '|';

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

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

a=x[i].split(separator);

var countyPolygon = [];

var countyLineCoords = [];

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

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

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

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

fillColor: '#00aaff', fillOpacity: 0.25, zIndex: 0});

countyPolygon[i].setMap(map);

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

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

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>Fips: </b>" + this.get("fips");

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('Arizona 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>Example Map</strong></p>

</div>

</div><br />

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

</body>

</html>

Google Gadget xml

The functions makeRequest and response are replaced with the Google Gadgets AJAX interface. The functions dispCSV, legend and openInfowindow have been omitted.

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

<Module>

<ModulePrefs title="Simple Census Example" height="300"

description="Simple Census Example"

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

<Require feature="sharedmap"/>

</ModulePrefs>

<Content type="html">

<![CDATA[

<p><strong>Example Map</strong></p>

</div>

</div><br />

<canvas id="canvas_container" width="530" height="250">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>

html {height : 99%;}

body.body {height : 99%;margin : 0;padding : 0;}

div.header {text-align : center;width : 80%;border : 0;margin-left : auto;margin-right : auto;}

div.map {width : 50%;height : 50%;margin-left : auto;margin-right : auto;}

div.footer {width : 80%;height : 10%;margin-left : auto;margin-right : auto;text-align : center;border : 0;}

</style>

// Authors: Eric Reinsmidt & Stephanie Smullen

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

function initialize() {

var myOptions = {zoom: 6,center: new google.maps.LatLng(34.5,-111.7),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("https://sites.google.com/site/stephaniesmullen/files/mapexamples/arizona_dataset.csv");

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

infowindow.close();

map.setCenter(center); });

}

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, legend and openInfowindow as before ....

gadgets.util.registerOnLoadHandler(initialize);

</script>

]]>

</Content>

</Module>