Coloring Polygons from data

This example uses additional information in the data file to choose a color. It also provides the option of centering the map at the users' current position using the geolocation features to center the map.

This data file is needed for this example: County border points CSV data file

Try it here as a Google Gadget:

HTML and JavaScript Google Gadget xml

HTML and JavaScript as used on a server:

<html>

<head>

<title>Tennessee Counties</title>

function initialize() {

// choose zoom level, center, map type and create a Map instance (global since var keyword not used)

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

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

// Request the user's location to center the map

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("TNCounties-Carex-Cat.csv");

}

// issue AJAX request

var xhr = false;

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

// Run on server (200) or local machine (0) on Firefox, not Chrome

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

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

}

function dispCSV(csvdoc) {

// Split the lines of the CSV file

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

// Define colors and opacities for the map values

var colors = ["#FFFFFF", "#0000FF", "#0000FF", "#0000FF", "#FFFF00", "#FFFF00", "#FFFF00",

"#FF7F00", "#FF7F00", "#FF0000", "#FF0000"];

var opacities = [0.0, 0.2, 0.4, 0.7, 0.2, 0.4, 0.7, 0.3, 0.6, 0.3, 0.6];

for (j=1;j<x.length;j++)

{

var startll = 6; // begin at the 6th field to process the point information

a=x[j].split(',');

var countyPolygon = [];

// Create the polygon using the county polygon array

var countyCoordinates = [];

for (var i = 0; i < a[3]; i++)

countyCoordinates[i] = new google.maps.LatLng(a[startll+i*2],a[startll+1+i*2]);

var color = colors[a[5]];

var opacity = opacities[a[5]];

countyPolygon[j-1] = new google.maps.Polygon({

path: countyCoordinates,

strokeColor: "#000000",

strokeOpacity: 1.0,

strokeWeight: 1,

fillColor: color,

fillOpacity: opacity

});

// Add the polygon to the map

countyPolygon[j-1].setMap(map);

}

</script>

</head>

</body>

</html>

Google Gadget xml

XML nodes and CDATA are added at the start and end of the file, as is registerLoadHandler (in bold). The HTML tags html, head, and body are removed, as are meta and title. The remaining html (one div tag in this example) is listed as the first line in the CDATA section. The Google Maps JavaScript reference and my JavaScript follow the HTML. The AJAX makeRequest and response functions are changed to us the gadgets AJAX functions(in bold).

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

<Module>

<ModulePrefs title="Google Maps Coloring Polygons from Data Example" height="300"

description="Google Maps Coloring Polygons from Data Example"

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

<Require feature="sharedmap"/>

</ModulePrefs>

<Content type="html">

<![CDATA[

// declare global variables, infowindow must be explicitly declared global

var infowindow;

function initialize() {

// choose zoom level, center, map type and create a Map instance (global since var keyword not used)

var myOptions = {zoom: 7,center: new google.maps.LatLng(35.8, -86.6),mapTypeId: google.maps.MapTypeId.TERRAIN};

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

// Request the user's location to center the map

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

});

}

// issue the AJAX request which will create markers with infowindows

makeRequest("http://sites.google.com/site/stephaniesmullen/files/mapexamples/TNCounties-Carex-Cat.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);

}

function dispCSV(csvdoc) {

// Split the lines of the CSV file

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

// Define colors and opacities for the map values

var colors = ["#FFFFFF", "#0000FF", "#0000FF", "#0000FF", "#FFFF00", "#FFFF00", "#FFFF00",

"#FF7F00", "#FF7F00", "#FF0000", "#FF0000"];

var opacities = [0.0, 0.2, 0.4, 0.7, 0.2, 0.4, 0.7, 0.3, 0.6, 0.3, 0.6];

for (j=1;j<x.length;j++)

{

var startll = 6; // begin at the 6th field to process the point information

a=x[j].split(',');

var countyPolygon = [];

// Create the polygon using the county polygon array

var countyCoordinates = [];

for (var i = 0; i < a[3]; i++)

countyCoordinates[i] = new google.maps.LatLng(a[startll+i*2],a[startll+1+i*2]);

var color = colors[a[5]];

var opacity = opacities[a[5]];

countyPolygon[j-1] = new google.maps.Polygon({

path: countyCoordinates,

strokeColor: "#000000",

strokeOpacity: 1.0,

strokeWeight: 1,

fillColor: color,

fillOpacity: opacity

});

// Add the polygon to the map

countyPolygon[j-1].setMap(map);

}

gadgets.util.registerOnLoadHandler(initialize);

</script>

]]>

</Content>

</Module>