1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>OpenLayers: Vector Graphics with Shadows</title> <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, rendererOptions: {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> |