forked from openlayers/ol2
/
marker-shadow.html
152 lines (119 loc) · 5.89 KB
/
marker-shadow.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
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.getLonLatFromViewPortPx(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>