1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>OpenLayers Styles Rotation Example</title>
4 <style type="text/css">
8 border: 1px solid black;
11 <script src="../lib/OpenLayers.js" type="text/javascript"></script>
12 <script type="text/javascript">
18 map = new OpenLayers.Map('map');
19 var wms = new OpenLayers.Layer.WMS(
21 "http://labs.metacarta.com/wms/vmap0",
25 vectors = new OpenLayers.Layer.Vector(
28 styleMap: new OpenLayers.StyleMap({
30 externalGraphic: "../img/marker-gold.png",
35 fillOpacity: "${opacity}"
39 externalGraphic: "../img/marker.png"
45 map.addLayers([wms, vectors]);
50 for(var i = 0; i < 10; i++){
54 new OpenLayers.Feature.Vector(
55 new OpenLayers.Geometry.Point(x, y), {angle: (i*36)%360-180, opacity:i/10+.1}
59 new OpenLayers.Feature.Vector(
60 new OpenLayers.Geometry.Point(x, y), {angle: (i*36)%360, opacity:i/10+.1}
65 map.setCenter(new OpenLayers.LonLat(x-10, y), 5);
66 vectors.addFeatures(features);
68 var selectControl = new OpenLayers.Control.SelectFeature(
69 vectors, {hover: true});
70 map.addControl(selectControl);
71 selectControl.activate();
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>