public/lib/OpenLayers/Control/MouseToolbar.js

   1 /* Copyright (c) 2006 MetaCarta, Inc., published under the BSD license.
   2  * See http://svn.openlayers.org/trunk/openlayers/license.txt for the full
   3  * text of the license. */
   4 // @require: OpenLayers/Control.js
   5 OpenLayers.Control.MouseToolbar = Class.create();
   6 OpenLayers.Control.MouseToolbar.X = 6;
   7 OpenLayers.Control.MouseToolbar.Y = 300;
   8 OpenLayers.Control.MouseToolbar.prototype =
   9   Object.extend( new OpenLayers.Control(), {
  10
  11     mode: null,
  12
  13     buttons: null,
  14
  15     direction: "vertical",
  16
  17     initialize: function(position, direction) {
  18         OpenLayers.Control.prototype.initialize.apply(this, arguments);
  19         this.position = new OpenLayers.Pixel(OpenLayers.Control.MouseToolbar.X,
  20                                              OpenLayers.Control.MouseToolbar.Y);
  21         if (position) {
  22             this.position = position;
  23         }
  24         if (direction) {
  25             this.direction = direction;
  26         }
  27         this.measureDivs = [];
  28     },
  29
  30     draw: function() {
  31         OpenLayers.Control.prototype.draw.apply(this, arguments);
  32         this.buttons = new Object();
  33         this.map.events.register( "dblclick", this, this.defaultDblClick );
  34         this.map.events.register( "mousedown", this, this.defaultMouseDown );
  35         this.map.events.register( "mouseup", this, this.defaultMouseUp );
  36         this.map.events.register( "mousemove", this, this.defaultMouseMove );
  37         this.map.events.register( "mouseout", this, this.defaultMouseOut );
  38         var sz = new OpenLayers.Size(28,28);
  39         var centered = this.position;
  40         this._addButton("zoombox", "drag-rectangle-off.png", "drag-rectangle-on.png", centered, sz, "Shift->Drag to zoom to area");
  41         centered = centered.add((this.direction == "vertical" ? 0 : sz.w), (this.direction == "vertical" ? sz.h : 0));
  42         this._addButton("pan", "panning-hand-off.png", "panning-hand-on.png", centered, sz, "Drag the map to pan.");
  43         centered = centered.add((this.direction == "vertical" ? 0 : sz.w), (this.direction == "vertical" ? sz.h : 0));
  44         this._addButton("measure", "measuring-stick-off.png", "measuring-stick-on.png", centered, sz, "Hold alt when clicking to show distance between selected points");
  45         this.switchModeTo("pan");
  46         this.map.events.register("zoomend", this, function() { this.switchModeTo("pan"); });
  47         return this.div;
  48
  49     },
  50
  51     _addButton:function(id, img, activeImg, xy, sz, title) {
  52         var imgLocation = OpenLayers.Util.getImagesLocation() + img;
  53         var activeImgLocation = OpenLayers.Util.getImagesLocation() + activeImg;
  54         // var btn = new ol.AlphaImage("_"+id, imgLocation, xy, sz);
  55         var btn = OpenLayers.Util.createAlphaImageDiv(
  56                                     "OpenLayers_Control_MouseToolbar_" + id,
  57                                     xy, sz, imgLocation, "absolute");
  58
  59         //we want to add the outer div
  60         this.div.appendChild(btn);
  61         btn.imgLocation = imgLocation;
  62         btn.activeImgLocation = activeImgLocation;
  63
  64         btn.events = new OpenLayers.Events(this, btn);
  65         btn.events.register("mousedown", this, this.buttonClick);
  66         btn.events.register("mouseup", this, Event.stop);
  67         btn.action = id;
  68         btn.title = title;
  69         btn.alt = title;
  70         btn.map = this.map;
  71
  72         //we want to remember/reference the outer div
  73         this.buttons[id] = btn;
  74         return btn;
  75     },
  76
  77     buttonClick: function(evt) {
  78         if (!Event.isLeftClick(evt)) return;
  79         this.switchModeTo(evt.div.action);
  80         Event.stop(evt);
  81     },
  82
  83     /**
  84     * @param {Event} evt
  85     */
  86     defaultDblClick: function (evt) {
  87         this.switchModeTo("pan");
  88         var newCenter = this.map.getLonLatFromViewPortPx( evt.xy );
  89         this.map.setCenter(newCenter, this.map.zoom + 2);
  90     },
  91
  92     /**
  93     * @param {Event} evt
  94     */
  95     defaultMouseDown: function (evt) {
  96         if (!Event.isLeftClick(evt)) return;
  97         this.mouseDragStart = evt.xy.copyOf();
  98         if (evt.shiftKey && this.mode !="zoombox") {
  99             this.switchModeTo("zoombox");
 100         } else if (evt.altKey && this.mode !="measure") {
 101             this.switchModeTo("measure");
 102         } else if (!this.mode) {
 103             this.switchModeTo("pan");
 104         }
 105
 106         switch (this.mode) {
 107             case "zoombox":
 108                 this.map.div.style.cursor = "crosshair";
 109                 this.zoomBox = OpenLayers.Util.createDiv('zoomBox',
 110                                                          this.mouseDragStart,
 111                                                          null,
 112                                                          null,
 113                                                          "absolute",
 114                                                          "2px solid red");
 115                 this.zoomBox.style.backgroundColor = "white";
 116                 this.zoomBox.style.filter = "alpha(opacity=50)"; // IE
 117                 this.zoomBox.style.opacity = "0.50";
 118                 this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
 119                 this.map.viewPortDiv.appendChild(this.zoomBox);
 120                 break;
 121             case "measure":
 122                 var distance = "";
 123                 if (this.measureStart) {
 124                     measureEnd = this.map.getLonLatFromViewPortPx(this.mouseDragStart);
 125                     distance = OpenLayers.Util.distVincenty(this.measureStart, measureEnd);
 126                     distance = Math.round(distance * 100) / 100;
 127                     distance = distance + "km";
 128                     this.measureStartBox = this.measureBox;
 129                 }
 130                 this.measureStart = this.map.getLonLatFromViewPortPx(this.mouseDragStart);;
 131                 this.measureBox = OpenLayers.Util.createDiv(null,
 132                                                          this.mouseDragStart.add(
 133                                                            -2-parseInt(this.map.layerContainerDiv.style.left),
 134                                                            -2-parseInt(this.map.layerContainerDiv.style.top)),
 135                                                          null,
 136                                                          null,
 137                                                          "absolute");
 138                 this.measureBox.style.width="4px";
 139                 this.measureBox.style.height="4px";
 140                 this.measureBox.style.backgroundColor="red";
 141                 this.measureBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
 142                 this.map.layerContainerDiv.appendChild(this.measureBox);
 143                 if (distance) {
 144                     this.measureBoxDistance = OpenLayers.Util.createDiv(null,
 145                                                          this.mouseDragStart.add(
 146                                                            -2-parseInt(this.map.layerContainerDiv.style.left),
 147                                                            2-parseInt(this.map.layerContainerDiv.style.top)),
 148                                                          null,
 149                                                          null,
 150                                                          "absolute");
 151
 152                     this.measureBoxDistance.innerHTML = distance;
 153                     this.measureBoxDistance.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
 154                     this.map.layerContainerDiv.appendChild(this.measureBoxDistance);
 155                     this.measureDivs.append(this.measureBoxDistance);
 156                 }
 157                 this.measureBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
 158                 this.map.layerContainerDiv.appendChild(this.measureBox);
 159                 this.measureDivs.append(this.measureBox);
 160                 break;
 161             default:
 162                 this.map.div.style.cursor = "move";
 163                 break;
 164         }
 165         document.onselectstart = function() { return false; }
 166         Event.stop(evt);
 167     },
 168
 169     switchModeTo: function(mode) {
 170         if (mode != this.mode) {
 171             if (this.mode) {
 172                 OpenLayers.Util.modifyAlphaImageDiv(this.buttons[this.mode], null, null, null, this.buttons[this.mode].imgLocation);
 173             }
 174             if (this.mode == "measure" && mode != "measure") {
 175                 for(var i = 0; i < this.measureDivs.length; i++) {
 176                     if (this.measureDivs[i]) {
 177                         this.map.layerContainerDiv.removeChild(this.measureDivs[i]);
 178                     }
 179                 }
 180                 this.measureDivs = [];
 181                 this.measureStart = null;
 182             }
 183             this.mode = mode;
 184             OpenLayers.Util.modifyAlphaImageDiv(this.buttons[mode], null, null, null, this.buttons[mode].activeImgLocation);
 185         }
 186     },
 187
 188     leaveMode: function() {
 189         this.switchModeTo("pan");
 190     },
 191
 192     /**
 193     * @param {Event} evt
 194     */
 195     defaultMouseMove: function (evt) {
 196         if (this.mouseDragStart != null) {
 197             switch (this.mode) {
 198                 case "zoombox":
 199                     var deltaX = Math.abs(this.mouseDragStart.x - evt.xy.x);
 200                     var deltaY = Math.abs(this.mouseDragStart.y - evt.xy.y);
 201                     this.zoomBox.style.width = deltaX+"px";
 202                     this.zoomBox.style.height = deltaY+"px";
 203                     if (evt.xy.x < this.mouseDragStart.x) {
 204                         this.zoomBox.style.left = evt.xy.x+"px";
 205                     }
 206                     if (evt.xy.y < this.mouseDragStart.y) {
 207                         this.zoomBox.style.top = evt.xy.y+"px";
 208                     }
 209                     break;
 210                 default:
 211                     var deltaX = this.mouseDragStart.x - evt.xy.x;
 212                     var deltaY = this.mouseDragStart.y - evt.xy.y;
 213                     var size = this.map.getSize();
 214                     var newXY = new OpenLayers.Pixel(size.w / 2 + deltaX,
 215                                                      size.h / 2 + deltaY);
 216                     var newCenter = this.map.getLonLatFromViewPortPx( newXY );
 217                     this.map.setCenter(newCenter, null, true);
 218                     this.mouseDragStart = evt.xy.copyOf();
 219             }
 220         }
 221     },
 222
 223     /**
 224     * @param {Event} evt
 225     */
 226     defaultMouseUp: function (evt) {
 227         if (!Event.isLeftClick(evt)) return;
 228         switch (this.mode) {
 229             case "zoombox":
 230                 var start = this.map.getLonLatFromViewPortPx( this.mouseDragStart );
 231                 var end = this.map.getLonLatFromViewPortPx( evt.xy );
 232                 var top = Math.max(start.lat, end.lat);
 233                 var bottom = Math.min(start.lat, end.lat);
 234                 var left = Math.min(start.lon, end.lon);
 235                 var right = Math.max(start.lon, end.lon);
 236                 var bounds = new OpenLayers.Bounds(left, bottom, right, top);
 237                 var zoom = this.map.getZoomForExtent(bounds);
 238                 this.map.setCenter(new OpenLayers.LonLat(
 239                   (start.lon + end.lon) / 2,
 240                   (start.lat + end.lat) / 2
 241                  ), zoom);
 242                 this.map.viewPortDiv.removeChild(document.getElementById("zoomBox"));
 243                 this.zoomBox = null;
 244                 this.leaveMode();
 245                 break;
 246             case "pan":
 247                 this.map.setCenter(this.map.center);
 248
 249         }
 250         document.onselectstart = null;
 251         this.mouseDragStart = null;
 252         this.map.div.style.cursor = "default";
 253     },
 254
 255     defaultMouseOut: function (evt) {
 256         if (this.mouseDragStart != null
 257             && OpenLayers.Util.mouseLeft(evt, this.map.div)) {
 258                 this.defaultMouseUp(evt);
 259         }
 260     }
 261 });
 262