1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>OpenLayers Styles Unique Value Styles Example</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">
11 map = new OpenLayers.Map('map', {maxResolution:'auto'});
12 var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
13 "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
15 map.setCenter(new OpenLayers.LonLat(0, 0), 0);
17 // create 20 random features with a random type attribute. The
18 // type attribute is a value between 0 and 2.
19 var features = new Array(20);
20 for (var i=0; i<20; i++) {
21 features[i] = new OpenLayers.Feature.Vector(
22 new OpenLayers.Geometry.Point(Math.random()*360-180, Math.random()*180-90),
23 {type: parseInt(Math.random()*3)}
27 // create a styleMap with a custom default symbolizer
28 var styleMap = new OpenLayers.StyleMap({
33 // create a lookup table with different symbolizers for 0, 1 and 2
35 0: {externalGraphic: "../img/marker-blue.png"},
36 1: {externalGraphic: "../img/marker-green.png"},
37 2: {externalGraphic: "../img/marker-gold.png"}
40 // add rules from the above lookup table, with the keyes mapped to
41 // the "type" property of the features, for the "default" intent
42 styleMap.addUniqueValueRules("default", "type", lookup);
44 layer = new OpenLayers.Layer.Vector('Points', {
48 layer.addFeatures(features);
51 // create 20 random features with a random state property.
52 var features = new Array(20);
54 OpenLayers.State.UNKNOWN,
55 OpenLayers.State.UPDATE,
56 OpenLayers.State.DELETE,
57 OpenLayers.State.INSERT
59 for (var i=0; i<20; i++) {
60 features[i] = new OpenLayers.Feature.Vector(
61 new OpenLayers.Geometry.Point(Math.random()*360-180, Math.random()*180-90)
63 features[i].state = states[parseInt(Math.random()*4)];
66 var context = function(feature) {
69 var styleMap = new OpenLayers.StyleMap();
71 // create a lookup table with different symbolizers for the different
74 lookup[OpenLayers.State.UNKNOWN] = {fillColor: "green"};
75 lookup[OpenLayers.State.UPDATE] = {fillColor: "green"};
76 lookup[OpenLayers.State.DELETE] = {fillColor: "red"};
77 lookup[OpenLayers.State.INSERT] = {fillColor: "orange"};
79 styleMap.addUniqueValueRules("default", "state", lookup, context);
80 layer = new OpenLayers.Layer.Vector('Points', {
84 layer.addFeatures(features);
89 <body onload="init()">
90 <h1 id="title">Unique Value Styles Example</h1>
95 Shows how to create a style based on unique feature attribute values (markers)
96 and feature state values (circles).
99 <div id="map" class="smallmap"></div>
101 <div id="docs"></div>