1 | /* Copyright (c) 2006-2010 by OpenLayers Contributors (see authors.txt for |
---|
2 | * full list of contributors). Published under the Clear BSD license. |
---|
3 | * See http://svn.openlayers.org/trunk/openlayers/license.txt for the |
---|
4 | * full text of the license. */ |
---|
5 | |
---|
6 | |
---|
7 | /** |
---|
8 | * @requires OpenLayers/Control/PanZoom.js |
---|
9 | */ |
---|
10 | |
---|
11 | /** |
---|
12 | * Class: OpenLayers.Control.PanZoomBar |
---|
13 | * The PanZoomBar is a visible control composed of a |
---|
14 | * <OpenLayers.Control.PanPanel> and a <OpenLayers.Control.ZoomBar>. |
---|
15 | * By default it is displayed in the upper left corner of the map as 4 |
---|
16 | * directional arrows above a vertical slider. |
---|
17 | * |
---|
18 | * Inherits from: |
---|
19 | * - <OpenLayers.Control.PanZoom> |
---|
20 | */ |
---|
21 | OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, { |
---|
22 | |
---|
23 | /** |
---|
24 | * APIProperty: zoomStopWidth |
---|
25 | */ |
---|
26 | zoomStopWidth: 18, |
---|
27 | |
---|
28 | /** |
---|
29 | * APIProperty: zoomStopHeight |
---|
30 | */ |
---|
31 | zoomStopHeight: 11, |
---|
32 | |
---|
33 | /** |
---|
34 | * Property: slider |
---|
35 | */ |
---|
36 | slider: null, |
---|
37 | |
---|
38 | /** |
---|
39 | * Property: sliderEvents |
---|
40 | * {<OpenLayers.Events>} |
---|
41 | */ |
---|
42 | sliderEvents: null, |
---|
43 | |
---|
44 | /** |
---|
45 | * Property: zoombarDiv |
---|
46 | * {DOMElement} |
---|
47 | */ |
---|
48 | zoombarDiv: null, |
---|
49 | |
---|
50 | /** |
---|
51 | * Property: divEvents |
---|
52 | * {<OpenLayers.Events>} |
---|
53 | */ |
---|
54 | divEvents: null, |
---|
55 | |
---|
56 | /** |
---|
57 | * APIProperty: zoomWorldIcon |
---|
58 | * {Boolean} |
---|
59 | */ |
---|
60 | zoomWorldIcon: false, |
---|
61 | |
---|
62 | /** |
---|
63 | * APIProperty: forceFixedZoomLevel |
---|
64 | * {Boolean} Force a fixed zoom level even though the map has |
---|
65 | * fractionalZoom |
---|
66 | */ |
---|
67 | forceFixedZoomLevel: false, |
---|
68 | |
---|
69 | /** |
---|
70 | * Property: mouseDragStart |
---|
71 | * {<OpenLayers.Pixel>} |
---|
72 | */ |
---|
73 | mouseDragStart: null, |
---|
74 | |
---|
75 | /** |
---|
76 | * Property: zoomStart |
---|
77 | * {<OpenLayers.Pixel>} |
---|
78 | */ |
---|
79 | zoomStart: null, |
---|
80 | |
---|
81 | /** |
---|
82 | * Constructor: OpenLayers.Control.PanZoomBar |
---|
83 | */ |
---|
84 | initialize: function() { |
---|
85 | OpenLayers.Control.PanZoom.prototype.initialize.apply(this, arguments); |
---|
86 | }, |
---|
87 | |
---|
88 | /** |
---|
89 | * APIMethod: destroy |
---|
90 | */ |
---|
91 | destroy: function() { |
---|
92 | |
---|
93 | this._removeZoomBar(); |
---|
94 | |
---|
95 | this.map.events.un({ |
---|
96 | "changebaselayer": this.redraw, |
---|
97 | scope: this |
---|
98 | }); |
---|
99 | |
---|
100 | OpenLayers.Control.PanZoom.prototype.destroy.apply(this, arguments); |
---|
101 | |
---|
102 | delete this.mouseDragStart; |
---|
103 | delete this.zoomStart; |
---|
104 | }, |
---|
105 | |
---|
106 | /** |
---|
107 | * Method: setMap |
---|
108 | * |
---|
109 | * Parameters: |
---|
110 | * map - {<OpenLayers.Map>} |
---|
111 | */ |
---|
112 | setMap: function(map) { |
---|
113 | OpenLayers.Control.PanZoom.prototype.setMap.apply(this, arguments); |
---|
114 | this.map.events.register("changebaselayer", this, this.redraw); |
---|
115 | }, |
---|
116 | |
---|
117 | /** |
---|
118 | * Method: redraw |
---|
119 | * clear the div and start over. |
---|
120 | */ |
---|
121 | redraw: function() { |
---|
122 | if (this.div != null) { |
---|
123 | this.removeButtons(); |
---|
124 | this._removeZoomBar(); |
---|
125 | } |
---|
126 | this.draw(); |
---|
127 | }, |
---|
128 | |
---|
129 | /** |
---|
130 | * Method: draw |
---|
131 | * |
---|
132 | * Parameters: |
---|
133 | * px - {<OpenLayers.Pixel>} |
---|
134 | */ |
---|
135 | draw: function(px) { |
---|
136 | // initialize our internal div |
---|
137 | OpenLayers.Control.prototype.draw.apply(this, arguments); |
---|
138 | px = this.position.clone(); |
---|
139 | |
---|
140 | // place the controls |
---|
141 | this.buttons = []; |
---|
142 | |
---|
143 | var sz = new OpenLayers.Size(18,18); |
---|
144 | var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y); |
---|
145 | var wposition = sz.w; |
---|
146 | |
---|
147 | if (this.zoomWorldIcon) { |
---|
148 | centered = new OpenLayers.Pixel(px.x+sz.w, px.y); |
---|
149 | } |
---|
150 | |
---|
151 | this._addButton("panup", "north-mini.png", centered, sz); |
---|
152 | px.y = centered.y+sz.h; |
---|
153 | this._addButton("panleft", "west-mini.png", px, sz); |
---|
154 | if (this.zoomWorldIcon) { |
---|
155 | this._addButton("zoomworld", "zoom-world-mini.png", px.add(sz.w, 0), sz); |
---|
156 | |
---|
157 | wposition *= 2; |
---|
158 | } |
---|
159 | this._addButton("panright", "east-mini.png", px.add(wposition, 0), sz); |
---|
160 | this._addButton("pandown", "south-mini.png", centered.add(0, sz.h*2), sz); |
---|
161 | this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0, sz.h*3+5), sz); |
---|
162 | centered = this._addZoomBar(centered.add(0, sz.h*4 + 5)); |
---|
163 | this._addButton("zoomout", "zoom-minus-mini.png", centered, sz); |
---|
164 | return this.div; |
---|
165 | }, |
---|
166 | |
---|
167 | /** |
---|
168 | * Method: _addZoomBar |
---|
169 | * |
---|
170 | * Parameters: |
---|
171 | * location - {<OpenLayers.Pixel>} where zoombar drawing is to start. |
---|
172 | */ |
---|
173 | _addZoomBar:function(centered) { |
---|
174 | var imgLocation = OpenLayers.Util.getImagesLocation(); |
---|
175 | |
---|
176 | var id = this.id + "_" + this.map.id; |
---|
177 | var zoomsToEnd = this.map.getNumZoomLevels() - 1 - this.map.getZoom(); |
---|
178 | var slider = OpenLayers.Util.createAlphaImageDiv(id, |
---|
179 | centered.add(-1, zoomsToEnd * this.zoomStopHeight), |
---|
180 | new OpenLayers.Size(20,9), |
---|
181 | imgLocation+"slider.png", |
---|
182 | "absolute"); |
---|
183 | this.slider = slider; |
---|
184 | |
---|
185 | this.sliderEvents = new OpenLayers.Events(this, slider, null, true, |
---|
186 | {includeXY: true}); |
---|
187 | this.sliderEvents.on({ |
---|
188 | "mousedown": this.zoomBarDown, |
---|
189 | "mousemove": this.zoomBarDrag, |
---|
190 | "mouseup": this.zoomBarUp, |
---|
191 | "dblclick": this.doubleClick, |
---|
192 | "click": this.doubleClick |
---|
193 | }); |
---|
194 | |
---|
195 | var sz = new OpenLayers.Size(); |
---|
196 | sz.h = this.zoomStopHeight * this.map.getNumZoomLevels(); |
---|
197 | sz.w = this.zoomStopWidth; |
---|
198 | var div = null; |
---|
199 | |
---|
200 | if (OpenLayers.Util.alphaHack()) { |
---|
201 | var id = this.id + "_" + this.map.id; |
---|
202 | div = OpenLayers.Util.createAlphaImageDiv(id, centered, |
---|
203 | new OpenLayers.Size(sz.w, |
---|
204 | this.zoomStopHeight), |
---|
205 | imgLocation + "zoombar.png", |
---|
206 | "absolute", null, "crop"); |
---|
207 | div.style.height = sz.h + "px"; |
---|
208 | } else { |
---|
209 | div = OpenLayers.Util.createDiv( |
---|
210 | 'OpenLayers_Control_PanZoomBar_Zoombar' + this.map.id, |
---|
211 | centered, |
---|
212 | sz, |
---|
213 | imgLocation+"zoombar.png"); |
---|
214 | } |
---|
215 | |
---|
216 | this.zoombarDiv = div; |
---|
217 | |
---|
218 | this.divEvents = new OpenLayers.Events(this, div, null, true, |
---|
219 | {includeXY: true}); |
---|
220 | this.divEvents.on({ |
---|
221 | "mousedown": this.divClick, |
---|
222 | "mousemove": this.passEventToSlider, |
---|
223 | "dblclick": this.doubleClick, |
---|
224 | "click": this.doubleClick |
---|
225 | }); |
---|
226 | |
---|
227 | this.div.appendChild(div); |
---|
228 | |
---|
229 | this.startTop = parseInt(div.style.top); |
---|
230 | this.div.appendChild(slider); |
---|
231 | |
---|
232 | this.map.events.register("zoomend", this, this.moveZoomBar); |
---|
233 | |
---|
234 | centered = centered.add(0, |
---|
235 | this.zoomStopHeight * this.map.getNumZoomLevels()); |
---|
236 | return centered; |
---|
237 | }, |
---|
238 | |
---|
239 | /** |
---|
240 | * Method: _removeZoomBar |
---|
241 | */ |
---|
242 | _removeZoomBar: function() { |
---|
243 | this.sliderEvents.un({ |
---|
244 | "mousedown": this.zoomBarDown, |
---|
245 | "mousemove": this.zoomBarDrag, |
---|
246 | "mouseup": this.zoomBarUp, |
---|
247 | "dblclick": this.doubleClick, |
---|
248 | "click": this.doubleClick |
---|
249 | }); |
---|
250 | this.sliderEvents.destroy(); |
---|
251 | |
---|
252 | this.divEvents.un({ |
---|
253 | "mousedown": this.divClick, |
---|
254 | "mousemove": this.passEventToSlider, |
---|
255 | "dblclick": this.doubleClick, |
---|
256 | "click": this.doubleClick |
---|
257 | }); |
---|
258 | this.divEvents.destroy(); |
---|
259 | |
---|
260 | this.div.removeChild(this.zoombarDiv); |
---|
261 | this.zoombarDiv = null; |
---|
262 | this.div.removeChild(this.slider); |
---|
263 | this.slider = null; |
---|
264 | |
---|
265 | this.map.events.unregister("zoomend", this, this.moveZoomBar); |
---|
266 | }, |
---|
267 | |
---|
268 | /** |
---|
269 | * Method: passEventToSlider |
---|
270 | * This function is used to pass events that happen on the div, or the map, |
---|
271 | * through to the slider, which then does its moving thing. |
---|
272 | * |
---|
273 | * Parameters: |
---|
274 | * evt - {<OpenLayers.Event>} |
---|
275 | */ |
---|
276 | passEventToSlider:function(evt) { |
---|
277 | this.sliderEvents.handleBrowserEvent(evt); |
---|
278 | }, |
---|
279 | |
---|
280 | /** |
---|
281 | * Method: divClick |
---|
282 | * Picks up on clicks directly on the zoombar div |
---|
283 | * and sets the zoom level appropriately. |
---|
284 | */ |
---|
285 | divClick: function (evt) { |
---|
286 | if (!OpenLayers.Event.isLeftClick(evt)) { |
---|
287 | return; |
---|
288 | } |
---|
289 | var y = evt.xy.y; |
---|
290 | var top = OpenLayers.Util.pagePosition(evt.object)[1]; |
---|
291 | var levels = (y - top)/this.zoomStopHeight; |
---|
292 | if(this.forceFixedZoomLevel || !this.map.fractionalZoom) { |
---|
293 | levels = Math.floor(levels); |
---|
294 | } |
---|
295 | var zoom = (this.map.getNumZoomLevels() - 1) - levels; |
---|
296 | zoom = Math.min(Math.max(zoom, 0), this.map.getNumZoomLevels() - 1); |
---|
297 | this.map.zoomTo(zoom); |
---|
298 | OpenLayers.Event.stop(evt); |
---|
299 | }, |
---|
300 | |
---|
301 | /* |
---|
302 | * Method: zoomBarDown |
---|
303 | * event listener for clicks on the slider |
---|
304 | * |
---|
305 | * Parameters: |
---|
306 | * evt - {<OpenLayers.Event>} |
---|
307 | */ |
---|
308 | zoomBarDown:function(evt) { |
---|
309 | if (!OpenLayers.Event.isLeftClick(evt)) { |
---|
310 | return; |
---|
311 | } |
---|
312 | this.map.events.on({ |
---|
313 | "mousemove": this.passEventToSlider, |
---|
314 | "mouseup": this.passEventToSlider, |
---|
315 | scope: this |
---|
316 | }); |
---|
317 | this.mouseDragStart = evt.xy.clone(); |
---|
318 | this.zoomStart = evt.xy.clone(); |
---|
319 | this.div.style.cursor = "move"; |
---|
320 | // reset the div offsets just in case the div moved |
---|
321 | this.zoombarDiv.offsets = null; |
---|
322 | OpenLayers.Event.stop(evt); |
---|
323 | }, |
---|
324 | |
---|
325 | /* |
---|
326 | * Method: zoomBarDrag |
---|
327 | * This is what happens when a click has occurred, and the client is |
---|
328 | * dragging. Here we must ensure that the slider doesn't go beyond the |
---|
329 | * bottom/top of the zoombar div, as well as moving the slider to its new |
---|
330 | * visual location |
---|
331 | * |
---|
332 | * Parameters: |
---|
333 | * evt - {<OpenLayers.Event>} |
---|
334 | */ |
---|
335 | zoomBarDrag:function(evt) { |
---|
336 | if (this.mouseDragStart != null) { |
---|
337 | var deltaY = this.mouseDragStart.y - evt.xy.y; |
---|
338 | var offsets = OpenLayers.Util.pagePosition(this.zoombarDiv); |
---|
339 | if ((evt.clientY - offsets[1]) > 0 && |
---|
340 | (evt.clientY - offsets[1]) < parseInt(this.zoombarDiv.style.height) - 2) { |
---|
341 | var newTop = parseInt(this.slider.style.top) - deltaY; |
---|
342 | this.slider.style.top = newTop+"px"; |
---|
343 | this.mouseDragStart = evt.xy.clone(); |
---|
344 | } |
---|
345 | OpenLayers.Event.stop(evt); |
---|
346 | } |
---|
347 | }, |
---|
348 | |
---|
349 | /* |
---|
350 | * Method: zoomBarUp |
---|
351 | * Perform cleanup when a mouseup event is received -- discover new zoom |
---|
352 | * level and switch to it. |
---|
353 | * |
---|
354 | * Parameters: |
---|
355 | * evt - {<OpenLayers.Event>} |
---|
356 | */ |
---|
357 | zoomBarUp:function(evt) { |
---|
358 | if (!OpenLayers.Event.isLeftClick(evt)) { |
---|
359 | return; |
---|
360 | } |
---|
361 | if (this.mouseDragStart) { |
---|
362 | this.div.style.cursor=""; |
---|
363 | this.map.events.un({ |
---|
364 | "mouseup": this.passEventToSlider, |
---|
365 | "mousemove": this.passEventToSlider, |
---|
366 | scope: this |
---|
367 | }); |
---|
368 | var deltaY = this.zoomStart.y - evt.xy.y; |
---|
369 | var zoomLevel = this.map.zoom; |
---|
370 | if (!this.forceFixedZoomLevel && this.map.fractionalZoom) { |
---|
371 | zoomLevel += deltaY/this.zoomStopHeight; |
---|
372 | zoomLevel = Math.min(Math.max(zoomLevel, 0), |
---|
373 | this.map.getNumZoomLevels() - 1); |
---|
374 | } else { |
---|
375 | zoomLevel += Math.round(deltaY/this.zoomStopHeight); |
---|
376 | } |
---|
377 | this.map.zoomTo(zoomLevel); |
---|
378 | this.mouseDragStart = null; |
---|
379 | this.zoomStart = null; |
---|
380 | OpenLayers.Event.stop(evt); |
---|
381 | } |
---|
382 | }, |
---|
383 | |
---|
384 | /* |
---|
385 | * Method: moveZoomBar |
---|
386 | * Change the location of the slider to match the current zoom level. |
---|
387 | */ |
---|
388 | moveZoomBar:function() { |
---|
389 | var newTop = |
---|
390 | ((this.map.getNumZoomLevels()-1) - this.map.getZoom()) * |
---|
391 | this.zoomStopHeight + this.startTop + 1; |
---|
392 | this.slider.style.top = newTop + "px"; |
---|
393 | }, |
---|
394 | |
---|
395 | CLASS_NAME: "OpenLayers.Control.PanZoomBar" |
---|
396 | }); |
---|