]> dev.renevier.net Git - syp.git/blob - openlayers/examples/styles-unique.html
initial commit
[syp.git] / openlayers / examples / styles-unique.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
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">
8         var map, layer;
9
10         function init(){
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'} );
14             map.addLayer(wms);
15             map.setCenter(new OpenLayers.LonLat(0, 0), 0);
16             
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)}
24                 );
25             }
26             
27             // create a styleMap with a custom default symbolizer
28             var styleMap = new OpenLayers.StyleMap({
29                 fillOpacity: 1,
30                 pointRadius: 10
31             });
32             
33             // create a lookup table with different symbolizers for 0, 1 and 2
34             var lookup = {
35                 0: {externalGraphic: "../img/marker-blue.png"},
36                 1: {externalGraphic: "../img/marker-green.png"},
37                 2: {externalGraphic: "../img/marker-gold.png"}
38             }
39             
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);
43             
44             layer = new OpenLayers.Layer.Vector('Points', {
45                 styleMap: styleMap
46             });
47             
48             layer.addFeatures(features);
49             map.addLayer(layer);
50             
51             // create 20 random features with a random state property.
52             var features = new Array(20);
53             var states = [
54                 OpenLayers.State.UNKNOWN,
55                 OpenLayers.State.UPDATE,
56                 OpenLayers.State.DELETE,
57                 OpenLayers.State.INSERT
58             ];
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)
62                 );
63                 features[i].state = states[parseInt(Math.random()*4)];
64             }
65             
66             var context = function(feature) {
67                 return feature;
68             }
69             var styleMap = new OpenLayers.StyleMap();
70             
71             // create a lookup table with different symbolizers for the different
72             // state values
73             var lookup = {};
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"};
78
79             styleMap.addUniqueValueRules("default", "state", lookup, context);
80             layer = new OpenLayers.Layer.Vector('Points', {
81                 styleMap: styleMap
82             });
83             
84             layer.addFeatures(features);
85             map.addLayer(layer);
86         }
87     </script>
88   </head>
89   <body onload="init()">
90     <h1 id="title">Unique Value Styles Example</h1>
91
92     <div id="tags"></div>
93
94     <p id="shortdesc">
95         Shows how to create a style based on unique feature attribute values (markers)
96         and feature state values (circles).
97     </p>
98
99     <div id="map" class="smallmap"></div>
100
101     <div id="docs"></div>
102   </body>
103 </html>