jQuery + OpenLayers

by Thomas B.

HTML

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<html>
    
    <head>
        <title>Use OpenLayers Renderer as legend</title>
    </head>
    
    <body>Legend:
        <div id="legend" style="width:100px; height:150px; border:1px solid black;"></div>
    </body>

</html>

JavaScript

var map = new OpenLayers.Map('legend', {
    controls: []
});

// well known graphics

OpenLayers.Renderer.symbol = {
    star: [350, 75, 379, 161, 469, 161, 397, 215, 423, 301, 350, 250, 277, 301, 303, 215, 231, 161, 321, 161, 350, 75],
    cross: [4, 0, 6, 0, 6, 4, 10, 4, 10, 6, 6, 6, 6, 10, 4, 10, 4, 6, 0, 6, 0, 4, 4, 4, 4, 0],
    x: [0, 0, 25, 0, 50, 35, 75, 0, 100, 0, 65, 50, 100, 100, 75, 100, 50, 65, 25, 100, 0, 100, 35, 50, 0, 0],
    square: [0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
    triangle: [0, 10, 10, 10, 5, 0, 0, 10]
};

OpenLayers.Renderer.symbol.sector = [0, 4, 10, 0, 12, 1, 13, 4, 12, 7, 10, 8, 0, 4];
OpenLayers.Renderer.symbol.sector_hack = [0, 4, 10, 0, 12, 1, 13, 4, 12, 7, 10, 8, 0, 4, -13, 4];

// You can also of course use predefined symbols like OpenLayers.Renderer.symbol.star
// which already exists in OpenLayers


// list of azimuths
//var azimuths = [0, 120, 240];
var azimuths = [0];
var graphics = ['sector', 'sector_hack','star'];

// Create one feature for each well known graphic.
// Give features a type attribute with the graphic name.
var sites = 3;
var sectors = azimuths.length;
var features = Array(sites * sectors);
var width = map.maxExtent.getWidth();
var height = map.maxExtent.getHeight();
var lon = map.maxExtent.left + width / 2;
var latDelta = height / (sites + 1);
var lat = map.maxExtent.top;

for (var i = 0; i < sites; ++i) {
    lat = lat - latDelta;
    for (var j = 0; j < sectors; ++j) {
        var location = new OpenLayers.Geometry.Point(lon, lat);
        features[i * sectors + j] = new OpenLayers.Feature.Vector(location, {
            azimuth: azimuths[j],
            symbol: graphics[i]
        });
    }
}

// Create a style map for painting the features.
// The graphicName property of the symbolizer is evaluated using
// the type attribute on each feature (set above).
var styles = new OpenLayers.StyleMap({
    "default": {
        graphicName: '${symbol}',
        pointRadius: 20,
        strokeColor: 'fuchsia',
       ...