Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

153 lines (119 sloc) 6.028 kb
<!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>
Jump to Line
Something went wrong with that request. Please try again.