openlayers/examples/marker-shadow.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   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">
   7         .smallmap {
   8             width: 300px;
   9         }
  10
  11         .docs {
  12             padding: 0px 5px;
  13         }
  14
  15         td {
  16             vertical-align: top;
  17         }
  18
  19     </style>
  20     <script src="../lib/OpenLayers.js" type="text/javascript"></script>
  21     <script type="text/javascript">
  22
  23         var SHADOW_Z_INDEX = 10;
  24         var MARKER_Z_INDEX = 11;
  25
  26         var DIAMETER = 200;
  27         var NUMBER_OF_FEATURES = 15;
  28
  29         var map, layer;
  30
  31         function init() {
  32             map = new OpenLayers.Map("map");
  33
  34             layer = new OpenLayers.Layer.Vector(
  35                 "Marker Drop Shadows",
  36                 {
  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",
  41
  42                         // Makes sure the background graphic is placed correctly relative
  43                         // to the external graphic.
  44                         backgroundXOffset: 0,
  45                         backgroundYOffset: -7,
  46
  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,
  52
  53                         pointRadius: 10
  54                     }),
  55                     isBaseLayer: true,
  56                     rendererOptions: {yOrdering: true}
  57                 }
  58             );
  59
  60             map.addLayers([layer]);
  61
  62             // Add a drag feature control to move features around.
  63             var dragFeature = new OpenLayers.Control.DragFeature(layer);
  64
  65             map.addControl(dragFeature);
  66
  67             dragFeature.activate();
  68
  69             map.zoomToMaxExtent();
  70
  71             drawFeatures();
  72         }
  73
  74         function drawFeatures() {
  75
  76             layer.removeFeatures(layer.features);
  77
  78             // Create features at random around the center.
  79             var center = map.getViewPortPxFromLonLat(map.getCenter());
  80
  81             // Add the ordering features. These are the gold ones that all have the same z-index
  82             // and succomb to y-ordering.
  83             var features = [];
  84
  85             for (var index = 0; index < NUMBER_OF_FEATURES; index++) {
  86                 // Calculate a random x/y. Subtract half the diameter to make some
  87                 // features negative.
  88                 var x = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
  89                 var y = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
  90
  91                 var pixel = new OpenLayers.Pixel(center.x + x, center.y + y);
  92
  93                 var lonLat = map.getLonLatFromViewPortPx(pixel);
  94                 features.push(
  95                     new OpenLayers.Feature.Vector(
  96                         new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
  97                     )
  98                 );
  99             }
 100
 101             layer.addFeatures(features);
 102         }
 103
 104     </script>
 105   </head>
 106   <body onload="init()">
 107         <h1 id="title">Marker Shadows using Background Graphics/Z-Indexes</h1>
 108
 109         <div id="tags">
 110         </div>
 111
 112         <p id="shortdesc">
 113            This example shows off marker shadows using background graphics and z-indexes. Move the features around to show the shadows' interaction.
 114         </p>
 115
 116         <br>
 117
 118         <table>
 119             <tr>
 120                 <td>
 121                     <div id="map" class="smallmap"></div>
 122                 </td>
 123                 <td>
 124                     <div class="docs">
 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.
 126                         <br><br>
 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.
 128                         <br><br>
 129                         Y-ordering on the layer is enabled. See the <a href="./ordering.html">ordering example</a>.
 130                     </div>
 131                 </td>
 132             </tr>
 133             <tr>
 134                 <td>
 135                     <button onclick="drawFeatures()">Redraw Features</button>
 136                 </td>
 137             </tr>
 138         </table>
 139
 140
 141     </body>
 142 </html>