]> dev.renevier.net Git - syp.git/blob - openlayers/examples/marker-shadow.html
reset openlayers directory to its original state at the end of build.sh
[syp.git] / openlayers / examples / marker-shadow.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
3     <title>OpenLayers: Vector Graphics with Shadows</title>
4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
5     <link rel="stylesheet" href="style.css" type="text/css" />
6     <style type="text/css">
7         .smallmap {
8             width: 300px;
9         }
10         
11         .docs {
12             padding: 0px 5px;
13         }
14         
15         td {
16             vertical-align: top;
17         }
18         
19     </style>
20     <script src="../lib/OpenLayers.js" type="text/javascript"></script>
21     <script type="text/javascript">
22         
23         var SHADOW_Z_INDEX = 10;
24         var MARKER_Z_INDEX = 11;
25         
26         var DIAMETER = 200;
27         var NUMBER_OF_FEATURES = 15;
28             
29         var map, layer;   
30             
31         function init() {
32             map = new OpenLayers.Map("map");
33             
34             layer = new OpenLayers.Layer.Vector(
35                 "Marker Drop Shadows",
36                 {
37                     styleMap: new OpenLayers.StyleMap({
38                         // Set the external graphic and background graphic images.
39                         externalGraphic: "../img/marker-gold.png",
40                         backgroundGraphic: "./marker_shadow.png",
41                         
42                         // Makes sure the background graphic is placed correctly relative
43                         // to the external graphic.
44                         backgroundXOffset: 0,
45                         backgroundYOffset: -7,
46                         
47                         // Set the z-indexes of both graphics to make sure the background
48                         // graphics stay in the background (shadows on top of markers looks
49                         // odd; let's not do that).
50                         graphicZIndex: MARKER_Z_INDEX,
51                         backgroundGraphicZIndex: SHADOW_Z_INDEX,
52                         
53                         pointRadius: 10
54                     }),
55                     isBaseLayer: true,
56                     rendererOptions: {yOrdering: true}
57                 }
58             );
59             
60             map.addLayers([layer]);
61             
62             // Add a drag feature control to move features around.
63             var dragFeature = new OpenLayers.Control.DragFeature(layer);
64             
65             map.addControl(dragFeature);
66             
67             dragFeature.activate();
68                         
69             map.zoomToMaxExtent();
70             
71             drawFeatures();
72         }
73         
74         function drawFeatures() {
75             
76             layer.removeFeatures(layer.features);
77             
78             // Create features at random around the center.
79             var center = map.getViewPortPxFromLonLat(map.getCenter());
80             
81             // Add the ordering features. These are the gold ones that all have the same z-index
82             // and succomb to y-ordering.
83             var features = [];
84             
85             for (var index = 0; index < NUMBER_OF_FEATURES; index++) {
86                 // Calculate a random x/y. Subtract half the diameter to make some
87                 // features negative.
88                 var x = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
89                 var y = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
90                 
91                 var pixel = new OpenLayers.Pixel(center.x + x, center.y + y);
92                 
93                 var lonLat = map.getLonLatFromViewPortPx(pixel);
94                 features.push(
95                     new OpenLayers.Feature.Vector(
96                         new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
97                     )
98                 );
99             }
100             
101             layer.addFeatures(features);
102         }
103         
104     </script>
105   </head>
106   <body onload="init()">
107         <h1 id="title">Marker Shadows using Background Graphics/Z-Indexes</h1>
108
109         <div id="tags">
110         </div>
111
112         <p id="shortdesc">
113            This example shows off marker shadows using background graphics and z-indexes. Move the features around to show the shadows' interaction.
114         </p>
115         
116         <br>
117
118         <table>
119             <tr>
120                 <td>
121                     <div id="map" class="smallmap"></div>
122                 </td>
123                 <td>
124                     <div class="docs">
125                         The features in this map were generated at random. Each of these features have a <i>backgroundGraphic</i> property set in the style map to add a shadow image. Note that the background graphics are not duplicated features with a different style.
126                         <br><br>
127                         The shadows were set to have a different z-index than the markers themselves, using the <i>backgroundGraphicZIndex</i> property. This makes sure all shadows stay behind the markers, keeping a clean look. The shadows were also placed nicely relative to the external graphic using the <i>backgroundXOffset</i> and <i>backgroundYOffset</i> property.
128                         <br><br>
129                         Y-ordering on the layer is enabled. See the <a href="./ordering.html">ordering example</a>.
130                     </div>
131                 </td>
132             </tr>
133             <tr>
134                 <td>
135                     <button onclick="drawFeatures()">Redraw Features</button>
136                 </td>
137             </tr>
138         </table>
139         
140         
141     </body>
142 </html>