Get Features in heatmap openlayers3 - openlayers-3

I want to get all features when I click on heat map in openlayers 3...It is possible or not? How to count the features in heat map and give heat map total count features label? thanks


Openlayers3 can do this easily,You can use getFeatures() to get all the features.
var features = heatlayer.getSource().getFeatures()
alert('count: '+features.length);
This method returns an array containing all the features,so you can use length to count.
<!DOCTYPE html>
<html>
<head>
<title>heatlayer count example</title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<style>
.map {
max-width: 566px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var heatlayer = new ol.layer.Heatmap({
source: new ol.source.Vector(),
blur: parseInt(14),
radius: parseInt(8)
});
var adddata = [[104.807799,30.232233],[106.803599,31.233225]];
//addfeature
for(var i = 0;i < adddata.length ; i++){
var feature = new ol.Feature({
geometry:new ol.geom.Point([adddata[i][0],adddata[i][1]])
});
heatlayer.getSource().addFeature(feature);
}
var map = new ol.Map({
layers: [raster,heatlayer],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
projection: 'EPSG:4326',
center:[104.07, 30.7],
zoom: 2
})
});
map.on('click', function(event){
var features = heatlayer.getSource().getFeatures()
alert('count: '+features.length);
});
</script>
</body>
</html>

Related

Openlayers 3 WMTS

I am having an issue where I am trying to load a WMTS feed using Openlayers and seem not to be getting good results. For ArcGis services this seems to go through but not GeoServer's WMTS services. The code is as shown below. I keep getting a javascript error
TypeError: Argument 2 of CanvasRenderingContext2D.putImageData is not a finite floating-point value.
The code I am using is shown below. Regardless of changing the projection the error remains the same. Please advise. Raw Gist here
<!DOCTYPE html>
<html>
<head>
<title>WMTS example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.8.2/build/ol.js"></script>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
</div>
<script>
var projection = ol.proj.get('EPSG:4326');
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(21);
var matrixIds = new Array(21);
for (var i=0; i<21; ++i) {
matrixIds[i] = "EPSG:4326:" + i;
}
var attribution = new ol.Attribution({
html: 'Tiles © <a href="http://services.arcgisonline.com/arcgis/rest/' +
'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>'
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
opacity: 0.7
}),
new ol.layer.Tile({
opacity: 0.7,
source: new ol.source.WMTS({
attributions: [attribution],
url: 'http://suite.opengeo.org/geoserver/gwc/service/wmts',
layer: 'opengeo:countries',
matrixSet: 'ESPG:4326',
format: 'image/png',
style : 'default',
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
wrapX: true
})
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [-13677832, 5213272],
//center: [-11158582, 4813697],
zoom: 1
})
});
</script>
</body>
</html>

Your resolutions array is just filled with undefineds, right? You should fill it with you desired resolutions.

You should to init your resolution array like this:
for (var z = 0; z < 21; ++z) {
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = "EPSG:4326:" + z;;
}
Did you set map's projection to ol.proj.get('EPSG:4326')?
var view = new ol.View({
center: [0, 0],
zoom: 1,
projection: ol.proj.get('EPSG:4326')
});

OpenLayers 3 WMS Layer - Misplaced tiles in EPSG:2180 projection

