356 lines
9.9 KiB
JavaScript
356 lines
9.9 KiB
JavaScript
/* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for
|
|
* full list of contributors). Published under the 2-clause BSD license.
|
|
* See license.txt in the OpenLayers distribution or repository for the
|
|
* full text of the license. */
|
|
|
|
|
|
/**
|
|
* @requires OpenLayers/Control/PanZoom.js
|
|
*/
|
|
|
|
/**
|
|
* Class: OpenLayers.Control.PanZoomBar
|
|
* The PanZoomBar is a visible control composed of a
|
|
* <OpenLayers.Control.PanPanel> and a <OpenLayers.Control.ZoomBar>.
|
|
* By default it is displayed in the upper left corner of the map as 4
|
|
* directional arrows above a vertical slider.
|
|
*
|
|
* Inherits from:
|
|
* - <OpenLayers.Control.PanZoom>
|
|
*/
|
|
OpenLayers.Control.SimplePanZoom = OpenLayers.Class(OpenLayers.Control.PanZoom, {
|
|
|
|
/**
|
|
* APIProperty: zoomStopWidth
|
|
*/
|
|
zoomStopWidth: 18,
|
|
|
|
/**
|
|
* APIProperty: zoomStopHeight
|
|
*/
|
|
zoomStopHeight: 7,
|
|
|
|
/**
|
|
* Property: slider
|
|
*/
|
|
slider: null,
|
|
|
|
/**
|
|
* Property: sliderEvents
|
|
* {<OpenLayers.Events>}
|
|
*/
|
|
sliderEvents: null,
|
|
|
|
/**
|
|
* Property: zoombarDiv
|
|
* {DOMElement}
|
|
*/
|
|
zoombarDiv: null,
|
|
|
|
/**
|
|
* APIProperty: zoomWorldIcon
|
|
* {Boolean}
|
|
*/
|
|
zoomWorldIcon: false,
|
|
|
|
/**
|
|
* APIProperty: panIcons
|
|
* {Boolean} Set this property to false not to display the pan icons. If
|
|
* false the zoom world icon is placed under the zoom bar. Defaults to
|
|
* true.
|
|
*/
|
|
panIcons: true,
|
|
|
|
/**
|
|
* APIProperty: forceFixedZoomLevel
|
|
* {Boolean} Force a fixed zoom level even though the map has
|
|
* fractionalZoom
|
|
*/
|
|
forceFixedZoomLevel: false,
|
|
|
|
/**
|
|
* Property: mouseDragStart
|
|
* {<OpenLayers.Pixel>}
|
|
*/
|
|
mouseDragStart: null,
|
|
|
|
/**
|
|
* Property: deltaY
|
|
* {Number} The cumulative vertical pixel offset during a zoom bar drag.
|
|
*/
|
|
deltaY: null,
|
|
|
|
/**
|
|
* Property: zoomStart
|
|
* {<OpenLayers.Pixel>}
|
|
*/
|
|
zoomStart: null,
|
|
|
|
/**
|
|
* Constructor: OpenLayers.Control.PanZoomBar
|
|
*/
|
|
buttons: null,
|
|
|
|
/**
|
|
* APIMethod: destroy
|
|
*/
|
|
destroy: function() {
|
|
|
|
this._removeZoomBar();
|
|
|
|
this.map.events.un({
|
|
"changebaselayer": this.redraw,
|
|
"updatesize": this.redraw,
|
|
scope: this
|
|
});
|
|
|
|
OpenLayers.Control.PanZoom.prototype.destroy.apply(this, arguments);
|
|
|
|
delete this.mouseDragStart;
|
|
delete this.zoomStart;
|
|
},
|
|
|
|
/**
|
|
* Method: setMap
|
|
*
|
|
* Parameters:
|
|
* map - {<OpenLayers.Map>}
|
|
*/
|
|
setMap: function(map) {
|
|
OpenLayers.Control.PanZoom.prototype.setMap.apply(this, arguments);
|
|
this.map.events.on({
|
|
"changebaselayer": this.redraw,
|
|
"updatesize": this.redraw,
|
|
scope: this
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Method: redraw
|
|
* clear the div and start over.
|
|
*/
|
|
redraw: function() {
|
|
if (this.div !== null) {
|
|
this.removeButtons();
|
|
this._removeZoomBar();
|
|
}
|
|
this.draw();
|
|
this.moveZoomBar();
|
|
},
|
|
|
|
/**
|
|
* Method: draw
|
|
*
|
|
* Parameters:
|
|
* px - {<OpenLayers.Pixel>}
|
|
*/
|
|
draw: function(px) {
|
|
// initialize our internal div
|
|
OpenLayers.Control.prototype.draw.apply(this, arguments);
|
|
px = this.position.clone();
|
|
|
|
// place the controls
|
|
this.buttons = [];
|
|
var ids = ['panup', 'panleft', 'panright', 'pandown', 'zoomout', 'zoomin'];
|
|
|
|
for (var i = 0; i < ids.length; i++) {
|
|
var b = document.createElement('div');
|
|
b.id = ids[i];
|
|
b.action = ids[i];
|
|
b.className = 'button olButton';
|
|
this.div.appendChild(b);
|
|
this.buttons.push(b);
|
|
}
|
|
|
|
this._addZoomBar();
|
|
return this.div;
|
|
},
|
|
|
|
/**
|
|
* Method: _addZoomBar
|
|
*
|
|
* Parameters:
|
|
* centered - {<OpenLayers.Pixel>} where zoombar drawing is to start.
|
|
*/
|
|
_addZoomBar:function() {
|
|
var id = this.id + "_" + this.map.id;
|
|
var zoomsToEnd = this.map.getNumZoomLevels() - 1 - this.map.getZoom();
|
|
var slider = document.createElement('div');
|
|
slider.id = 'slider';
|
|
slider.className = 'button';
|
|
slider.style.cursor = 'move';
|
|
this.slider = slider;
|
|
|
|
this.sliderEvents = new OpenLayers.Events(this, slider, null, true,
|
|
{ includeXY: true });
|
|
this.sliderEvents.on({
|
|
"touchstart": this.zoomBarDown,
|
|
"touchmove": this.zoomBarDrag,
|
|
"touchend": this.zoomBarUp,
|
|
"mousedown": this.zoomBarDown,
|
|
"mousemove": this.zoomBarDrag,
|
|
"mouseup": this.zoomBarUp
|
|
});
|
|
|
|
var height = this.zoomStopHeight * (this.map.getNumZoomLevels());
|
|
|
|
// this is the background image
|
|
var div = document.createElement('div');
|
|
div.className = 'button olButton';
|
|
div.id = 'zoombar';
|
|
this.zoombarDiv = div;
|
|
|
|
this.div.appendChild(div);
|
|
this.startTop = 75;
|
|
this.div.appendChild(slider);
|
|
|
|
this.map.events.register("zoomend", this, this.moveZoomBar);
|
|
},
|
|
|
|
/**
|
|
* Method: _removeZoomBar
|
|
*/
|
|
_removeZoomBar: function() {
|
|
this.sliderEvents.un({
|
|
"touchstart": this.zoomBarDown,
|
|
"touchmove": this.zoomBarDrag,
|
|
"touchend": this.zoomBarUp,
|
|
"mousedown": this.zoomBarDown,
|
|
"mousemove": this.zoomBarDrag,
|
|
"mouseup": this.zoomBarUp
|
|
});
|
|
this.sliderEvents.destroy();
|
|
|
|
this.div.removeChild(this.zoombarDiv);
|
|
this.zoombarDiv = null;
|
|
this.div.removeChild(this.slider);
|
|
this.slider = null;
|
|
|
|
this.map.events.unregister("zoomend", this, this.moveZoomBar);
|
|
},
|
|
|
|
/**
|
|
* Method: onButtonClick
|
|
*
|
|
* Parameters:
|
|
* evt - {Event}
|
|
*/
|
|
onButtonClick: function(evt) {
|
|
OpenLayers.Control.PanZoom.prototype.onButtonClick.apply(this, arguments);
|
|
if (evt.buttonElement === this.zoombarDiv) {
|
|
var levels = evt.buttonXY.y / this.zoomStopHeight;
|
|
if (this.forceFixedZoomLevel || !this.map.fractionalZoom) {
|
|
levels = Math.floor(levels);
|
|
}
|
|
var zoom = (this.map.getNumZoomLevels() - 1) - levels;
|
|
zoom = Math.min(Math.max(zoom, 0), this.map.getNumZoomLevels() - 1);
|
|
this.map.zoomTo(zoom);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method: passEventToSlider
|
|
* This function is used to pass events that happen on the div, or the map,
|
|
* through to the slider, which then does its moving thing.
|
|
*
|
|
* Parameters:
|
|
* evt - {<OpenLayers.Event>}
|
|
*/
|
|
passEventToSlider:function(evt) {
|
|
this.sliderEvents.handleBrowserEvent(evt);
|
|
},
|
|
|
|
/*
|
|
* Method: zoomBarDown
|
|
* event listener for clicks on the slider
|
|
*
|
|
* Parameters:
|
|
* evt - {<OpenLayers.Event>}
|
|
*/
|
|
zoomBarDown:function(evt) {
|
|
if (!OpenLayers.Event.isLeftClick(evt) && !OpenLayers.Event.isSingleTouch(evt)) {
|
|
return;
|
|
}
|
|
this.map.events.on({
|
|
"touchmove": this.passEventToSlider,
|
|
"mousemove": this.passEventToSlider,
|
|
"mouseup": this.passEventToSlider,
|
|
scope: this
|
|
});
|
|
this.mouseDragStart = evt.xy.clone();
|
|
this.zoomStart = evt.xy.clone();
|
|
this.div.style.cursor = "move";
|
|
// reset the div offsets just in case the div moved
|
|
this.zoombarDiv.offsets = null;
|
|
OpenLayers.Event.stop(evt);
|
|
},
|
|
|
|
/*
|
|
* Method: zoomBarDrag
|
|
* This is what happens when a click has occurred, and the client is
|
|
* dragging. Here we must ensure that the slider doesn't go beyond the
|
|
* bottom/top of the zoombar div, as well as moving the slider to its new
|
|
* visual location
|
|
*
|
|
* Parameters:
|
|
* evt - {<OpenLayers.Event>}
|
|
*/
|
|
zoomBarDrag: function(evt) {
|
|
if (this.mouseDragStart !== null) {
|
|
var deltaY = this.mouseDragStart.y - evt.xy.y;
|
|
var offsets = OpenLayers.Util.pagePosition(this.zoombarDiv);
|
|
if ((evt.clientY - offsets[1]) > 0 &&
|
|
(evt.clientY - offsets[1]) < 140) {
|
|
var newTop = parseInt(this.slider.style.top, 10) - deltaY;
|
|
this.slider.style.top = newTop + "px";
|
|
this.mouseDragStart = evt.xy.clone();
|
|
}
|
|
// set cumulative displacement
|
|
this.deltaY = this.zoomStart.y - evt.xy.y;
|
|
OpenLayers.Event.stop(evt);
|
|
}
|
|
},
|
|
|
|
/*
|
|
* Method: zoomBarUp
|
|
* Perform cleanup when a mouseup event is received -- discover new zoom
|
|
* level and switch to it.
|
|
*
|
|
* Parameters:
|
|
* evt - {<OpenLayers.Event>}
|
|
*/
|
|
zoomBarUp: function(evt) {
|
|
if (!OpenLayers.Event.isLeftClick(evt) && evt.type !== "touchend") {
|
|
return;
|
|
}
|
|
if (this.mouseDragStart) {
|
|
this.div.style.cursor = "";
|
|
this.map.events.un({
|
|
"touchmove": this.passEventToSlider,
|
|
"mouseup": this.passEventToSlider,
|
|
"mousemove": this.passEventToSlider,
|
|
scope: this
|
|
});
|
|
var zoomLevel = this.map.zoom;
|
|
zoomLevel += this.deltaY/this.zoomStopHeight;
|
|
zoomLevel = Math.max(Math.round(zoomLevel), 0);
|
|
this.map.zoomTo(zoomLevel);
|
|
this.mouseDragStart = null;
|
|
this.zoomStart = null;
|
|
this.deltaY = 0;
|
|
OpenLayers.Event.stop(evt);
|
|
}
|
|
},
|
|
|
|
/*
|
|
* Method: moveZoomBar
|
|
* Change the location of the slider to match the current zoom level.
|
|
*/
|
|
moveZoomBar:function() {
|
|
var newTop =
|
|
((this.map.getNumZoomLevels()-1) - this.map.getZoom()) *
|
|
this.zoomStopHeight + this.startTop;
|
|
this.slider.style.top = newTop + "px";
|
|
},
|
|
CLASS_NAME: "OpenLayers.Control.SimplePanZoom"
|
|
});
|