ordering <exclamation point/>. you can now gracefully z-order your vectors... and you can even 'yOrder' them and add background images, making for a nice 3dish look. be sure to check out the two new example html's: marker-shadow.html and ordering.html. Big thanks to tcoulter (funkyc) for a prolonged effort with this patch. It has come a long way and now what a beautiful finish. (Closes #1357)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@7652 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2008-08-01 00:17:59 +00:00
parent d4a62c630a
commit 8b98f5acc3
6 changed files with 996 additions and 162 deletions
@@ -0,0 +1,141 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <style type="text/css">
+        .smallmap {
+            width: 300px;
+        }
+        
+        .docs {
+            padding: 0px 5px;
+        }
+        
+        td {
+            vertical-align: top;
+        }
+        
+    </style>
+    <script src="../lib/OpenLayers.js" type="text/javascript"></script>
+    <script type="text/javascript">
+        
+        var SHADOW_Z_INDEX = 10;
+        var MARKER_Z_INDEX = 11;
+        
+        var DIAMETER = 200;
+        var NUMBER_OF_FEATURES = 15;
+            
+        var map, layer;   
+            
+        function init() {
+            map = new OpenLayers.Map("map");
+            
+            layer = new OpenLayers.Layer.Vector(
+                "Marker Drop Shadows",
+                {
+                    styleMap: new OpenLayers.StyleMap({
+                        // Set the external graphic and background graphic images.
+                        externalGraphic: "../img/marker-gold.png",
+                        backgroundGraphic: "./marker_shadow.png",
+                        
+                        // Makes sure the background graphic is placed correctly relative
+                        // to the external graphic.
+                        backgroundXOffset: 0,
+                        backgroundYOffset: -7,
+                        
+                        // Set the z-indexes of both graphics to make sure the background
+                        // graphics stay in the background (shadows on top of markers looks
+                        // odd; let's not do that).
+                        graphicZIndex: MARKER_Z_INDEX,
+                        backgroundGraphicZIndex: SHADOW_Z_INDEX,
+                        
+                        pointRadius: 10
+                    }),
+                    isBaseLayer: true,
+                    yOrdering: true
+                }
+            );
+            
+            map.addLayers([layer]);
+            
+            // Add a drag feature control to move features around.
+            var dragFeature = new OpenLayers.Control.DragFeature(layer);
+            
+            map.addControl(dragFeature);
+            
+            dragFeature.activate();
+                        
+            map.zoomToMaxExtent();
+            
+            drawFeatures();
+        }
+        
+        function drawFeatures() {
+            
+            layer.removeFeatures(layer.features);
+            
+            // Create features at random around the center.
+            var center = map.getViewPortPxFromLonLat(map.getCenter());
+            
+            // Add the ordering features. These are the gold ones that all have the same z-index
+            // and succomb to y-ordering.
+            var features = [];
+            
+            for (var index = 0; index < NUMBER_OF_FEATURES; index++) {
+                // Calculate a random x/y. Subtract half the diameter to make some
+                // features negative.
+                var x = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
+                var y = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
+                
+                var pixel = new OpenLayers.Pixel(center.x + x, center.y + y);
+                
+                var lonLat = map.getLonLatFromViewPortPx(pixel);
+                features.push(
+                    new OpenLayers.Feature.Vector(
+                        new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
+                    )
+                );
+            }
+            
+            layer.addFeatures(features);
+        }
+        
+    </script>
+  </head>
+  <body onload="init()">
+        <h1 id="title">Marker Shadows using Background Graphics/Z-Indexes</h1>
+
+        <div id="tags">
+        </div>
+
+        <p id="shortdesc">
+           This example shows off marker shadows using background graphics and z-indexes. Move the features around to show the shadows' interaction.
+        </p>
+        
+        <br>
+
+        <table>
+            <tr>
+                <td>
+                    <div id="map" class="smallmap"></div>
+                </td>
+                <td>
+                    <div class="docs">
+                        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.
+                        <br><br>
+                        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.
+                        <br><br>
+                        Y-ordering on the layer is enabled. See the <a href="./ordering.html">ordering example</a>.
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <button onclick="drawFeatures()">Redraw Features</button>
+                </td>
+            </tr>
+        </table>
+        
+        
+    </body>
+</html>