]> dev.renevier.net Git - syp.git/blob - openlayers/examples/ordering.html
reset openlayers directory to its original state at the end of build.sh
[syp.git] / openlayers / examples / ordering.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
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">
7         .smallmap {
8             width: 300px;
9         }
10         
11         .docs {
12             padding: 0px 5px;
13         }
14         
15         td {
16             vertical-align: top;
17         }
18         
19     </style>
20     <script src="../lib/OpenLayers.js" type="text/javascript"></script>
21     <script type="text/javascript">
22         
23         var GOLD_Z_INDEX = 15;
24         var FIRST_RED_Z_INDEX = 10;
25         var SECOND_RED_Z_INDEX = 11;
26         
27         var RADIUS_FROM_CENTER = 40;
28         var POINT_DISTANCE = 10;
29             
30         function initYOrderMap() {
31             var map = new OpenLayers.Map("yorder");
32             
33             var layer = new OpenLayers.Layer.Vector(
34                 "Y-Order",
35                 {
36                     styleMap: new OpenLayers.StyleMap({
37                         externalGraphic: "../img/marker-gold.png",
38                         pointRadius: 10,
39                         graphicZIndex: GOLD_Z_INDEX
40                     }),
41                     isBaseLayer: true,
42                     rendererOptions: {yOrdering: true}
43                 }
44             );
45             
46             map.addLayers([layer]);
47             map.zoomToMaxExtent();
48             
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());
52             
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);
57             
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)
71                     )
72                 );
73             }
74           
75             layer.addFeatures(orderingFeatures);
76             
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 
79             // precedence.
80             var indexFeatures = [];
81             var useFirst = true;
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)
86                 );
87                 
88                 // This is where the magic happens. We override the style on the layer
89                 // to give our own style with alternativing z-indexes.
90                 point.style = {
91                     graphicZIndex: useFirst ? FIRST_RED_Z_INDEX : SECOND_RED_Z_INDEX,
92                     externalGraphic: "../img/marker.png",
93                     pointRadius: 10
94                 }
95                 
96                 indexFeatures.push(
97                     point
98                 );
99                 
100                 left.x += POINT_DISTANCE;
101                 useFirst = !useFirst;
102             }
103             
104             layer.addFeatures(indexFeatures);
105         }
106         
107         function initDrawingOrderMap() {
108             var map = new OpenLayers.Map("drawingorder");
109             
110             var layer = new OpenLayers.Layer.Vector(
111                 "Drawing Order",
112                 {
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",
117                         pointRadius: 10
118                     }),
119                     isBaseLayer: true,
120                     // enable the indexer by setting zIndexing to true
121                     rendererOptions: {zIndexing: true}
122                 }
123             );
124             
125             map.addLayers([layer]);
126             map.zoomToMaxExtent();
127             
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());
131             
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);
136             
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
148                         {zIndex: 0}
149                     )
150                 );
151                 bottom.y -= POINT_DISTANCE / 2; // Divide by 2 for better visual.
152                 left.x += POINT_DISTANCE / 2;
153             }
154             // only the first feature gets a zIndex attribute of 1
155             orderingFeatures[0].attributes.zIndex = 1;
156           
157             layer.addFeatures(orderingFeatures);
158         }
159
160         function init(){
161             initYOrderMap();
162             initDrawingOrderMap();
163         };
164         
165     </script>
166   </head>
167   <body onload="init()">
168         <h1 id="title">Z-Index/Y-Order Example</h1>
169
170         <div id="tags">
171         </div>
172
173         <p id="shortdesc">
174            This example shows the use of z-indexing and y-ordering of external graphics. Zoom in and out to see this behavior.
175         </p>
176
177         <h3>Z-Index (with Y-Ordering enabled)</h3>
178         <table>
179             <tr>
180                 <td>
181                     <div id="yorder" class="smallmap"></div>
182                 </td>
183                 <td>
184                     <div class="docs">
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).
186                         <br><br>
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.
188                     </div>
189                 </td>
190             </tr>
191         </table>
192         <br>
193         <h3>Z-Index and Drawing Order (Z-Indexes set, and Y-Ordering disabled)</h3>
194         <table>
195             <tr>
196                 <td>
197                     <div id="drawingorder" class="smallmap"></div>
198                 </td>
199                 <td>
200                     <div class="docs">
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.
202                         <br><br>
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).
204                     </div>
205                 </td>
206             </tr>
207         </table>
208         
209         
210     </body>
211 </html>