diff options
Diffstat (limited to 'misc/openlayers/examples/marker-shadow.html')
| -rw-r--r-- | misc/openlayers/examples/marker-shadow.html | 152 |
1 files changed, 0 insertions, 152 deletions
diff --git a/misc/openlayers/examples/marker-shadow.html b/misc/openlayers/examples/marker-shadow.html deleted file mode 100644 index a244653..0000000 --- a/misc/openlayers/examples/marker-shadow.html +++ /dev/null @@ -1,152 +0,0 @@ -<!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> |