Skip to content


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>
<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;
<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 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
// Add a drag feature control to move features around.
var dragFeature = new OpenLayers.Control.DragFeature(layer);
function drawFeatures() {
// 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);
new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(lonLat.lon,
<body onload="init()">
<h1 id="title">Marker Shadows using Background Graphics/Z-Indexes</h1>
<div id="tags">
markers, shadow, style
<p id="shortdesc">
This example shows off marker shadows using background graphics and z-indexes. Move the features around to show the shadows' interaction.
<div id="map" class="smallmap"></div>
<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.
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.
Y-ordering on the layer is enabled. See the <a href="./ordering.html">ordering example</a>.
<button onclick="drawFeatures()">Redraw Features</button>
Jump to Line
Something went wrong with that request. Please try again.