]> dev.renevier.net Git - syp.git/blob - openlayers/examples/styles-rotation.html
when selecting a cluster, zoom until features are detached
[syp.git] / 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>