1 /* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD
2 * license. See http://svn.openlayers.org/trunk/openlayers/license.txt for the
3 * full text of the license. */
7 * @requires OpenLayers/Control/PanZoom.js
11 * Class: OpenLayers.Control.PanZoomBar
12 * The PanZoomBar is a visible control composed of a
13 * <OpenLayers.Control.PanPanel> and a <OpenLayers.Control.ZoomBar>.
14 * By default it is displayed in the upper left corner of the map as 4
15 * directional arrows above a vertical slider.
18 * - <OpenLayers.Control.PanZoom>
20 OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
23 * APIProperty: zoomStopWidth
28 * APIProperty: zoomStopHeight
38 * Property: sliderEvents
39 * {<OpenLayers.Events>}
44 * Property: zoomBarDiv
51 * {<OpenLayers.Events>}
56 * APIProperty: zoomWorldIcon
62 * Constructor: OpenLayers.Control.PanZoomBar
64 initialize: function() {
65 OpenLayers.Control.PanZoom.prototype.initialize.apply(this, arguments);
73 this._removeZoomBar();
76 "changebaselayer": this.redraw,
80 OpenLayers.Control.PanZoom.prototype.destroy.apply(this, arguments);
87 * map - {<OpenLayers.Map>}
89 setMap: function(map) {
90 OpenLayers.Control.PanZoom.prototype.setMap.apply(this, arguments);
91 this.map.events.register("changebaselayer", this, this.redraw);
96 * clear the div and start over.
99 if (this.div != null) {
100 this.removeButtons();
101 this._removeZoomBar();
110 * px - {<OpenLayers.Pixel>}
113 // initialize our internal div
114 OpenLayers.Control.prototype.draw.apply(this, arguments);
115 px = this.position.clone();
117 // place the controls
120 var sz = new OpenLayers.Size(18,18);
121 var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);
122 var wposition = sz.w;
124 if (this.zoomWorldIcon) {
125 centered = new OpenLayers.Pixel(px.x+sz.w, px.y);
128 this._addButton("panup", "north-mini.png", centered, sz);
129 px.y = centered.y+sz.h;
130 this._addButton("panleft", "west-mini.png", px, sz);
131 if (this.zoomWorldIcon) {
132 this._addButton("zoomworld", "zoom-world-mini.png", px.add(sz.w, 0), sz);
136 this._addButton("panright", "east-mini.png", px.add(wposition, 0), sz);
137 this._addButton("pandown", "south-mini.png", centered.add(0, sz.h*2), sz);
138 this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0, sz.h*3+5), sz);
139 centered = this._addZoomBar(centered.add(0, sz.h*4 + 5));
140 this._addButton("zoomout", "zoom-minus-mini.png", centered, sz);
145 * Method: _addZoomBar
148 * location - {<OpenLayers.Pixel>} where zoombar drawing is to start.
150 _addZoomBar:function(centered) {
151 var imgLocation = OpenLayers.Util.getImagesLocation();
153 var id = this.id + "_" + this.map.id;
154 var zoomsToEnd = this.map.getNumZoomLevels() - 1 - this.map.getZoom();
155 var slider = OpenLayers.Util.createAlphaImageDiv(id,
156 centered.add(-1, zoomsToEnd * this.zoomStopHeight),
157 new OpenLayers.Size(20,9),
158 imgLocation+"slider.png",
160 this.slider = slider;
162 this.sliderEvents = new OpenLayers.Events(this, slider, null, true,
164 this.sliderEvents.on({
165 "mousedown": this.zoomBarDown,
166 "mousemove": this.zoomBarDrag,
167 "mouseup": this.zoomBarUp,
168 "dblclick": this.doubleClick,
169 "click": this.doubleClick
172 var sz = new OpenLayers.Size();
173 sz.h = this.zoomStopHeight * this.map.getNumZoomLevels();
174 sz.w = this.zoomStopWidth;
177 if (OpenLayers.Util.alphaHack()) {
178 var id = this.id + "_" + this.map.id;
179 div = OpenLayers.Util.createAlphaImageDiv(id, centered,
180 new OpenLayers.Size(sz.w,
181 this.zoomStopHeight),
182 imgLocation + "zoombar.png",
183 "absolute", null, "crop");
184 div.style.height = sz.h + "px";
186 div = OpenLayers.Util.createDiv(
187 'OpenLayers_Control_PanZoomBar_Zoombar' + this.map.id,
190 imgLocation+"zoombar.png");
193 this.zoombarDiv = div;
195 this.divEvents = new OpenLayers.Events(this, div, null, true,
198 "mousedown": this.divClick,
199 "mousemove": this.passEventToSlider,
200 "dblclick": this.doubleClick,
201 "click": this.doubleClick
204 this.div.appendChild(div);
206 this.startTop = parseInt(div.style.top);
207 this.div.appendChild(slider);
209 this.map.events.register("zoomend", this, this.moveZoomBar);
211 centered = centered.add(0,
212 this.zoomStopHeight * this.map.getNumZoomLevels());
217 * Method: _removeZoomBar
219 _removeZoomBar: function() {
220 this.sliderEvents.un({
221 "mousedown": this.zoomBarDown,
222 "mousemove": this.zoomBarDrag,
223 "mouseup": this.zoomBarUp,
224 "dblclick": this.doubleClick,
225 "click": this.doubleClick
227 this.sliderEvents.destroy();
230 "mousedown": this.divClick,
231 "mousemove": this.passEventToSlider,
232 "dblclick": this.doubleClick,
233 "click": this.doubleClick
235 this.divEvents.destroy();
237 this.div.removeChild(this.zoombarDiv);
238 this.zoombarDiv = null;
239 this.div.removeChild(this.slider);
242 this.map.events.unregister("zoomend", this, this.moveZoomBar);
246 * Method: passEventToSlider
247 * This function is used to pass events that happen on the div, or the map,
248 * through to the slider, which then does its moving thing.
251 * evt - {<OpenLayers.Event>}
253 passEventToSlider:function(evt) {
254 this.sliderEvents.handleBrowserEvent(evt);
259 * Picks up on clicks directly on the zoombar div
260 * and sets the zoom level appropriately.
262 divClick: function (evt) {
263 if (!OpenLayers.Event.isLeftClick(evt)) {
267 var top = OpenLayers.Util.pagePosition(evt.object)[1];
268 var levels = (y - top)/this.zoomStopHeight;
269 if(!this.map.fractionalZoom) {
270 levels = Math.floor(levels);
272 var zoom = (this.map.getNumZoomLevels() - 1) - levels;
273 zoom = Math.min(Math.max(zoom, 0), this.map.getNumZoomLevels() - 1);
274 this.map.zoomTo(zoom);
275 OpenLayers.Event.stop(evt);
279 * Method: zoomBarDown
280 * event listener for clicks on the slider
283 * evt - {<OpenLayers.Event>}
285 zoomBarDown:function(evt) {
286 if (!OpenLayers.Event.isLeftClick(evt)) {
290 "mousemove": this.passEventToSlider,
291 "mouseup": this.passEventToSlider,
294 this.mouseDragStart = evt.xy.clone();
295 this.zoomStart = evt.xy.clone();
296 this.div.style.cursor = "move";
297 // reset the div offsets just in case the div moved
298 this.zoombarDiv.offsets = null;
299 OpenLayers.Event.stop(evt);
303 * Method: zoomBarDrag
304 * This is what happens when a click has occurred, and the client is
305 * dragging. Here we must ensure that the slider doesn't go beyond the
306 * bottom/top of the zoombar div, as well as moving the slider to its new
310 * evt - {<OpenLayers.Event>}
312 zoomBarDrag:function(evt) {
313 if (this.mouseDragStart != null) {
314 var deltaY = this.mouseDragStart.y - evt.xy.y;
315 var offsets = OpenLayers.Util.pagePosition(this.zoombarDiv);
316 if ((evt.clientY - offsets[1]) > 0 &&
317 (evt.clientY - offsets[1]) < parseInt(this.zoombarDiv.style.height) - 2) {
318 var newTop = parseInt(this.slider.style.top) - deltaY;
319 this.slider.style.top = newTop+"px";
320 this.mouseDragStart = evt.xy.clone();
322 OpenLayers.Event.stop(evt);
328 * Perform cleanup when a mouseup event is received -- discover new zoom
329 * level and switch to it.
332 * evt - {<OpenLayers.Event>}
334 zoomBarUp:function(evt) {
335 if (!OpenLayers.Event.isLeftClick(evt)) {
338 if (this.zoomStart) {
339 this.div.style.cursor="";
341 "mouseup": this.passEventToSlider,
342 "mousemove": this.passEventToSlider,
345 var deltaY = this.zoomStart.y - evt.xy.y;
346 var zoomLevel = this.map.zoom;
347 if (this.map.fractionalZoom) {
348 zoomLevel += deltaY/this.zoomStopHeight;
349 zoomLevel = Math.min(Math.max(zoomLevel, 0),
350 this.map.getNumZoomLevels() - 1);
352 zoomLevel += Math.round(deltaY/this.zoomStopHeight);
354 this.map.zoomTo(zoomLevel);
356 this.mouseDragStart = null;
357 OpenLayers.Event.stop(evt);
362 * Method: moveZoomBar
363 * Change the location of the slider to match the current zoom level.
365 moveZoomBar:function() {
367 ((this.map.getNumZoomLevels()-1) - this.map.getZoom()) *
368 this.zoomStopHeight + this.startTop + 1;
369 this.slider.style.top = newTop + "px";
372 CLASS_NAME: "OpenLayers.Control.PanZoomBar"