I'm trying to display map of Poland using OpenLayers 3. I need it to be in projection EPSG:2180. Ewerything is ok until I switch the projection.
This works fine:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://openlayers.org/en/v3.7.0/build/ol.js" type="text/javascript"></script>
<script src="proj4js/proj4-src.js" type="text/javascript"></script>
<script>
proj4.defs('EPSG:2180', "+proj=tmerc +lat_0=0 +lon_0=19 +k=0.9993 +x_0=500000 +y_0=-5300000 +ellps=GRS80 +units=m +no_defs");
function init()
{
var p = ol.proj.get('EPSG:3857');
var mapTiles = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://mapy.geoportal.gov.pl/wss/service/img/guest/ORTO/MapServer/WMSServer',
params: {
'LAYERS': 'Raster'
}
}),
isBaseLayer: true,
projection: p
})
],
view: new ol.View({
center: ol.proj.transform([19, 52], 'EPSG:4326', 'EPSG:3857'),
zoom: 6,
projection: p
})
});
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
When i switch projection to EPSG:2180 tiles are misplaced.
Code with EPSG:2180
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://openlayers.org/en/v3.7.0/build/ol.js" type="text/javascript"></script>
<script src="proj4js/proj4-src.js" type="text/javascript"></script>
<script>
proj4.defs('EPSG:2180', "+proj=tmerc +lat_0=0 +lon_0=19 +k=0.9993 +x_0=500000 +y_0=-5300000 +ellps=GRS80 +units=m +no_defs");
function init()
{
var p = ol.proj.get('EPSG:2180');
var mapTiles = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://mapy.geoportal.gov.pl/wss/service/img/guest/ORTO/MapServer/WMSServer',
params: {
'LAYERS': 'Raster',
'CRS': 'EPSG:2180'
}
}),
isBaseLayer: true,
projection: p
})
],
view: new ol.View({
center: ol.proj.transform([19, 52], 'EPSG:4326', 'EPSG:2180'),
zoom: 6,
projection: p
})
});
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
Any idea what is the problem?
https://jsfiddle.net/b2L6qppd/

I have add one element - it prevent of axes problem.
params: {
'LAYERS': 'Raster',
'CRS': 'EPSG:2180',
'VERSION': '1.1.1'
}
try with this: jsfiddle.net/b2L6qppd/2/

openlayer geometric points won't show

