← 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-rotation.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-rotation.html
 
1
<html xmlns="http://www.w3.org/1999/xhtml">
 
2
  <head>
 
3
    <title>OpenLayers Styles Rotation Example</title>
 
4
    <style type="text/css">
 
5
        #map {
 
6
            width: 800px;
 
7
            height: 475px;
 
8
            border: 1px solid black;
 
9
        }
 
10
    </style>
 
11
    <script src="../lib/OpenLayers.js" type="text/javascript"></script>
 
12
    <script type="text/javascript">
 
13
        
 
14
        var map;
 
15
        var vectors;
 
16
        
 
17
        function init(){
 
18
            map = new OpenLayers.Map('map');
 
19
            var wms = new OpenLayers.Layer.WMS(
 
20
                "OpenLayers WMS", 
 
21
                "http://labs.metacarta.com/wms/vmap0",
 
22
                {layers: 'basic'}
 
23
            );
 
24
 
 
25
            vectors = new OpenLayers.Layer.Vector(
 
26
                "Simple Geometry",
 
27
                {
 
28
                    styleMap: new OpenLayers.StyleMap({
 
29
                        "default": {
 
30
                            externalGraphic: "../img/marker-gold.png",
 
31
                            //graphicWidth: 17,
 
32
                            graphicHeight: 20,
 
33
                            graphicYOffset: -19,
 
34
                            rotation: "${angle}",
 
35
                            fillOpacity: "${opacity}"
 
36
                        },
 
37
                        "select": {
 
38
                            cursor: "crosshair",
 
39
                            externalGraphic: "../img/marker.png"
 
40
                        }
 
41
                    })
 
42
                }
 
43
            );
 
44
            
 
45
            map.addLayers([wms, vectors]);
 
46
            
 
47
            var features = [];
 
48
            var x = -111.04;
 
49
            var y = 45.68;
 
50
            for(var i = 0; i < 10; i++){
 
51
                x += i * .5;
 
52
                y += i * .1;
 
53
                features.push(
 
54
                    new OpenLayers.Feature.Vector(
 
55
                        new OpenLayers.Geometry.Point(x, y), {angle: (i*36)%360-180, opacity:i/10+.1}
 
56
                    )
 
57
                );
 
58
                features.push(
 
59
                    new OpenLayers.Feature.Vector(
 
60
                        new OpenLayers.Geometry.Point(x, y), {angle: (i*36)%360, opacity:i/10+.1}
 
61
                    )
 
62
                );
 
63
            }
 
64
            
 
65
            map.setCenter(new OpenLayers.LonLat(x-10, y), 5);
 
66
            vectors.addFeatures(features);
 
67
 
 
68
            var selectControl = new OpenLayers.Control.SelectFeature(
 
69
                vectors, {hover: true});
 
70
            map.addControl(selectControl);
 
71
            selectControl.activate();
 
72
 
 
73
        };
 
74
        
 
75
    </script>
 
76
  </head>
 
77
  <body onload="init()">
 
78
    <h1 id="title">Rotation Style Example</h1>
 
79
    <p id="shortdesc">To style point features with rotation, use the rotation
 
80
    property of the symbolizer. The center of the rotation is the point of the
 
81
    image specified by graphicXOffset and graphicYOffset.</p>
 
82
    <div id="map"></div>
 
83
    <div id="docs"/>
 
84
  </body>
 
85
</html>