← Back to branch summary

~mortenoh/+junk/dhis2-detailed-import-export

« back to all changes in this revision

Viewing changes to gis/dhis-gis-geostat/mfbase/openlayers/examples/styles-unique.html

  • Committer: larshelge at gmail
  • Date: 2009-03-03 16:46:36 UTC
  • Revision ID: larshelge@gmail.com-20090303164636-2sjlrquo7ib1gf7r
Initial check-in

Show diffs side-by-side

added added

removed removed

Lines of Context:
gis/dhis-gis-geostat/mfbase/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>