1 <html xmlns="http://www.w3.org/1999/xhtml">
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">
20 <script src="../lib/OpenLayers.js" type="text/javascript"></script>
21 <script type="text/javascript">
23 var SHADOW_Z_INDEX = 10;
24 var MARKER_Z_INDEX = 11;
27 var NUMBER_OF_FEATURES = 15;
32 map = new OpenLayers.Map("map");
34 layer = new OpenLayers.Layer.Vector(
35 "Marker Drop Shadows",
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",
42 // Makes sure the background graphic is placed correctly relative
43 // to the external graphic.
45 backgroundYOffset: -7,
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,
56 rendererOptions: {yOrdering: true}
60 map.addLayers([layer]);
62 // Add a drag feature control to move features around.
63 var dragFeature = new OpenLayers.Control.DragFeature(layer);
65 map.addControl(dragFeature);
67 dragFeature.activate();
69 map.zoomToMaxExtent();
74 function drawFeatures() {
76 layer.removeFeatures(layer.features);
78 // Create features at random around the center.
79 var center = map.getViewPortPxFromLonLat(map.getCenter());
81 // Add the ordering features. These are the gold ones that all have the same z-index
82 // and succomb to y-ordering.
85 for (var index = 0; index < NUMBER_OF_FEATURES; index++) {
86 // Calculate a random x/y. Subtract half the diameter to make some
88 var x = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
89 var y = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
91 var pixel = new OpenLayers.Pixel(center.x + x, center.y + y);
93 var lonLat = map.getLonLatFromViewPortPx(pixel);
95 new OpenLayers.Feature.Vector(
96 new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
101 layer.addFeatures(features);
106 <body onload="init()">
107 <h1 id="title">Marker Shadows using Background Graphics/Z-Indexes</h1>
113 This example shows off marker shadows using background graphics and z-indexes. Move the features around to show the shadows' interaction.
121 <div id="map" class="smallmap"></div>
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.
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.
129 Y-ordering on the layer is enabled. See the <a href="./ordering.html">ordering example</a>.
135 <button onclick="drawFeatures()">Redraw Features</button>