SVG Legend
The legend can also be created using SVG. An SVG file that draws a legend is:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Drawing a Legend using SVG</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="1000" height="1000" viewBox="0 0 1000 1000"> <script type="application/javascript"> <![CDATA[ var x0=10; var y0=10; function draw() { var area = document.getElementById("area"); 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)"]; for (var i=1; i<colors.length; i+=10) { for (var j=0;j<10;j++) { var x=x0+90*j; var y=y0+4*i; rect=document.createElementNS("http://www.w3.org/2000/svg","rect"); rect.setAttributeNS(null,"width",25); rect.setAttributeNS(null,"height",15); rect.setAttributeNS(null,"x",x); rect.setAttributeNS(null,"y",y); rect.setAttributeNS(null,"fill",colors[i+j]); rect.setAttributeNS(null,"stroke-width",1); rect.setAttributeNS(null,"stroke",colors[i+j]); area.appendChild(rect); } } } function writeText() { var area = document.getElementById("area"); var labels =["none"," 1- 147", " 148- 264", " 265- 411", " 413- 548", " 549- 676", " 680- 839", " 841- 1018","1019- 1234","1235- 1705","1711-16842"]; for (var i=1; i<=10; i++) { var x=x0+90*i-60; var y=y0+15; var label=document.createElementNS("http://www.w3.org/2000/svg","text"); label.setAttributeNS(null,"x", x); label.setAttributeNS(null,"y", y); label.setAttributeNS(null,"font-size","8pt"); label.setAttributeNS(null,"font-family","Arial"); label.setAttributeNS(null,"fill","rgb(0,0,0)"); var textNode = document.createTextNode(labels[i]); label.appendChild(textNode); area.appendChild(label); } } ]]> </script> <g id="area"> <circle cx="0" cy="0" r="0em" onload="draw(), writeText()" /> </g> </svg> </body> </html>
To embed it in an HTML page you need the <object> element and optionally the <embed> element. An additional <iframe> element is used in this example of an HTML file.
<html> <body> <iframe src="SVGNSdraw.svg" width="1000px" height="100px" frameborder="0" scrolling="no"> <object data="SVGNSdraw.svg" type="image/svg+xml" width="1000" height="100"> <embed src="SVGNSdraw.svg" type="image/svg+xml" width="1000" height="100" pluginspage="http://www.adobe.com/svg/viewer/install/" /> </object> </iframe> </body> </html>
Adding the iframe tag to the body for the Coloring polygons from data example, produces this map:
The HTML is:
<body style="margin:0px; padding:0px;" onload="initialize()"> <div id="header" style="width:100%; height; 10%;"> <iframe src="TNCarexLegend.svg" width="1000px" height="40px" frameborder="0" scrolling="no"> <object data="TNCarexLegend.svg" type="image/svg+xml" width="1000" height="40"> <embed src="TNCarexLegend.svg" type="image/svg+xml" width="1000" height="40" pluginspage="http://www.adobe.com/svg/viewer/install/" /> </object> </iframe> </div> <div id="map_canvas" style="width: 100%; height: 100%; float: left"></div> <div id="table_area" style="width: 18%; height: 100%; float: right"></div> <div id="footer" style="width:100%; height; 10%;"></div> <div id="info" style="width:100%; height; 10%;"></div> </body>