summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/marker-shadow.html
diff options
context:
space:
mode:
authorChris Schlaeger <chris@linux.com>2014-08-12 21:56:44 +0200
committerChris Schlaeger <chris@linux.com>2014-08-12 21:56:44 +0200
commitea346a785dc1b3f7c156f6fc33da634e1f1a627b (patch)
treeaf67530553d20b6e82ad60fd79593e9c4abf5565 /misc/openlayers/examples/marker-shadow.html
parent59741cd535c47f25971bf8c32b25da25ceadc6d5 (diff)
downloadpostrunner-ea346a785dc1b3f7c156f6fc33da634e1f1a627b.zip
Adding jquery, flot and openlayers to be included with the GEM.v0.0.4
Diffstat (limited to 'misc/openlayers/examples/marker-shadow.html')
-rw-r--r--misc/openlayers/examples/marker-shadow.html152
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>