diff options
Diffstat (limited to 'misc/openlayers/examples/marker-shadow.html')
| -rw-r--r-- | misc/openlayers/examples/marker-shadow.html | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/misc/openlayers/examples/marker-shadow.html b/misc/openlayers/examples/marker-shadow.html new file mode 100644 index 0000000..a244653 --- /dev/null +++ b/misc/openlayers/examples/marker-shadow.html @@ -0,0 +1,152 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <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"); + + // allow testing of specific renderers via "?renderer=Canvas", etc + var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; + renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; + + 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: "./img/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}, + renderers: renderer + } + ); + + 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.getLonLatFromPixel(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"> + markers, shadow, style + </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> |