153 lines
5.9 KiB
HTML
153 lines
5.9 KiB
HTML
<!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>
|