[76] | 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 | * @requires OpenLayers/Control.js |
---|
| 8 | * @requires OpenLayers/BaseTypes.js |
---|
| 9 | * @requires OpenLayers/Events.js |
---|
| 10 | */ |
---|
| 11 | |
---|
| 12 | /** |
---|
| 13 | * Class: OpenLayers.Control.OverviewMap |
---|
| 14 | * The OverMap control creates a small overview map, useful to display the |
---|
| 15 | * extent of a zoomed map and your main map and provide additional |
---|
| 16 | * navigation options to the User. By default the overview map is drawn in |
---|
| 17 | * the lower right corner of the main map. Create a new overview map with the |
---|
| 18 | * <OpenLayers.Control.OverviewMap> constructor. |
---|
| 19 | * |
---|
| 20 | * Inerits from: |
---|
| 21 | * - <OpenLayers.Control> |
---|
| 22 | */ |
---|
| 23 | OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, { |
---|
| 24 | |
---|
| 25 | /** |
---|
| 26 | * Property: element |
---|
| 27 | * {DOMElement} The DOM element that contains the overview map |
---|
| 28 | */ |
---|
| 29 | element: null, |
---|
| 30 | |
---|
| 31 | /** |
---|
| 32 | * APIProperty: ovmap |
---|
| 33 | * {<OpenLayers.Map>} A reference to the overview map itself. |
---|
| 34 | */ |
---|
| 35 | ovmap: null, |
---|
| 36 | |
---|
| 37 | /** |
---|
| 38 | * APIProperty: size |
---|
| 39 | * {<OpenLayers.Size>} The overvew map size in pixels. Note that this is |
---|
| 40 | * the size of the map itself - the element that contains the map (default |
---|
| 41 | * class name olControlOverviewMapElement) may have padding or other style |
---|
| 42 | * attributes added via CSS. |
---|
| 43 | */ |
---|
| 44 | size: new OpenLayers.Size(180, 90), |
---|
| 45 | |
---|
| 46 | /** |
---|
| 47 | * APIProperty: layers |
---|
| 48 | * {Array(<OpenLayers.Layer>)} Ordered list of layers in the overview map. |
---|
| 49 | * If none are sent at construction, the base layer for the main map is used. |
---|
| 50 | */ |
---|
| 51 | layers: null, |
---|
| 52 | |
---|
| 53 | /** |
---|
| 54 | * APIProperty: minRectSize |
---|
| 55 | * {Integer} The minimum width or height (in pixels) of the extent |
---|
| 56 | * rectangle on the overview map. When the extent rectangle reaches |
---|
| 57 | * this size, it will be replaced depending on the value of the |
---|
| 58 | * <minRectDisplayClass> property. Default is 15 pixels. |
---|
| 59 | */ |
---|
| 60 | minRectSize: 15, |
---|
| 61 | |
---|
| 62 | /** |
---|
| 63 | * APIProperty: minRectDisplayClass |
---|
| 64 | * {String} Replacement style class name for the extent rectangle when |
---|
| 65 | * <minRectSize> is reached. This string will be suffixed on to the |
---|
| 66 | * displayClass. Default is "RectReplacement". |
---|
| 67 | * |
---|
| 68 | * Example CSS declaration: |
---|
| 69 | * (code) |
---|
| 70 | * .olControlOverviewMapRectReplacement { |
---|
| 71 | * overflow: hidden; |
---|
| 72 | * cursor: move; |
---|
| 73 | * background-image: url("img/overview_replacement.gif"); |
---|
| 74 | * background-repeat: no-repeat; |
---|
| 75 | * background-position: center; |
---|
| 76 | * } |
---|
| 77 | * (end) |
---|
| 78 | */ |
---|
| 79 | minRectDisplayClass: "RectReplacement", |
---|
| 80 | |
---|
| 81 | /** |
---|
| 82 | * APIProperty: minRatio |
---|
| 83 | * {Float} The ratio of the overview map resolution to the main map |
---|
| 84 | * resolution at which to zoom farther out on the overview map. |
---|
| 85 | */ |
---|
| 86 | minRatio: 8, |
---|
| 87 | |
---|
| 88 | /** |
---|
| 89 | * APIProperty: maxRatio |
---|
| 90 | * {Float} The ratio of the overview map resolution to the main map |
---|
| 91 | * resolution at which to zoom farther in on the overview map. |
---|
| 92 | */ |
---|
| 93 | maxRatio: 32, |
---|
| 94 | |
---|
| 95 | /** |
---|
| 96 | * APIProperty: mapOptions |
---|
| 97 | * {Object} An object containing any non-default properties to be sent to |
---|
| 98 | * the overview map's map constructor. These should include any |
---|
| 99 | * non-default options that the main map was constructed with. |
---|
| 100 | */ |
---|
| 101 | mapOptions: null, |
---|
| 102 | |
---|
| 103 | /** |
---|
| 104 | * APIProperty: autoPan |
---|
| 105 | * {Boolean} Always pan the overview map, so the extent marker remains in |
---|
| 106 | * the center. Default is false. If true, when you drag the extent |
---|
| 107 | * marker, the overview map will update itself so the marker returns |
---|
| 108 | * to the center. |
---|
| 109 | */ |
---|
| 110 | autoPan: false, |
---|
| 111 | |
---|
| 112 | /** |
---|
| 113 | * Property: handlers |
---|
| 114 | * {Object} |
---|
| 115 | */ |
---|
| 116 | handlers: null, |
---|
| 117 | |
---|
| 118 | /** |
---|
| 119 | * Property: resolutionFactor |
---|
| 120 | * {Object} |
---|
| 121 | */ |
---|
| 122 | resolutionFactor: 1, |
---|
| 123 | |
---|
| 124 | /** |
---|
| 125 | * APIProperty: maximized |
---|
| 126 | * {Boolean} Start as maximized (visible). Defaults to false. |
---|
| 127 | */ |
---|
| 128 | maximized: false, |
---|
| 129 | |
---|
| 130 | /** |
---|
| 131 | * Constructor: OpenLayers.Control.OverviewMap |
---|
| 132 | * Create a new overview map |
---|
| 133 | * |
---|
| 134 | * Parameters: |
---|
| 135 | * object - {Object} Properties of this object will be set on the overview |
---|
| 136 | * map object. Note, to set options on the map object contained in this |
---|
| 137 | * control, set <mapOptions> as one of the options properties. |
---|
| 138 | */ |
---|
| 139 | initialize: function(options) { |
---|
| 140 | this.layers = []; |
---|
| 141 | this.handlers = {}; |
---|
| 142 | OpenLayers.Control.prototype.initialize.apply(this, [options]); |
---|
| 143 | }, |
---|
| 144 | |
---|
| 145 | /** |
---|
| 146 | * APIMethod: destroy |
---|
| 147 | * Deconstruct the control |
---|
| 148 | */ |
---|
| 149 | destroy: function() { |
---|
| 150 | if (!this.mapDiv) { // we've already been destroyed |
---|
| 151 | return; |
---|
| 152 | } |
---|
| 153 | if (this.handlers.click) { |
---|
| 154 | this.handlers.click.destroy(); |
---|
| 155 | } |
---|
| 156 | if (this.handlers.drag) { |
---|
| 157 | this.handlers.drag.destroy(); |
---|
| 158 | } |
---|
| 159 | |
---|
| 160 | this.mapDiv.removeChild(this.extentRectangle); |
---|
| 161 | this.extentRectangle = null; |
---|
| 162 | |
---|
| 163 | if (this.rectEvents) { |
---|
| 164 | this.rectEvents.destroy(); |
---|
| 165 | this.rectEvents = null; |
---|
| 166 | } |
---|
| 167 | |
---|
| 168 | if (this.ovmap) { |
---|
| 169 | this.ovmap.destroy(); |
---|
| 170 | this.ovmap = null; |
---|
| 171 | } |
---|
| 172 | |
---|
| 173 | this.element.removeChild(this.mapDiv); |
---|
| 174 | this.mapDiv = null; |
---|
| 175 | |
---|
| 176 | this.div.removeChild(this.element); |
---|
| 177 | this.element = null; |
---|
| 178 | |
---|
| 179 | if (this.maximizeDiv) { |
---|
| 180 | OpenLayers.Event.stopObservingElement(this.maximizeDiv); |
---|
| 181 | this.div.removeChild(this.maximizeDiv); |
---|
| 182 | this.maximizeDiv = null; |
---|
| 183 | } |
---|
| 184 | |
---|
| 185 | if (this.minimizeDiv) { |
---|
| 186 | OpenLayers.Event.stopObservingElement(this.minimizeDiv); |
---|
| 187 | this.div.removeChild(this.minimizeDiv); |
---|
| 188 | this.minimizeDiv = null; |
---|
| 189 | } |
---|
| 190 | |
---|
| 191 | this.map.events.un({ |
---|
| 192 | "moveend": this.update, |
---|
| 193 | "changebaselayer": this.baseLayerDraw, |
---|
| 194 | scope: this |
---|
| 195 | }); |
---|
| 196 | |
---|
| 197 | OpenLayers.Control.prototype.destroy.apply(this, arguments); |
---|
| 198 | }, |
---|
| 199 | |
---|
| 200 | /** |
---|
| 201 | * Method: draw |
---|
| 202 | * Render the control in the browser. |
---|
| 203 | */ |
---|
| 204 | draw: function() { |
---|
| 205 | OpenLayers.Control.prototype.draw.apply(this, arguments); |
---|
| 206 | if(!(this.layers.length > 0)) { |
---|
| 207 | if (this.map.baseLayer) { |
---|
| 208 | var layer = this.map.baseLayer.clone(); |
---|
| 209 | this.layers = [layer]; |
---|
| 210 | } else { |
---|
| 211 | this.map.events.register("changebaselayer", this, this.baseLayerDraw); |
---|
| 212 | return this.div; |
---|
| 213 | } |
---|
| 214 | } |
---|
| 215 | |
---|
| 216 | // create overview map DOM elements |
---|
| 217 | this.element = document.createElement('div'); |
---|
| 218 | this.element.className = this.displayClass + 'Element'; |
---|
| 219 | this.element.style.display = 'none'; |
---|
| 220 | |
---|
| 221 | this.mapDiv = document.createElement('div'); |
---|
| 222 | this.mapDiv.style.width = this.size.w + 'px'; |
---|
| 223 | this.mapDiv.style.height = this.size.h + 'px'; |
---|
| 224 | this.mapDiv.style.position = 'relative'; |
---|
| 225 | this.mapDiv.style.overflow = 'hidden'; |
---|
| 226 | this.mapDiv.id = OpenLayers.Util.createUniqueID('overviewMap'); |
---|
| 227 | |
---|
| 228 | this.extentRectangle = document.createElement('div'); |
---|
| 229 | this.extentRectangle.style.position = 'absolute'; |
---|
| 230 | this.extentRectangle.style.zIndex = 1000; //HACK |
---|
| 231 | this.extentRectangle.className = this.displayClass+'ExtentRectangle'; |
---|
| 232 | this.mapDiv.appendChild(this.extentRectangle); |
---|
| 233 | |
---|
| 234 | this.element.appendChild(this.mapDiv); |
---|
| 235 | |
---|
| 236 | this.div.appendChild(this.element); |
---|
| 237 | |
---|
| 238 | // Optionally add min/max buttons if the control will go in the |
---|
| 239 | // map viewport. |
---|
| 240 | if(!this.outsideViewport) { |
---|
| 241 | this.div.className += " " + this.displayClass + 'Container'; |
---|
| 242 | var imgLocation = OpenLayers.Util.getImagesLocation(); |
---|
| 243 | // maximize button div |
---|
| 244 | var img = imgLocation + 'layer-switcher-maximize.png'; |
---|
| 245 | this.maximizeDiv = OpenLayers.Util.createAlphaImageDiv( |
---|
| 246 | this.displayClass + 'MaximizeButton', |
---|
| 247 | null, |
---|
| 248 | new OpenLayers.Size(18,18), |
---|
| 249 | img, |
---|
| 250 | 'absolute'); |
---|
| 251 | this.maximizeDiv.style.display = 'none'; |
---|
| 252 | this.maximizeDiv.className = this.displayClass + 'MaximizeButton'; |
---|
| 253 | OpenLayers.Event.observe(this.maximizeDiv, 'click', |
---|
| 254 | OpenLayers.Function.bindAsEventListener(this.maximizeControl, |
---|
| 255 | this) |
---|
| 256 | ); |
---|
| 257 | this.div.appendChild(this.maximizeDiv); |
---|
| 258 | |
---|
| 259 | // minimize button div |
---|
| 260 | var img = imgLocation + 'layer-switcher-minimize.png'; |
---|
| 261 | this.minimizeDiv = OpenLayers.Util.createAlphaImageDiv( |
---|
| 262 | 'OpenLayers_Control_minimizeDiv', |
---|
| 263 | null, |
---|
| 264 | new OpenLayers.Size(18,18), |
---|
| 265 | img, |
---|
| 266 | 'absolute'); |
---|
| 267 | this.minimizeDiv.style.display = 'none'; |
---|
| 268 | this.minimizeDiv.className = this.displayClass + 'MinimizeButton'; |
---|
| 269 | OpenLayers.Event.observe(this.minimizeDiv, 'click', |
---|
| 270 | OpenLayers.Function.bindAsEventListener(this.minimizeControl, |
---|
| 271 | this) |
---|
| 272 | ); |
---|
| 273 | this.div.appendChild(this.minimizeDiv); |
---|
| 274 | |
---|
| 275 | var eventsToStop = ['dblclick','mousedown']; |
---|
| 276 | |
---|
| 277 | for (var i=0, len=eventsToStop.length; i<len; i++) { |
---|
| 278 | |
---|
| 279 | OpenLayers.Event.observe(this.maximizeDiv, |
---|
| 280 | eventsToStop[i], |
---|
| 281 | OpenLayers.Event.stop); |
---|
| 282 | |
---|
| 283 | OpenLayers.Event.observe(this.minimizeDiv, |
---|
| 284 | eventsToStop[i], |
---|
| 285 | OpenLayers.Event.stop); |
---|
| 286 | } |
---|
| 287 | |
---|
| 288 | this.minimizeControl(); |
---|
| 289 | } else { |
---|
| 290 | // show the overview map |
---|
| 291 | this.element.style.display = ''; |
---|
| 292 | } |
---|
| 293 | if(this.map.getExtent()) { |
---|
| 294 | this.update(); |
---|
| 295 | } |
---|
| 296 | |
---|
| 297 | this.map.events.register('moveend', this, this.update); |
---|
| 298 | |
---|
| 299 | if (this.maximized) { |
---|
| 300 | this.maximizeControl(); |
---|
| 301 | } |
---|
| 302 | return this.div; |
---|
| 303 | }, |
---|
| 304 | |
---|
| 305 | /** |
---|
| 306 | * Method: baseLayerDraw |
---|
| 307 | * Draw the base layer - called if unable to complete in the initial draw |
---|
| 308 | */ |
---|
| 309 | baseLayerDraw: function() { |
---|
| 310 | this.draw(); |
---|
| 311 | this.map.events.unregister("changebaselayer", this, this.baseLayerDraw); |
---|
| 312 | }, |
---|
| 313 | |
---|
| 314 | /** |
---|
| 315 | * Method: rectDrag |
---|
| 316 | * Handle extent rectangle drag |
---|
| 317 | * |
---|
| 318 | * Parameters: |
---|
| 319 | * px - {<OpenLayers.Pixel>} The pixel location of the drag. |
---|
| 320 | */ |
---|
| 321 | rectDrag: function(px) { |
---|
| 322 | var deltaX = this.handlers.drag.last.x - px.x; |
---|
| 323 | var deltaY = this.handlers.drag.last.y - px.y; |
---|
| 324 | if(deltaX != 0 || deltaY != 0) { |
---|
| 325 | var rectTop = this.rectPxBounds.top; |
---|
| 326 | var rectLeft = this.rectPxBounds.left; |
---|
| 327 | var rectHeight = Math.abs(this.rectPxBounds.getHeight()); |
---|
| 328 | var rectWidth = this.rectPxBounds.getWidth(); |
---|
| 329 | // don't allow dragging off of parent element |
---|
| 330 | var newTop = Math.max(0, (rectTop - deltaY)); |
---|
| 331 | newTop = Math.min(newTop, |
---|
| 332 | this.ovmap.size.h - this.hComp - rectHeight); |
---|
| 333 | var newLeft = Math.max(0, (rectLeft - deltaX)); |
---|
| 334 | newLeft = Math.min(newLeft, |
---|
| 335 | this.ovmap.size.w - this.wComp - rectWidth); |
---|
| 336 | this.setRectPxBounds(new OpenLayers.Bounds(newLeft, |
---|
| 337 | newTop + rectHeight, |
---|
| 338 | newLeft + rectWidth, |
---|
| 339 | newTop)); |
---|
| 340 | } |
---|
| 341 | }, |
---|
| 342 | |
---|
| 343 | /** |
---|
| 344 | * Method: mapDivClick |
---|
| 345 | * Handle browser events |
---|
| 346 | * |
---|
| 347 | * Parameters: |
---|
| 348 | * evt - {<OpenLayers.Event>} evt |
---|
| 349 | */ |
---|
| 350 | mapDivClick: function(evt) { |
---|
| 351 | var pxCenter = this.rectPxBounds.getCenterPixel(); |
---|
| 352 | var deltaX = evt.xy.x - pxCenter.x; |
---|
| 353 | var deltaY = evt.xy.y - pxCenter.y; |
---|
| 354 | var top = this.rectPxBounds.top; |
---|
| 355 | var left = this.rectPxBounds.left; |
---|
| 356 | var height = Math.abs(this.rectPxBounds.getHeight()); |
---|
| 357 | var width = this.rectPxBounds.getWidth(); |
---|
| 358 | var newTop = Math.max(0, (top + deltaY)); |
---|
| 359 | newTop = Math.min(newTop, this.ovmap.size.h - height); |
---|
| 360 | var newLeft = Math.max(0, (left + deltaX)); |
---|
| 361 | newLeft = Math.min(newLeft, this.ovmap.size.w - width); |
---|
| 362 | this.setRectPxBounds(new OpenLayers.Bounds(newLeft, |
---|
| 363 | newTop + height, |
---|
| 364 | newLeft + width, |
---|
| 365 | newTop)); |
---|
| 366 | this.updateMapToRect(); |
---|
| 367 | }, |
---|
| 368 | |
---|
| 369 | /** |
---|
| 370 | * Method: maximizeControl |
---|
| 371 | * Unhide the control. Called when the control is in the map viewport. |
---|
| 372 | * |
---|
| 373 | * Parameters: |
---|
| 374 | * e - {<OpenLayers.Event>} |
---|
| 375 | */ |
---|
| 376 | maximizeControl: function(e) { |
---|
| 377 | this.element.style.display = ''; |
---|
| 378 | this.showToggle(false); |
---|
| 379 | if (e != null) { |
---|
| 380 | OpenLayers.Event.stop(e); |
---|
| 381 | } |
---|
| 382 | }, |
---|
| 383 | |
---|
| 384 | /** |
---|
| 385 | * Method: minimizeControl |
---|
| 386 | * Hide all the contents of the control, shrink the size, |
---|
| 387 | * add the maximize icon |
---|
| 388 | * |
---|
| 389 | * Parameters: |
---|
| 390 | * e - {<OpenLayers.Event>} |
---|
| 391 | */ |
---|
| 392 | minimizeControl: function(e) { |
---|
| 393 | this.element.style.display = 'none'; |
---|
| 394 | this.showToggle(true); |
---|
| 395 | if (e != null) { |
---|
| 396 | OpenLayers.Event.stop(e); |
---|
| 397 | } |
---|
| 398 | }, |
---|
| 399 | |
---|
| 400 | /** |
---|
| 401 | * Method: showToggle |
---|
| 402 | * Hide/Show the toggle depending on whether the control is minimized |
---|
| 403 | * |
---|
| 404 | * Parameters: |
---|
| 405 | * minimize - {Boolean} |
---|
| 406 | */ |
---|
| 407 | showToggle: function(minimize) { |
---|
| 408 | this.maximizeDiv.style.display = minimize ? '' : 'none'; |
---|
| 409 | this.minimizeDiv.style.display = minimize ? 'none' : ''; |
---|
| 410 | }, |
---|
| 411 | |
---|
| 412 | /** |
---|
| 413 | * Method: update |
---|
| 414 | * Update the overview map after layers move. |
---|
| 415 | */ |
---|
| 416 | update: function() { |
---|
| 417 | if(this.ovmap == null) { |
---|
| 418 | this.createMap(); |
---|
| 419 | } |
---|
| 420 | |
---|
| 421 | if(this.autoPan || !this.isSuitableOverview()) { |
---|
| 422 | this.updateOverview(); |
---|
| 423 | } |
---|
| 424 | |
---|
| 425 | // update extent rectangle |
---|
| 426 | this.updateRectToMap(); |
---|
| 427 | }, |
---|
| 428 | |
---|
| 429 | /** |
---|
| 430 | * Method: isSuitableOverview |
---|
| 431 | * Determines if the overview map is suitable given the extent and |
---|
| 432 | * resolution of the main map. |
---|
| 433 | */ |
---|
| 434 | isSuitableOverview: function() { |
---|
| 435 | var mapExtent = this.map.getExtent(); |
---|
| 436 | var maxExtent = this.map.maxExtent; |
---|
| 437 | var testExtent = new OpenLayers.Bounds( |
---|
| 438 | Math.max(mapExtent.left, maxExtent.left), |
---|
| 439 | Math.max(mapExtent.bottom, maxExtent.bottom), |
---|
| 440 | Math.min(mapExtent.right, maxExtent.right), |
---|
| 441 | Math.min(mapExtent.top, maxExtent.top)); |
---|
| 442 | |
---|
| 443 | if (this.ovmap.getProjection() != this.map.getProjection()) { |
---|
| 444 | testExtent = testExtent.transform( |
---|
| 445 | this.map.getProjectionObject(), |
---|
| 446 | this.ovmap.getProjectionObject() ); |
---|
| 447 | } |
---|
| 448 | |
---|
| 449 | var resRatio = this.ovmap.getResolution() / this.map.getResolution(); |
---|
| 450 | return ((resRatio > this.minRatio) && |
---|
| 451 | (resRatio <= this.maxRatio) && |
---|
| 452 | (this.ovmap.getExtent().containsBounds(testExtent))); |
---|
| 453 | }, |
---|
| 454 | |
---|
| 455 | /** |
---|
| 456 | * Method updateOverview |
---|
| 457 | * Called by <update> if <isSuitableOverview> returns true |
---|
| 458 | */ |
---|
| 459 | updateOverview: function() { |
---|
| 460 | var mapRes = this.map.getResolution(); |
---|
| 461 | var targetRes = this.ovmap.getResolution(); |
---|
| 462 | var resRatio = targetRes / mapRes; |
---|
| 463 | if(resRatio > this.maxRatio) { |
---|
| 464 | // zoom in overview map |
---|
| 465 | targetRes = this.minRatio * mapRes; |
---|
| 466 | } else if(resRatio <= this.minRatio) { |
---|
| 467 | // zoom out overview map |
---|
| 468 | targetRes = this.maxRatio * mapRes; |
---|
| 469 | } |
---|
| 470 | var center; |
---|
| 471 | if (this.ovmap.getProjection() != this.map.getProjection()) { |
---|
| 472 | center = this.map.center.clone(); |
---|
| 473 | center.transform(this.map.getProjectionObject(), |
---|
| 474 | this.ovmap.getProjectionObject() ); |
---|
| 475 | } else { |
---|
| 476 | center = this.map.center; |
---|
| 477 | } |
---|
| 478 | this.ovmap.setCenter(center, this.ovmap.getZoomForResolution( |
---|
| 479 | targetRes * this.resolutionFactor)); |
---|
| 480 | this.updateRectToMap(); |
---|
| 481 | }, |
---|
| 482 | |
---|
| 483 | /** |
---|
| 484 | * Method: createMap |
---|
| 485 | * Construct the map that this control contains |
---|
| 486 | */ |
---|
| 487 | createMap: function() { |
---|
| 488 | // create the overview map |
---|
| 489 | var options = OpenLayers.Util.extend( |
---|
| 490 | {controls: [], maxResolution: 'auto', |
---|
| 491 | fallThrough: false}, this.mapOptions); |
---|
| 492 | this.ovmap = new OpenLayers.Map(this.mapDiv, options); |
---|
| 493 | |
---|
| 494 | // prevent ovmap from being destroyed when the page unloads, because |
---|
| 495 | // the OverviewMap control has to do this (and does it). |
---|
| 496 | OpenLayers.Event.stopObserving(window, 'unload', this.ovmap.unloadDestroy); |
---|
| 497 | |
---|
| 498 | this.ovmap.addLayers(this.layers); |
---|
| 499 | this.ovmap.zoomToMaxExtent(); |
---|
| 500 | // check extent rectangle border width |
---|
| 501 | this.wComp = parseInt(OpenLayers.Element.getStyle(this.extentRectangle, |
---|
| 502 | 'border-left-width')) + |
---|
| 503 | parseInt(OpenLayers.Element.getStyle(this.extentRectangle, |
---|
| 504 | 'border-right-width')); |
---|
| 505 | this.wComp = (this.wComp) ? this.wComp : 2; |
---|
| 506 | this.hComp = parseInt(OpenLayers.Element.getStyle(this.extentRectangle, |
---|
| 507 | 'border-top-width')) + |
---|
| 508 | parseInt(OpenLayers.Element.getStyle(this.extentRectangle, |
---|
| 509 | 'border-bottom-width')); |
---|
| 510 | this.hComp = (this.hComp) ? this.hComp : 2; |
---|
| 511 | |
---|
| 512 | this.handlers.drag = new OpenLayers.Handler.Drag( |
---|
| 513 | this, {move: this.rectDrag, done: this.updateMapToRect}, |
---|
| 514 | {map: this.ovmap} |
---|
| 515 | ); |
---|
| 516 | this.handlers.click = new OpenLayers.Handler.Click( |
---|
| 517 | this, { |
---|
| 518 | "click": this.mapDivClick |
---|
| 519 | },{ |
---|
| 520 | "single": true, "double": false, |
---|
| 521 | "stopSingle": true, "stopDouble": true, |
---|
| 522 | "pixelTolerance": 1, |
---|
| 523 | map: this.ovmap |
---|
| 524 | } |
---|
| 525 | ); |
---|
| 526 | this.handlers.click.activate(); |
---|
| 527 | |
---|
| 528 | this.rectEvents = new OpenLayers.Events(this, this.extentRectangle, |
---|
| 529 | null, true); |
---|
| 530 | this.rectEvents.register("mouseover", this, function(e) { |
---|
| 531 | if(!this.handlers.drag.active && !this.map.dragging) { |
---|
| 532 | this.handlers.drag.activate(); |
---|
| 533 | } |
---|
| 534 | }); |
---|
| 535 | this.rectEvents.register("mouseout", this, function(e) { |
---|
| 536 | if(!this.handlers.drag.dragging) { |
---|
| 537 | this.handlers.drag.deactivate(); |
---|
| 538 | } |
---|
| 539 | }); |
---|
| 540 | |
---|
| 541 | if (this.ovmap.getProjection() != this.map.getProjection()) { |
---|
| 542 | var sourceUnits = this.map.getProjectionObject().getUnits() || |
---|
| 543 | this.map.units || this.map.baseLayer.units; |
---|
| 544 | var targetUnits = this.ovmap.getProjectionObject().getUnits() || |
---|
| 545 | this.ovmap.units || this.ovmap.baseLayer.units; |
---|
| 546 | this.resolutionFactor = sourceUnits && targetUnits ? |
---|
| 547 | OpenLayers.INCHES_PER_UNIT[sourceUnits] / |
---|
| 548 | OpenLayers.INCHES_PER_UNIT[targetUnits] : 1; |
---|
| 549 | } |
---|
| 550 | }, |
---|
| 551 | |
---|
| 552 | /** |
---|
| 553 | * Method: updateRectToMap |
---|
| 554 | * Updates the extent rectangle position and size to match the map extent |
---|
| 555 | */ |
---|
| 556 | updateRectToMap: function() { |
---|
| 557 | // If the projections differ we need to reproject |
---|
| 558 | var bounds; |
---|
| 559 | if (this.ovmap.getProjection() != this.map.getProjection()) { |
---|
| 560 | bounds = this.map.getExtent().transform( |
---|
| 561 | this.map.getProjectionObject(), |
---|
| 562 | this.ovmap.getProjectionObject() ); |
---|
| 563 | } else { |
---|
| 564 | bounds = this.map.getExtent(); |
---|
| 565 | } |
---|
| 566 | var pxBounds = this.getRectBoundsFromMapBounds(bounds); |
---|
| 567 | if (pxBounds) { |
---|
| 568 | this.setRectPxBounds(pxBounds); |
---|
| 569 | } |
---|
| 570 | }, |
---|
| 571 | |
---|
| 572 | /** |
---|
| 573 | * Method: updateMapToRect |
---|
| 574 | * Updates the map extent to match the extent rectangle position and size |
---|
| 575 | */ |
---|
| 576 | updateMapToRect: function() { |
---|
| 577 | var lonLatBounds = this.getMapBoundsFromRectBounds(this.rectPxBounds); |
---|
| 578 | if (this.ovmap.getProjection() != this.map.getProjection()) { |
---|
| 579 | lonLatBounds = lonLatBounds.transform( |
---|
| 580 | this.ovmap.getProjectionObject(), |
---|
| 581 | this.map.getProjectionObject() ); |
---|
| 582 | } |
---|
| 583 | this.map.panTo(lonLatBounds.getCenterLonLat()); |
---|
| 584 | }, |
---|
| 585 | |
---|
| 586 | /** |
---|
| 587 | * Method: setRectPxBounds |
---|
| 588 | * Set extent rectangle pixel bounds. |
---|
| 589 | * |
---|
| 590 | * Parameters: |
---|
| 591 | * pxBounds - {<OpenLayers.Bounds>} |
---|
| 592 | */ |
---|
| 593 | setRectPxBounds: function(pxBounds) { |
---|
| 594 | var top = Math.max(pxBounds.top, 0); |
---|
| 595 | var left = Math.max(pxBounds.left, 0); |
---|
| 596 | var bottom = Math.min(pxBounds.top + Math.abs(pxBounds.getHeight()), |
---|
| 597 | this.ovmap.size.h - this.hComp); |
---|
| 598 | var right = Math.min(pxBounds.left + pxBounds.getWidth(), |
---|
| 599 | this.ovmap.size.w - this.wComp); |
---|
| 600 | var width = Math.max(right - left, 0); |
---|
| 601 | var height = Math.max(bottom - top, 0); |
---|
| 602 | if(width < this.minRectSize || height < this.minRectSize) { |
---|
| 603 | this.extentRectangle.className = this.displayClass + |
---|
| 604 | this.minRectDisplayClass; |
---|
| 605 | var rLeft = left + (width / 2) - (this.minRectSize / 2); |
---|
| 606 | var rTop = top + (height / 2) - (this.minRectSize / 2); |
---|
| 607 | this.extentRectangle.style.top = Math.round(rTop) + 'px'; |
---|
| 608 | this.extentRectangle.style.left = Math.round(rLeft) + 'px'; |
---|
| 609 | this.extentRectangle.style.height = this.minRectSize + 'px'; |
---|
| 610 | this.extentRectangle.style.width = this.minRectSize + 'px'; |
---|
| 611 | } else { |
---|
| 612 | this.extentRectangle.className = this.displayClass + |
---|
| 613 | 'ExtentRectangle'; |
---|
| 614 | this.extentRectangle.style.top = Math.round(top) + 'px'; |
---|
| 615 | this.extentRectangle.style.left = Math.round(left) + 'px'; |
---|
| 616 | this.extentRectangle.style.height = Math.round(height) + 'px'; |
---|
| 617 | this.extentRectangle.style.width = Math.round(width) + 'px'; |
---|
| 618 | } |
---|
| 619 | this.rectPxBounds = new OpenLayers.Bounds( |
---|
| 620 | Math.round(left), Math.round(bottom), |
---|
| 621 | Math.round(right), Math.round(top) |
---|
| 622 | ); |
---|
| 623 | }, |
---|
| 624 | |
---|
| 625 | /** |
---|
| 626 | * Method: getRectBoundsFromMapBounds |
---|
| 627 | * Get the rect bounds from the map bounds. |
---|
| 628 | * |
---|
| 629 | * Parameters: |
---|
| 630 | * lonLatBounds - {<OpenLayers.Bounds>} |
---|
| 631 | * |
---|
| 632 | * Returns: |
---|
| 633 | * {<OpenLayers.Bounds>}A bounds which is the passed-in map lon/lat extent |
---|
| 634 | * translated into pixel bounds for the overview map |
---|
| 635 | */ |
---|
| 636 | getRectBoundsFromMapBounds: function(lonLatBounds) { |
---|
| 637 | var leftBottomLonLat = new OpenLayers.LonLat(lonLatBounds.left, |
---|
| 638 | lonLatBounds.bottom); |
---|
| 639 | var rightTopLonLat = new OpenLayers.LonLat(lonLatBounds.right, |
---|
| 640 | lonLatBounds.top); |
---|
| 641 | var leftBottomPx = this.getOverviewPxFromLonLat(leftBottomLonLat); |
---|
| 642 | var rightTopPx = this.getOverviewPxFromLonLat(rightTopLonLat); |
---|
| 643 | var bounds = null; |
---|
| 644 | if (leftBottomPx && rightTopPx) { |
---|
| 645 | bounds = new OpenLayers.Bounds(leftBottomPx.x, leftBottomPx.y, |
---|
| 646 | rightTopPx.x, rightTopPx.y); |
---|
| 647 | } |
---|
| 648 | return bounds; |
---|
| 649 | }, |
---|
| 650 | |
---|
| 651 | /** |
---|
| 652 | * Method: getMapBoundsFromRectBounds |
---|
| 653 | * Get the map bounds from the rect bounds. |
---|
| 654 | * |
---|
| 655 | * Parameters: |
---|
| 656 | * pxBounds - {<OpenLayers.Bounds>} |
---|
| 657 | * |
---|
| 658 | * Returns: |
---|
| 659 | * {<OpenLayers.Bounds>} Bounds which is the passed-in overview rect bounds |
---|
| 660 | * translated into lon/lat bounds for the overview map |
---|
| 661 | */ |
---|
| 662 | getMapBoundsFromRectBounds: function(pxBounds) { |
---|
| 663 | var leftBottomPx = new OpenLayers.Pixel(pxBounds.left, |
---|
| 664 | pxBounds.bottom); |
---|
| 665 | var rightTopPx = new OpenLayers.Pixel(pxBounds.right, |
---|
| 666 | pxBounds.top); |
---|
| 667 | var leftBottomLonLat = this.getLonLatFromOverviewPx(leftBottomPx); |
---|
| 668 | var rightTopLonLat = this.getLonLatFromOverviewPx(rightTopPx); |
---|
| 669 | return new OpenLayers.Bounds(leftBottomLonLat.lon, leftBottomLonLat.lat, |
---|
| 670 | rightTopLonLat.lon, rightTopLonLat.lat); |
---|
| 671 | }, |
---|
| 672 | |
---|
| 673 | /** |
---|
| 674 | * Method: getLonLatFromOverviewPx |
---|
| 675 | * Get a map location from a pixel location |
---|
| 676 | * |
---|
| 677 | * Parameters: |
---|
| 678 | * overviewMapPx - {<OpenLayers.Pixel>} |
---|
| 679 | * |
---|
| 680 | * Returns: |
---|
| 681 | * {<OpenLayers.LonLat>} Location which is the passed-in overview map |
---|
| 682 | * OpenLayers.Pixel, translated into lon/lat by the overview map |
---|
| 683 | */ |
---|
| 684 | getLonLatFromOverviewPx: function(overviewMapPx) { |
---|
| 685 | var size = this.ovmap.size; |
---|
| 686 | var res = this.ovmap.getResolution(); |
---|
| 687 | var center = this.ovmap.getExtent().getCenterLonLat(); |
---|
| 688 | |
---|
| 689 | var delta_x = overviewMapPx.x - (size.w / 2); |
---|
| 690 | var delta_y = overviewMapPx.y - (size.h / 2); |
---|
| 691 | |
---|
| 692 | return new OpenLayers.LonLat(center.lon + delta_x * res , |
---|
| 693 | center.lat - delta_y * res); |
---|
| 694 | }, |
---|
| 695 | |
---|
| 696 | /** |
---|
| 697 | * Method: getOverviewPxFromLonLat |
---|
| 698 | * Get a pixel location from a map location |
---|
| 699 | * |
---|
| 700 | * Parameters: |
---|
| 701 | * lonlat - {<OpenLayers.LonLat>} |
---|
| 702 | * |
---|
| 703 | * Returns: |
---|
| 704 | * {<OpenLayers.Pixel>} Location which is the passed-in OpenLayers.LonLat, |
---|
| 705 | * translated into overview map pixels |
---|
| 706 | */ |
---|
| 707 | getOverviewPxFromLonLat: function(lonlat) { |
---|
| 708 | var res = this.ovmap.getResolution(); |
---|
| 709 | var extent = this.ovmap.getExtent(); |
---|
| 710 | var px = null; |
---|
| 711 | if (extent) { |
---|
| 712 | px = new OpenLayers.Pixel( |
---|
| 713 | Math.round(1/res * (lonlat.lon - extent.left)), |
---|
| 714 | Math.round(1/res * (extent.top - lonlat.lat))); |
---|
| 715 | } |
---|
| 716 | return px; |
---|
| 717 | }, |
---|
| 718 | |
---|
| 719 | CLASS_NAME: 'OpenLayers.Control.OverviewMap' |
---|
| 720 | }); |
---|