Embedded Files
This example uses additional information in the data file to choose a color.The legend explains the meaning of each 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>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Distribution of Herbarium entries for Carex in Tennessee Counties</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript">
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);
});
}
// Read the county points file and process it
makeRequest("TNCounties-Carex-Cat.csv");
// Draw the legend using HTML5 Canvas
drawLegend();
}
// 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);
}
}
function drawLegend() {
// Define colors and labels for the legend
// The labels are constants here -- but could be determined from a data file
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"];
// Get the area for the canvas and the 2D context
var ctx = document.getElementById("canvas").getContext("2d");
// Set the starting x and y values
var x=10;
var y=10;
// Draw 10 rectangles and labels per "line" of legend
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>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="header" style="width:100%; height; 10%;">
<canvas id="canvas" width="820" height="40"></canvas>
</div>
<div id="map_canvas" style="width: 100%; height: 100%; float: left"></div>
</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 Map and Legend" height="300"
description="Google Map and Legend"
author="Stephanie Smullen" author_email="stephanie.smullen@gmail.com">
<Require feature="sharedmap"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<div id="header" style="width:100%; height; 10%;">
<canvas id="canvas" width="820" height="40"></canvas>
</div>
<div id="map_canvas" style="width: 100%; height: 100%; float: left"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// 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");
// Draw the legend using HTML5 Canvas
drawLegend();
}
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);
}
}
function drawLegend() {
// Define colors and labels for the legend
// The labels are constants here -- but could be determined from a data file
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"];
// Get the area for the canvas and the 2D context
var ctx = document.getElementById("canvas").getContext("2d");
// Set the starting x and y values
var x=10;
var y=10;
// Draw 10 rectangles and labels per "line" of legend
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);
}
}
}
gadgets.util.registerOnLoadHandler(initialize);
</script>
]]>
</Content>
</Module>
Page updated
Google Sites
Report abuse