1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>OpenLayers: Z-Ordering and Y-Ordering of Vector Features</title>
4 <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
5 <link rel="stylesheet" href="style.css" type="text/css" />
6 <style type="text/css">
20 <script src="../lib/OpenLayers.js" type="text/javascript"></script>
21 <script type="text/javascript">
23 var GOLD_Z_INDEX = 15;
24 var FIRST_RED_Z_INDEX = 10;
25 var SECOND_RED_Z_INDEX = 11;
27 var RADIUS_FROM_CENTER = 40;
28 var POINT_DISTANCE = 10;
30 function initYOrderMap() {
31 var map = new OpenLayers.Map("yorder");
33 var layer = new OpenLayers.Layer.Vector(
36 styleMap: new OpenLayers.StyleMap({
37 externalGraphic: "../img/marker-gold.png",
39 graphicZIndex: GOLD_Z_INDEX
42 rendererOptions: {yOrdering: true}
46 map.addLayers([layer]);
47 map.zoomToMaxExtent();
49 // Add features to the layers to show off z-index/y-ordering.
50 // We do this after adding the layer so we can work in pixels.
51 var center = map.getViewPortPxFromLonLat(map.getCenter());
53 var top = new OpenLayers.Pixel(center.x, center.y - RADIUS_FROM_CENTER);
54 var bottom = new OpenLayers.Pixel(center.x, center.y + RADIUS_FROM_CENTER);
55 var left = new OpenLayers.Pixel(center.x - RADIUS_FROM_CENTER, center.y - POINT_DISTANCE / 2);
56 var right = new OpenLayers.Pixel(center.x + RADIUS_FROM_CENTER, center.y - POINT_DISTANCE / 2);
58 // Add the ordering features. These are the gold ones that all have the same z-index
59 // and succomb to y-ordering.
60 var orderingFeatures = [];
61 // Note: We use > here on purpose (instead of >= ), as well as subtracting the
62 // the POINT_DISTANCE in the beginning of the loop (as opposed to the end).
63 // This is purely for symmetry. Also note that the gold features are drawn
64 // from bottom to top so as to quickly signal whether or not y-ordering is working.
65 while (bottom.y > top.y) {
66 bottom.y -= POINT_DISTANCE;
67 var lonLat = map.getLonLatFromViewPortPx(bottom);
68 orderingFeatures.push(
69 new OpenLayers.Feature.Vector(
70 new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
75 layer.addFeatures(orderingFeatures);
77 // Add the z-index features. Technically, these features succomb to y-ordering
78 // as well; however, since they have different z-indexes, the z-indexes take
80 var indexFeatures = [];
82 while (left.x <= right.x) {
83 var lonLat = map.getLonLatFromViewPortPx(left);
84 var point = new OpenLayers.Feature.Vector(
85 new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
88 // This is where the magic happens. We override the style on the layer
89 // to give our own style with alternativing z-indexes.
91 graphicZIndex: useFirst ? FIRST_RED_Z_INDEX : SECOND_RED_Z_INDEX,
92 externalGraphic: "../img/marker.png",
100 left.x += POINT_DISTANCE;
101 useFirst = !useFirst;
104 layer.addFeatures(indexFeatures);
107 function initDrawingOrderMap() {
108 var map = new OpenLayers.Map("drawingorder");
110 var layer = new OpenLayers.Layer.Vector(
113 // The zIndex is taken from the zIndex attribute of the features
114 styleMap: new OpenLayers.StyleMap({
115 graphicZIndex: "${zIndex}",
116 externalGraphic: "../img/marker-green.png",
120 // enable the indexer by setting zIndexing to true
121 rendererOptions: {zIndexing: true}
125 map.addLayers([layer]);
126 map.zoomToMaxExtent();
128 // Add features to the layers to show off z-index/y-ordering.
129 // We do this after adding the layer so we can work in pixels.
130 var center = map.getViewPortPxFromLonLat(map.getCenter());
132 var top = new OpenLayers.Pixel(center.x, center.y - RADIUS_FROM_CENTER);
133 var bottom = new OpenLayers.Pixel(center.x, center.y + RADIUS_FROM_CENTER);
134 var left = new OpenLayers.Pixel(center.x - RADIUS_FROM_CENTER, center.y);
135 var right = new OpenLayers.Pixel(center.x + RADIUS_FROM_CENTER, center.y);
137 // Add the ordering features. These are the gold ones that all have the same z-index
138 // and succomb to y-ordering.
139 var orderingFeatures = [];
140 while (bottom.y > top.y && left.x < right.x) {
141 var bottomLonLat = map.getLonLatFromViewPortPx(bottom);
142 var leftLonLat = map.getLonLatFromViewPortPx(left);
143 orderingFeatures.push(
144 new OpenLayers.Feature.Vector(
145 new OpenLayers.Geometry.Point(leftLonLat.lon, bottomLonLat.lat),
146 // Set the zIndex attribute of all features to 0.
147 // This attribute will be assigned to the graphicZIndex symbolizer property by the layer's styleMap
151 bottom.y -= POINT_DISTANCE / 2; // Divide by 2 for better visual.
152 left.x += POINT_DISTANCE / 2;
154 // only the first feature gets a zIndex attribute of 1
155 orderingFeatures[0].attributes.zIndex = 1;
157 layer.addFeatures(orderingFeatures);
162 initDrawingOrderMap();
167 <body onload="init()">
168 <h1 id="title">Z-Index/Y-Order Example</h1>
174 This example shows the use of z-indexing and y-ordering of external graphics. Zoom in and out to see this behavior.
177 <h3>Z-Index (with Y-Ordering enabled)</h3>
181 <div id="yorder" class="smallmap"></div>
185 In this map, the gold features all have the same z-index, and the red features have alternating z-indeces. The gold features' z-index is greater than the red features' z-indeces, which is why gold features look to be drawn on top of the red features. Since each gold feature has the same z-index, gold features succomb to y-ordering: this is where features that seem closest to the viewer (lower lattitude) show up above those that seem farther away (higher lattitude).
187 You can enable y-ordering by passing the parameter <i>yOrdering: true</i> in the vector layer's options hash. For all configurations (with yOrdering or zIndexing set to true), if features have the same z-index -- and if y-ordering is enabled: the same latitude -- those features will succomb to drawing order, where the last feature to be drawn will appear above the rest.
193 <h3>Z-Index and Drawing Order (Z-Indexes set, and Y-Ordering disabled)</h3>
197 <div id="drawingorder" class="smallmap"></div>
201 In this map, <i>zIndexing</i> is set to true. All features are given the same z-index (0), except for the first feature which has a z-index of 1. The layer's <i>yOrdering</i> parameter is set to the default (false). This configuration makes features succomb to z-index and drawing order (for the features with the same z-index), instead of y-order.
203 The features in this map were drawn from left to right and bottom to top, diagonally, to show that y-ordering is not enabled. Only the lower-left corner feature is drawn on top of the others, because it has a higher z-index (1 instead of 0).