| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246 |
- /* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
- * full list of contributors). Published under the Clear BSD license.
- * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
- * full text of the license. */
- /**
- * @requires OpenLayers/Control.js
- */
- /**
- * Class: OpenLayers.Control.PanZoom
- * The PanZoom is a visible control, composed of a
- * <OpenLayers.Control.PanPanel> and a <OpenLayers.Control.ZoomPanel>. By
- * default it is drawn in the upper left corner of the map.
- *
- * Inherits from:
- * - <OpenLayers.Control>
- */
- OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
- /**
- * APIProperty: slideFactor
- * {Integer} Number of pixels by which we'll pan the map in any direction
- * on clicking the arrow buttons. If you want to pan by some ratio
- * of the map dimensions, use <slideRatio> instead.
- */
- slideFactor: 50,
- /**
- * APIProperty: slideRatio
- * {Number} The fraction of map width/height by which we'll pan the map
- * on clicking the arrow buttons. Default is null. If set, will
- * override <slideFactor>. E.g. if slideRatio is .5, then the Pan Up
- * button will pan up half the map height.
- */
- slideRatio: null,
- /**
- * Property: buttons
- * {Array(DOMElement)} Array of Button Divs
- */
- buttons: null,
- /**
- * Property: position
- * {<OpenLayers.Pixel>}
- */
- position: null,
- /**
- * Constructor: OpenLayers.Control.PanZoom
- *
- * Parameters:
- * options - {Object}
- */
- initialize: function(options) {
- this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoom.X,
- OpenLayers.Control.PanZoom.Y);
- OpenLayers.Control.prototype.initialize.apply(this, arguments);
- },
- /**
- * APIMethod: destroy
- */
- destroy: function() {
- this.removeButtons();
- this.buttons = null;
- this.position = null;
- OpenLayers.Control.prototype.destroy.apply(this, arguments);
- },
- /**
- * Method: draw
- *
- * Parameters:
- * px - {<OpenLayers.Pixel>}
- *
- * Returns:
- * {DOMElement} A reference to the container div for the PanZoom control.
- */
- draw: function(px) {
- // initialize our internal div
- OpenLayers.Control.prototype.draw.apply(this, arguments);
- px = this.position;
- // place the controls
- this.buttons = [];
- var sz = new OpenLayers.Size(18,18);
- var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);
- this._addButton("panup", "north-mini.png", centered, sz);
- px.y = centered.y+sz.h;
- this._addButton("panleft", "west-mini.png", px, sz);
- this._addButton("panright", "east-mini.png", px.add(sz.w, 0), sz);
- this._addButton("pandown", "south-mini.png",
- centered.add(0, sz.h*2), sz);
- this._addButton("zoomin", "zoom-plus-mini.png",
- centered.add(0, sz.h*3+5), sz);
- this._addButton("zoomworld", "zoom-world-mini.png",
- centered.add(0, sz.h*4+5), sz);
- this._addButton("zoomout", "zoom-minus-mini.png",
- centered.add(0, sz.h*5+5), sz);
- return this.div;
- },
-
- /**
- * Method: _addButton
- *
- * Parameters:
- * id - {String}
- * img - {String}
- * xy - {<OpenLayers.Pixel>}
- * sz - {<OpenLayers.Size>}
- *
- * Returns:
- * {DOMElement} A Div (an alphaImageDiv, to be precise) that contains the
- * image of the button, and has all the proper event handlers set.
- */
- _addButton:function(id, img, xy, sz) {
- var imgLocation = OpenLayers.Util.getImagesLocation() + img;
- var btn = OpenLayers.Util.createAlphaImageDiv(
- this.id + "_" + id,
- xy, sz, imgLocation, "absolute");
- btn.style.cursor = "pointer";
- //we want to add the outer div
- this.div.appendChild(btn);
- OpenLayers.Event.observe(btn, "mousedown",
- OpenLayers.Function.bindAsEventListener(this.buttonDown, btn));
- OpenLayers.Event.observe(btn, "dblclick",
- OpenLayers.Function.bindAsEventListener(this.doubleClick, btn));
- OpenLayers.Event.observe(btn, "click",
- OpenLayers.Function.bindAsEventListener(this.doubleClick, btn));
- btn.action = id;
- btn.map = this.map;
-
- if(!this.slideRatio){
- var slideFactorPixels = this.slideFactor;
- var getSlideFactor = function() {
- return slideFactorPixels;
- };
- } else {
- var slideRatio = this.slideRatio;
- var getSlideFactor = function(dim) {
- return this.map.getSize()[dim] * slideRatio;
- };
- }
- btn.getSlideFactor = getSlideFactor;
- //we want to remember/reference the outer div
- this.buttons.push(btn);
- return btn;
- },
-
- /**
- * Method: _removeButton
- *
- * Parameters:
- * btn - {Object}
- */
- _removeButton: function(btn) {
- OpenLayers.Event.stopObservingElement(btn);
- btn.map = null;
- btn.getSlideFactor = null;
- this.div.removeChild(btn);
- OpenLayers.Util.removeItem(this.buttons, btn);
- },
-
- /**
- * Method: removeButtons
- */
- removeButtons: function() {
- for(var i=this.buttons.length-1; i>=0; --i) {
- this._removeButton(this.buttons[i]);
- }
- },
-
- /**
- * Method: doubleClick
- *
- * Parameters:
- * evt - {Event}
- *
- * Returns:
- * {Boolean}
- */
- doubleClick: function (evt) {
- OpenLayers.Event.stop(evt);
- return false;
- },
-
- /**
- * Method: buttonDown
- *
- * Parameters:
- * evt - {Event}
- */
- buttonDown: function (evt) {
- if (!OpenLayers.Event.isLeftClick(evt)) {
- return;
- }
- switch (this.action) {
- case "panup":
- this.map.pan(0, -this.getSlideFactor("h"));
- break;
- case "pandown":
- this.map.pan(0, this.getSlideFactor("h"));
- break;
- case "panleft":
- this.map.pan(-this.getSlideFactor("w"), 0);
- break;
- case "panright":
- this.map.pan(this.getSlideFactor("w"), 0);
- break;
- case "zoomin":
- this.map.zoomIn();
- break;
- case "zoomout":
- this.map.zoomOut();
- break;
- case "zoomworld":
- this.map.zoomToMaxExtent();
- break;
- }
- OpenLayers.Event.stop(evt);
- },
- CLASS_NAME: "OpenLayers.Control.PanZoom"
- });
- /**
- * Constant: X
- * {Integer}
- */
- OpenLayers.Control.PanZoom.X = 4;
- /**
- * Constant: Y
- * {Integer}
- */
- OpenLayers.Control.PanZoom.Y = 4;
|