HTML5 Legend

The legend can be created using the HTML5 Canvas element. This simple example draws a legend across the top of the screen.

Try it here as a Google Gadget:

HTML and JavaScript for a server. See the Sized Markers page for directions to convert this file to a Google Gadget xml file. Note that the registerLoadHandler parameter is drawLegend.

<html>

<head>

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>

</div>

</body>

</html>

Page updated

Google Sites

Report abuse