Plant Data Map

This example combines polygons with the HTML5 legend and Simple Tree Menu -- WARNING!! it takes a while to load this map

Try it here as a Google Gadget:

HTML and JavaScript Google Gadget xml

HTML and JavaScript for a server. In addition to the JavaScript, css and png files from the Simple Tree Menu example, this data file is needed.

<html>

<head>

<title>Southeastern US Counties - Counts of Herbarium data entries</title>

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("SECounties-Entries.csv");

}

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

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

drawLegend();

createList(x);

// Draw the counties

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;

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

var countyPolygon = [];

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

});

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

}

// Create the dynamic tree display

function createList(x) {

document.getElementById("tree").style.marginLeft='-35pt';

var info="";

// skip first record

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

var state = a[0];

info += "<li>"+a[0].replace(/"/g,"")+"\n<ul>\n";

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

{

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

if (state != a[0]) {

state = a[0];

info += "</ul>\n<li>"+a[0].replace(/"/g,"")+"\n<ul>\n";

}

// county

info+="<li>"+ a[1].replace(/"/g,"") + "\n<ul>\n";

info+="<li>Number of entries = "+a[4].replace(/"/g,"")+"</li>\n";

info+="<li>Color category = "+a[5].replace(/"/g,"")+"</li>\n";

info+="<li>Number of county points = "+a[3].replace(/"/g,"")+"</li>\n</ul>\n</li>\n";

}

info+="</ul>\n</li>\n"; //</ul>";

var tab = document.getElementById("tree");

tab.innerHTML = info;

ddtreemenu.createTree("tree", false);

ddtreemenu.flatten('tree', 'contract');

}

function drawLegend() {

// Draw the HTML5 legend

var colors = [ "rgba(255,255,255,0.0)", "rgba(0,0,255,0.2)", "rgba(0,0,255,0.4)", "rgba(0,0,255,0.7)",

"rgba(255,255,0,0.2)", "rgba(255,255,0,0.4)", "rgba(255,255,0,0.7)",

"rgba(255,128,0,0.3)", "rgba(255,128,0,0.6)", "rgba(255,0,0,0.3)", "rgba(255,0,0,0.6)"];

var labels =["none"," 1- 147", " 148- 264", " 265- 411", " 413- 548", " 549- 676", " 680- 839",

" 841- 1018","1019- 1234","1235- 1705","1711-16842"];

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var x=10;

var y=10;

for (var i=1; i<colors.length; i+=10) {

for (var j=0;j<10;j++) {

ctx.fillStyle = colors[i+j];

ctx.fillRect (x+80*j,y+4*i,25, 15 );

ctx.font="8pt Arial";

ctx.fillStyle= "rgb(0,0,0)";

ctx.fillText (labels[i+j],x+80*j+25, y+4*i+12);

}

</script>

</head>

</div>

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

Page updated

Google Sites

Report abuse