1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>OpenLayers Graphic Names</title>
4 <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
5 <link rel="stylesheet" href="style.css" type="text/css" />
6 <script src="../lib/OpenLayers.js"></script>
7 <script type="text/javascript">
8 // user custom graphicname
10 OpenLayers.Renderer.symbol.lightning = [0,0, 4,2, 6,0, 10,5, 6,3, 4,5, 0,0];
11 OpenLayers.Renderer.symbol.rectangle = [0,0, 10,0, 10,4, 0,4, 0,0];
16 map = new OpenLayers.Map('map');
18 // list of well-known graphic names
19 var graphics = ["star", "cross", "x", "square", "triangle", "circle", "lightning", "rectangle"];
21 // Create one feature for each well known graphic.
22 // Give features a type attribute with the graphic name.
23 var num = graphics.length;
24 var slot = map.maxExtent.getWidth() / num;
25 var features = Array(num);
26 for(var i=0; i<graphics.length; ++i) {
27 lon = map.maxExtent.left + (i * slot) + (slot / 2);
28 features[i] = new OpenLayers.Feature.Vector(
29 new OpenLayers.Geometry.Point(
30 map.maxExtent.left + (i * slot) + (slot / 2), 0
37 // Create a style map for painting the features.
38 // The graphicName property of the symbolizer is evaluated using
39 // the type attribute on each feature (set above).
40 var styles = new OpenLayers.StyleMap({
42 graphicName: "${type}",
44 strokeColor: "fuchsia",
55 // Create a vector layer and give it your style map.
56 var layer = new OpenLayers.Layer.Vector(
57 "Graphics", {styleMap: styles, isBaseLayer: true}
59 layer.addFeatures(features);
62 // Create a select feature control and add it to the map.
63 var select = new OpenLayers.Control.SelectFeature(layer, {hover: true});
64 map.addControl(select);
67 map.setCenter(new OpenLayers.LonLat(0, 0), 0);
71 <body onload="init()">
72 <h1 id="title">Named Graphics Example</h1>
77 Shows how to use well-known graphic names.
80 <div id="map" class="smallmap"></div>
83 OpenLayers supports well-known names for a few graphics. You can use
84 the names "star", "cross", "x", "square", "triangle", and "circle" as
85 the value for the graphicName property of a symbolizer.