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>