I am new to openlayers and a beginner to javascript, but I have tried for 3 days and nights now. My code seems okay but there is something I am missing out and just can’t figure it out
I have this problem, I can’t find my geometric points on my map.
My code goes thus:
//html
<!doctype html>
<head>
<title> Me OpenStreetMap </title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/ol3/css/samples.css" type="text/css" />
</head>
<body>
<div id="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
// style for geometric layer
var meStyle = new ol.style.Circle({
radius: 20,
fill: new ol.style.Fill({
color: '#ff9900',
opacity: 1
}),
stroke: new ol.style.Stroke({
color: '#ffcc00',
opacity: 1
})
});
// geometric layer
var geoLayer = new ol.layer.Vector({
source : new ol.source.Vector({
projection : 'EPSG:3857',
url : '../data/json.json',
format: new ol.format.GeoJSON(),
style: meStyle
})
});
// create layer
var osmLayer = new ol.layer.Tile({
source : new ol.source.OSM()
});
// create view
var yaounde = new ol.proj.transform([11.5653, 3.86617],
'EPSG:4326', 'EPSG:3857'
);
var view = new ol.View({
center: yaounde,
zoom: 15
});
// create map
var map = new ol.Map({
target: 'map'
});
map.addLayer(osmLayer, geoLayer);
map.setView(view);
</script>
</body>
</html>
//geojson
{"type":"FeatureCollection",
"features":
[
{"type":"Feature","properties":{"Name":"","Description":""},"geometry":{"type":"Point","coordinates":[0.0,0.0]}},
{"type":"Feature","properties":{"Name":"1","Description":""},"geometry":{"type":"Point","coordinates":[11.50728,3.87471,0.0]}},
{"type":"Feature","properties":{"Name":"2","Description":""},"geometry":{"type":"Point","coordinates":[11.5072,3.8759,0.0]}},
{"type":"Feature","properties":{"Name":"3","Description":""},"geometry":{"type":"Point","coordinates":[11.5032,3.87556,0.0]}},
{"type":"Feature","properties":{"Name":"4","Description":""},"geometry":{"type":"Point","coordinates":[11.50291,3.87552,0.0]}},
{"type":"Feature","properties":{"Name":"5","Description":""},"geometry":{"type":"Point","coordinates":[11.50278,3.87573,0.0]}},
{"type":"Feature","properties":{"Name":"6","Description":""},"geometry":{"type":"Point","coordinates":[11.50316,3.87621,0.0]}},
{"type":"Feature","properties":{"Name":"7","Description":""},"geometry":{"type":"Point","coordinates":[11.50347,3.87611,0.0]}},
{"type":"Feature","properties":{"Name":"8","Description":""},"geometry":{"type":"Point","coordinates":[11.50314,3.8763,0.0]}},
{"type":"Feature","properties":{"Name":"9","Description":""},"geometry":{"type":"Point","coordinates":[11.50325,3.87652,0.0]}},
{"type":"Feature","properties":{"Name":"10","Description":""},"geometry":{"type":"Point","coordinates":[11.50356,3.87558,0.0]}},
{"type":"Feature","properties":{"Name":"11","Description":""},"geometry":{"type":"Point","coordinates":[11.5033,3.87564,0.0]}},
{"type":"Feature","properties":{"Name":"12","Description":""},"geometry":{"type":"Point","coordinates":[11.50397,3.87586,0.0]}},
{"type":"Feature","properties":{"Name":"13","Description":""},"geometry":{"type":"Point","coordinates":[11.50299,3.87641,0.0]}},
{"type":"Feature","properties":{"Name":"14","Description":""},"geometry":{"type":"Point","coordinates":[11.50279,3.8771,0.0]}},
{"type":"Feature","properties":{"Name":"15","Description":""},"geometry":{"type":"Point","coordinates":[11.50269,3.87723,0.0]}},
{"type":"Feature","properties":{"Name":"16","Description":""},"geometry":{"type":"Point","coordinates":[11.50258,3.87722,0.0]}},
{"type":"Feature","properties":{"Name":"17","Description":""},"geometry":{"type":"Point","coordinates":[11.49122,3.8738,0.0]}},
{"type":"Feature","properties":{"Name":"18","Description":""},"geometry":{"type":"Point","coordinates":[11.48567,3.87447,0.0]}},
{"type":"Feature","properties":{"Name":"19","Description":""},"geometry":{"type":"Point","coordinates":[11.48548,3.88107,0.0]}},
{"type":"Feature","properties":{"Name":"20","Description":""},"geometry":{"type":"Point","coordinates":[11.48526,3.8812,0.0]}},
{"type":"Feature","properties":{"Name":"21","Description":""},"geometry":{"type":"Point","coordinates":[11.48614,3.88044,0.0]}},
{"type":"Feature","properties":{"Name":"22","Description":""},"geometry":{"type":"Point","coordinates":[11.48638,3.88033,0.0]}},
{"type":"Feature","properties":{"Name":"23","Description":""},"geometry":{"type":"Point","coordinates":[11.48641,3.88053,0.0]}},
{"type":"Feature","properties":{"Name":"24","Description":""},"geometry":{"type":"Point","coordinates":[11.4868,3.88029,0.0]}},
{"type":"Feature","properties":{"Name":"25","Description":""},"geometry":{"type":"Point","coordinates":[11.48772,3.87994,0.0]}},
{"type":"Feature","properties":{"Name":"26","Description":""},"geometry":{"type":"Point","coordinates":[11.4887,3.88057,0.0]}},
{"type":"Feature","properties":{"Name":"27","Description":""},"geometry":{"type":"Point","coordinates":[11.48869,3.88057,0.0]}},
{"type":"Feature","properties":{"Name":"28","Description":""},"geometry":{"type":"Point","coordinates":[11.48868,3.8807,0.0]}},
{"type":"Feature","properties":{"Name":"29","Description":""},"geometry":{"type":"Point","coordinates":[11.4888,3.88071,0.0]}},
{"type":"Feature","properties":{"Name":"30","Description":""},"geometry":{"type":"Point","coordinates":[11.49206,3.8775,0.0]}},
{"type":"Feature","properties":{"Name":"31","Description":""},"geometry":{"type":"Point","coordinates":[11.49251,3.87748,0.0]}},
{"type":"Feature","properties":{"Name":"32","Description":""},"geometry":{"type":"Point","coordinates":[11.4923,3.87783,0.0]}},
{"type":"Feature","properties":{"Name":"33","Description":""},"geometry":{"type":"Point","coordinates":[11.49273,3.87822,0.0]}}
]
}
The OpenStreet map appears by I can’t find the points

It is very simple to solve:
map.addLayer(osmLayer);
map.addLayer(geoLayer);
The addLayer method accepts a layer, only one. A working demo with your code.

Getting around the 500 row limit

I have written a Google Fusion Tables script I'm happy with (below), but it's loading only 500 rows of points in my table, which has over 20,000 rows. This is my first time in this neighborhood and I was really surprised to find the limit. Is there some way to load all the rows?
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>Points in box</title>
<link href="./stylesheets/example.css" media="screen" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/images/favicon.ico" />
<noscript><meta http-equiv="refresh" content="0;url=/no_javascript.html"></noscript>
<!-- Find box coordinates javascript -->
<script type ="text/javascript" src="http://www.movable-type.co.uk/scripts/latlon.js"></script>
<!-- Type label text javascript -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="./js/label.js"></script>
<!-- Visulization javascript -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!-- Initialize visualization -->
<script type="text/javascript">
google.load('visualization', '1', {});
</script>
</head>
<body class="developers examples examples_downloads examples_downloads_points-in-box examples_downloads_points-in-box_index">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var store_table = 4121905;
//send a call to GViz to retrieve lat/long coordinates of the stores
function getStoreData() {
//set the query using the input from the user
var queryText = encodeURIComponent("SELECT Latitude,Longitude,Impressions FROM " + store_table);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(doLoop);
}
function drawBox(topleftx, toplefty, bottomrightx, bottomrighty) {
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng( topleftx, toplefty ),
new google.maps.LatLng( bottomrightx, bottomrighty )
);
var overlay = new google.maps.Rectangle({
map: carto_map,
bounds: bounds,
strokeColor: "#0000ff",
strokeOpacity: 0.20,
strokeWeight: 2,
fillColor: "#0000ff",
fillOpacity: 0.050,
});
}
function doLoop(response) {
numRows = response.getDataTable().getNumberOfRows();
//Basic
var cartodbMapOptions = {
zoom: 7,
center: new google.maps.LatLng( 37.926868, -121.68457 ),
// center: new google.maps.LatLng( 40.7248057566452, -74.003 ),
// disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Init the map
carto_map = new google.maps.Map(document.getElementById("map"),cartodbMapOptions);
for(i = 0; i < numRows; i++) {
var centerX = response.getDataTable().getValue(i,0);
var centerY = response.getDataTable().getValue(i,1);
var imps = response.getDataTable().getValue(i,2);
var centerPoint = new LatLon(centerX,centerY);
var latLng = new google.maps.LatLng(centerX,centerY);
var toplefty = centerPoint.destinationPoint(-45, 6)._lon;
var topleftx = centerPoint.destinationPoint(-45, 7.7)._lat;
var bottomrighty = centerPoint.destinationPoint(135, 6)._lon;
var bottomrightx = centerPoint.destinationPoint(135, 7.7)._lat;
drawBox(topleftx, toplefty, bottomrightx, bottomrighty);
var marker = new google.maps.Marker({
position: latLng,
draggable: false,
markertext: imps,
flat: true,
map: carto_map
});
var label = new Label({
map: carto_map,
position: latLng,
draggable: true
});
label.bindTo('text', marker, 'markertext');
marker.setMap(null);
}
}
$(function() {
getStoreData();
});
</script>
<div id="map"></div>
</body>
</html>

I solved the problem by using the json call method. Code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>David's Build Up</title>
<link href="./stylesheets/example.css" media="screen" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/images/favicon.ico" />
<noscript><meta http-equiv="refresh" content="0;url=/no_javascript.html"></noscript>
<!-- Find box coordinates javascript -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type ="text/javascript" src="http://www.movable-type.co.uk/scripts/latlon.js"></script>
<!-- Type label text javascript -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="./js/label.js"></script>
<!-- Visulization javascript -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!-- Initialize visualization -->
<script type="text/javascript">
google.load('visualization', '1', {});
</script>
<script type="text/javascript">
function drawBox(topleftx, toplefty, bottomrightx, bottomrighty) {
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng( topleftx, toplefty ),
new google.maps.LatLng( bottomrightx, bottomrighty )
);
var overlay = new google.maps.Rectangle({
map: carto_map,
bounds: bounds,
strokeColor: "#0000ff",
strokeOpacity: 0.20,
strokeWeight: 2,
fillColor: "#0000ff",
fillOpacity: 0.050,
});
}
function initialize() {
// Set the map parameters
var cartodbMapOptions = {
zoom: 5 ,
center: new google.maps.LatLng( 40.313043, -97.822266 ),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Initialize the map
carto_map = new google.maps.Map(document.getElementById("map"),cartodbMapOptions);
// Query to grab the data
var query = "SELECT Latitude, Longitude, Impressions FROM " +
'[encrypted table ID here]';
var encodedQuery = encodeURIComponent(query);
// Construct the URL to grab the data
var url = ['https://www.googleapis.com/fusiontables/v1/query'];
url.push('?sql=' + encodedQuery);
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
url.push('&callback=?');
// Set the number of rows
var numRows = 3500;
// Get the variables from the table, in a loop
$.ajax({
url: url.join(''),
dataType: 'jsonp',
success: function (data) {
var rows = data['rows'];
var ftData = document.getElementById('ft-data');
for (var i in rows) {
var centerX = rows[i][0];
var centerY = rows[i][1];
var imps = rows[i][2];
// Set the center points
var centerPoint = new LatLon(centerX,centerY);
var latLng = new google.maps.LatLng(centerX,centerY);
// Set top left points
var toplefty = centerPoint.destinationPoint(-45, 6)._lon;
var topleftx = centerPoint.destinationPoint(-45, 7.7)._lat;
// Set bottom right points
var bottomrighty = centerPoint.destinationPoint(135, 6)._lon;
var bottomrightx = centerPoint.destinationPoint(135, 7.7)._lat;
// Draw the box
drawBox(topleftx, toplefty, bottomrightx, bottomrighty);
// Drop markers
var marker = new google.maps.Marker({
position: latLng,
draggable: false,
markertext: imps,
flat: true,
map: carto_map
});
var label = new Label({
map: carto_map,
position: latLng,
draggable: true
});
label.bindTo('text', marker, 'markertext');
marker.setMap(null);
};
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map"></div>
<div id="ft-data"></div>
</body>
</html>

The Gviz API does have a 500 row limit for a given query.
Any table is limited to 100,000 mappable rows, but that's well outside your reported 20,000 rows.
The new Javascript API, currently accepting Trusted Testers, offers JSON format support for any number of rows returned for a query. You can apply for the TT program by requesting membership in this group:
https://groups.google.com/group/fusion-tables-api-trusted-testers
-Rebecca

The fusiontables/gvizdata URL is intended for Gviz charts and so is limited to 500 points. There are other ways to query that don't have that limitation. See https://developers.google.com/fusiontables/docs/sample_code for examples.

I routinely refresh a 2500 row table by deleting all rows and inserting new ones. The loop in my code that constructs the INSERT sql has a nested loop that just counts to 400, sends that sql, and then starts building another one with the next 400 records.

Adding Legend to Google Fusion Table

I'm trying to add a legend t a map i created from Google Fusion Table Layer Builder and nothing seem to be happening. The legend does not show. here's the sample code. Sample Code
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:400px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(0.428462803418747, 37.760009765625),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'geometry'",
from: 3435376
},
map: map
});
// Create the legend and display on the map
var legend = document.createElement('div');
legend.id = 'legend';
var content = [];
content.push('<h3>Legend</h3>');
content.push('<p><div class="color red"></div>No</p>');
content.push('<p><div class="color green"></div>Yes</p>');
content.push('<p>*Data is fictional</p>');
legend.innerHTML = content.join('');
legend.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

Your legend does show, well at the least the text. You'll need to add some CSS styles, e..g to set the background white, etc. There is a good example at
http://gmaps-samples.googlecode.com/svn/trunk/fusiontables/legend_template.html
See the Legend() and updateLegend() functions.
UPDATE This is really a CSS question. My changes are marked by ADDED or CHANGED
var legend = document.createElement('div');
legend.id = 'legend';
// ADDED
legend.style.padding = '10px';
legend.style.backgroundColor = 'white';
legend.style.borderStyle = 'solid';
legend.style.borderWidth = '1px';
legend.style.textAlign = 'left';
var content = [];
content.push('<h3>Legend</h3>');
// CHANGED
//content.push('<p><div class="color red"></div>No</p>');
//content.push('<p><div class="color green"></div>Yes</p>');
content.push('<p style="background-color: #51D950;">No</p>');
content.push('<p style="background-color: #C84939;">Yes</p>');
content.push('<p>*Data is fictional</p>');
legend.innerHTML = content.join('');
legend.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

The legend tag is ONLY allowed within fieldset tags.
http://www.w3schools.com/html5/tag_legend.asp

Resources