1 | /* |
---|
2 | * DragZoomControl Class v1.3 |
---|
3 | * Copyright (c) 2005-2007, Andre Lewis, andre@earthcode.com |
---|
4 | * |
---|
5 | * Back Button functionality |
---|
6 | * Copyright (c) 2007, Richard Garland, papabear.newyork@gmail.com |
---|
7 | * |
---|
8 | * Licensed under the Apache License, Version 2.0 (the "License"); |
---|
9 | * you may not use this file except in compliance with the License. |
---|
10 | * You may obtain a copy of the License at |
---|
11 | * |
---|
12 | * http://www.apache.org/licenses/LICENSE-2.0 |
---|
13 | * |
---|
14 | * Unless required by applicable law or agreed to in writing, software |
---|
15 | * distributed under the License is distributed on an "AS IS" BASIS, |
---|
16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
---|
17 | * See the License for the specific language governing permissions and |
---|
18 | * limitations under the License. |
---|
19 | * |
---|
20 | * This class lets you add a control to the map which will let the user |
---|
21 | * zoom by dragging a rectangle. |
---|
22 | * More info on original GZoom at http://earthcode.com |
---|
23 | * |
---|
24 | * Back Button functionality provides the user with a one click means to return the map state |
---|
25 | * to its state prior to the DragZoom. Sequential DragZooms are backed out in reverse order. |
---|
26 | */ |
---|
27 | |
---|
28 | /** |
---|
29 | * Constructor for DragZoomControl, which takes 3 option hashes and |
---|
30 | * uses them to customize the control. |
---|
31 | * @param {opts_boxStyle} Named optional arguments: |
---|
32 | * opts_boxStyle.opacity {Number} Opacity from 0-1 |
---|
33 | * opts_boxStyle.fillColor {String} Hex value of fill color |
---|
34 | * opts_boxStyle.border {String} CSS-style declaration of border |
---|
35 | * @param {opts_other} Named optional arguments: |
---|
36 | * opts_other.buttonHTML {String} The zoom button HTML in non-activated state |
---|
37 | * opts_other.buttonStartingStyle {Object} A hash of css styles for the |
---|
38 | * zoom button which are common to both un-activated and activated state |
---|
39 | * opts_other.buttonStyle {Object} A hash of css styles for the zoom button |
---|
40 | * which will be applied when the button is in un-activated state. |
---|
41 | * opts_other.rightMouseZoomOutEnabled {Boolean} Whether to zoom out when a drag |
---|
42 | * with the right mouse button occurs. |
---|
43 | * opts_other.buttonZoomingHTML {String} HTML which is placed in the |
---|
44 | * zoom button when the button is activated. |
---|
45 | * opts_other.buttonZoomingStyle {Object} A hash of css styles for the |
---|
46 | * zoom button which will be applied when the button is activated. |
---|
47 | * opts_other.overlayRemoveTime {Number} The number of milliseconds to wait before |
---|
48 | * removing the rectangle indicating the zoomed-in area after the zoom has happened. |
---|
49 | * opts_other.stickyZoomEnabled {Boolean} Whether or not the control stays in |
---|
50 | * "zoom mode" until turned off. When true, the user can zoom repeatedly, |
---|
51 | * until clicking on the zoom button again to turn zoom mode off. |
---|
52 | * opts_other.backButtonEnabled {Boolean} enables Back Button functionality |
---|
53 | * opts_other.backButtonHTML {String} The back button HTML |
---|
54 | * opts_other.backButtonStyle {Object} A hash of css styles for the back button |
---|
55 | * which will be applied when the button is created. |
---|
56 | * opts_other.minDragSize {Number} The minimum size of the rectangle when it is |
---|
57 | * released for a zoom to happen. |
---|
58 | * @param {opts_callbacks} Named optional arguments: |
---|
59 | * opts_callbacks.buttonclick {Function} Called when the DragZoom is activated |
---|
60 | * by clicking on the "zoom" button. |
---|
61 | * opts_callbacks.dragstart {Function} Called when user starts to drag a rectangle. |
---|
62 | * Callback args are x,y -- the PIXEL values, relative to the upper-left-hand |
---|
63 | * corner of the map, where the user began dragging. |
---|
64 | * opts_callbacks.dragging {Function} Called repeatedly while the user is dragging. |
---|
65 | * Callback args are startX,startY, currentX,currentY -- the PIXEL values of the |
---|
66 | * start of the drag, and the current drag point, respectively. |
---|
67 | * opts_callbacks.dragend {Function} Called when the user releases the mouse button |
---|
68 | * after dragging the rectangle. Callback args are: NW {GLatLng}, NE {GLatLng}, |
---|
69 | * SE {GLatLng}, SW {GLatLng}, NW {GPoint}, NE {GPoint}, SE {GPoint}, SW {GPoint}. |
---|
70 | * The first 4 are the latitudes/longitudes; the last 4 are the pixel coords on the map. |
---|
71 | * opts_callbacks.backbuttonclick {Function} Called when the back button is activated |
---|
72 | * after the map context is restored. Callback args: methodCall (boolean) set true if |
---|
73 | * this backbuttonclick was to restore context set by the mathod call, else false. |
---|
74 | * Method |
---|
75 | * this.saveMapContext(text) Call to push map context onto the backStack and set the button text |
---|
76 | * this.initiateZoom() Call to simulate clicking the dragZoom button |
---|
77 | * this.initiateZoomBack() Call to simulate clicking the dragZoom back button |
---|
78 | **/ |
---|
79 | |
---|
80 | /** |
---|
81 | * Versions |
---|
82 | * 1.0 original version (v 189) 5/24/2007 |
---|
83 | * 1.1 backbutton functionality added (v 211) 7/30/2007 |
---|
84 | * 1.2 bug fixes and 2 new methods 9/6/2007 |
---|
85 | * fix text selection conflict in IE |
---|
86 | * fix align-text:center inheritance problem in IE |
---|
87 | * create methods initiateZoom and initiateZoomBack which call buttonclick_() and backbuttonclick_() |
---|
88 | **/ |
---|
89 | |
---|
90 | function DragZoomControl(opts_boxStyle, opts_other, opts_callbacks) { |
---|
91 | // Holds all information needed globally |
---|
92 | // Not all globals are initialized here |
---|
93 | this.globals = { |
---|
94 | draggingOn: false, |
---|
95 | cornerTopDiv: null, |
---|
96 | cornerRightDiv: null, |
---|
97 | cornerBottomDiv: null, |
---|
98 | cornerLeftDiv: null, |
---|
99 | mapPosition: null, |
---|
100 | outlineDiv: null, |
---|
101 | mapWidth: 0, |
---|
102 | mapHeight: 0, |
---|
103 | mapRatio: 0, |
---|
104 | startX: 0, |
---|
105 | startY: 0, |
---|
106 | borderCorrection: 0 |
---|
107 | }; |
---|
108 | |
---|
109 | //box style options |
---|
110 | this.globals.style = { |
---|
111 | opacity: .2, |
---|
112 | fillColor: "#000", |
---|
113 | border: "2px solid blue" |
---|
114 | }; |
---|
115 | |
---|
116 | var style = this.globals.style; |
---|
117 | for (var s in opts_boxStyle) { |
---|
118 | style[s]=opts_boxStyle[s]; |
---|
119 | } |
---|
120 | |
---|
121 | var borderStyleArray = style.border.split(' '); |
---|
122 | style.outlineWidth = parseInt(borderStyleArray[0].replace(/\D/g,'')); |
---|
123 | style.outlineColor = borderStyleArray[2]; |
---|
124 | style.alphaIE = 'alpha(opacity=' + (style.opacity * 100) + ')'; |
---|
125 | |
---|
126 | // map context stack for back button |
---|
127 | this.globals.backStack = []; |
---|
128 | |
---|
129 | // Other options |
---|
130 | this.globals.options={ |
---|
131 | buttonHTML: 'zoom ...', |
---|
132 | buttonStartingStyle: |
---|
133 | {width: '52px', border: '1px solid black', padding: '2px'}, |
---|
134 | buttonStyle: {background: '#FFF'}, |
---|
135 | backButtonHTML: 'zoom back', |
---|
136 | backButtonStyle: {background: '#FFF', display: 'none'}, |
---|
137 | buttonZoomingHTML: 'Drag a region on the map', |
---|
138 | buttonZoomingStyle: {background: '#FF0'}, |
---|
139 | overlayRemoveTime: 6000, |
---|
140 | backButtonEnabled: false, |
---|
141 | stickyZoomEnabled: false, |
---|
142 | rightMouseZoomOutEnabled: false, |
---|
143 | minDragSize: 0 |
---|
144 | }; |
---|
145 | |
---|
146 | for (var s in opts_other) { |
---|
147 | this.globals.options[s] = opts_other[s] |
---|
148 | } |
---|
149 | |
---|
150 | // callbacks: buttonclick, dragstart, dragging, dragend, backbuttonclick |
---|
151 | if (opts_callbacks == null) { |
---|
152 | opts_callbacks = {} |
---|
153 | } |
---|
154 | this.globals.callbacks = opts_callbacks; |
---|
155 | }; |
---|
156 | |
---|
157 | DragZoomControl.prototype = new GControl(); |
---|
158 | |
---|
159 | /** |
---|
160 | * Methods |
---|
161 | */ |
---|
162 | |
---|
163 | /** |
---|
164 | * Method called to save the map context before the zoom. |
---|
165 | * Back Button functionality: |
---|
166 | * @param {text} text string for the back button |
---|
167 | */ |
---|
168 | DragZoomControl.prototype.saveMapContext = function(text) { |
---|
169 | if (this.globals.options.backButtonEnabled) { |
---|
170 | this.saveBackContext_(text,true); |
---|
171 | this.globals.backButtonDiv.style.display = 'block'; |
---|
172 | } |
---|
173 | }; |
---|
174 | |
---|
175 | /** |
---|
176 | * Method called to initiate a dragZoom as if the user had clicked the dragZoom button. |
---|
177 | */ |
---|
178 | DragZoomControl.prototype.initiateZoom = function() {this.buttonclick_()}; |
---|
179 | |
---|
180 | /** |
---|
181 | * Method called to initiate a dragZoom back operation as if the user had clicked the dragZoom back button. |
---|
182 | * Back Button functionality: |
---|
183 | */ |
---|
184 | DragZoomControl.prototype.initiateZoomBack = function() {if (this.globals.options.backButtonEnabled) this.backbuttonclick_()}; |
---|
185 | |
---|
186 | /** |
---|
187 | * Creates a new button to control gzoom and appends to the button container div. |
---|
188 | * @param {DOM Node} buttonContainerDiv created in main .initialize code |
---|
189 | */ |
---|
190 | DragZoomControl.prototype.initButton_ = function(buttonContainerDiv) { |
---|
191 | var G = this.globals; |
---|
192 | var buttonDiv = document.createElement('div'); |
---|
193 | buttonDiv.innerHTML = G.options.buttonHTML; |
---|
194 | DragZoomUtil.style([buttonDiv], {cursor: 'pointer', zIndex:200}); |
---|
195 | DragZoomUtil.style([buttonDiv], G.options.buttonStartingStyle); |
---|
196 | DragZoomUtil.style([buttonDiv], G.options.buttonStyle); |
---|
197 | buttonContainerDiv.appendChild(buttonDiv); |
---|
198 | return buttonDiv; |
---|
199 | }; |
---|
200 | |
---|
201 | /** |
---|
202 | * Creates a second new button to control backup zoom and appends to the button container div. |
---|
203 | * @param {DOM Node} buttonContainerDiv created in main .initialize code |
---|
204 | */ |
---|
205 | DragZoomControl.prototype.initBackButton_ = function(buttonContainerDiv) { |
---|
206 | var G = this.globals; |
---|
207 | var backButtonDiv = document.createElement('div'); |
---|
208 | backButtonDiv.innerHTML = G.options.backButtonHTML; |
---|
209 | DragZoomUtil.style([backButtonDiv], {cursor: 'pointer', zIndex:200}); |
---|
210 | DragZoomUtil.style([backButtonDiv], G.options.buttonStartingStyle); |
---|
211 | DragZoomUtil.style([backButtonDiv], G.options.backButtonStyle); |
---|
212 | buttonContainerDiv.appendChild(backButtonDiv); |
---|
213 | return backButtonDiv; |
---|
214 | }; |
---|
215 | |
---|
216 | /** |
---|
217 | * Sets button mode to zooming or otherwise, changes CSS & HTML. |
---|
218 | * @param {String} mode Either "zooming" or not. |
---|
219 | */ |
---|
220 | DragZoomControl.prototype.setButtonMode_ = function(mode){ |
---|
221 | var G = this.globals; |
---|
222 | if (mode == 'zooming') { |
---|
223 | G.buttonDiv.innerHTML = G.options.buttonZoomingHTML; |
---|
224 | DragZoomUtil.style([G.buttonDiv], G.options.buttonStartingStyle); |
---|
225 | DragZoomUtil.style([G.buttonDiv], G.options.buttonZoomingStyle); |
---|
226 | } else { |
---|
227 | G.buttonDiv.innerHTML = G.options.buttonHTML; |
---|
228 | DragZoomUtil.style([G.buttonDiv], G.options.buttonStartingStyle); |
---|
229 | DragZoomUtil.style([G.buttonDiv], G.options.buttonStyle); |
---|
230 | } |
---|
231 | }; |
---|
232 | |
---|
233 | /** |
---|
234 | * Is called by GMap2's addOverlay method. Creates the zoom control |
---|
235 | * divs and appends to the map div. |
---|
236 | * @param {GMap2} map The map that has had this DragZoomControl added to it. |
---|
237 | * @return {DOM Object} Div that holds the gzoomcontrol button |
---|
238 | */ |
---|
239 | DragZoomControl.prototype.initialize = function(map) { |
---|
240 | var G = this.globals; |
---|
241 | var me = this; |
---|
242 | var mapDiv = map.getContainer(); |
---|
243 | |
---|
244 | // Create div for both buttons |
---|
245 | var buttonContainerDiv = document.createElement("div"); |
---|
246 | DragZoomUtil.style([buttonContainerDiv], {cursor: 'pointer', zIndex: 150}); |
---|
247 | |
---|
248 | // create and init the zoom button |
---|
249 | //DOM:button |
---|
250 | var buttonDiv = this.initButton_(buttonContainerDiv); |
---|
251 | |
---|
252 | // create and init the back button |
---|
253 | //DOM:button |
---|
254 | var backButtonDiv = this.initBackButton_(buttonContainerDiv); |
---|
255 | |
---|
256 | // Add the two buttons to the map |
---|
257 | mapDiv.appendChild(buttonContainerDiv); |
---|
258 | |
---|
259 | //DOM:map covers |
---|
260 | var zoomDiv = document.createElement("div"); |
---|
261 | var DIVS_TO_CREATE = ['outlineDiv', 'cornerTopDiv', 'cornerLeftDiv', 'cornerRightDiv', 'cornerBottomDiv']; |
---|
262 | for (var i=0; i<DIVS_TO_CREATE.length; i++) { |
---|
263 | var id = DIVS_TO_CREATE[i]; |
---|
264 | var div = document.createElement("div"); |
---|
265 | DragZoomUtil.style([div], {position: 'absolute', display: 'none'}); |
---|
266 | zoomDiv.appendChild(div); |
---|
267 | G[id] = div; |
---|
268 | } |
---|
269 | DragZoomUtil.style([zoomDiv], {position: 'absolute', display: 'none', overflow: 'hidden', cursor: 'crosshair', zIndex: 101}); |
---|
270 | mapDiv.appendChild(zoomDiv); |
---|
271 | |
---|
272 | // add event listeners |
---|
273 | GEvent.addDomListener(buttonDiv, 'click', function(e) { |
---|
274 | me.buttonclick_(e); |
---|
275 | }); |
---|
276 | GEvent.addDomListener(backButtonDiv, 'click', function(e) { |
---|
277 | me.backbuttonclick_(e); |
---|
278 | }); |
---|
279 | GEvent.addDomListener(zoomDiv, 'mousedown', function(e) { |
---|
280 | me.coverMousedown_(e); |
---|
281 | }); |
---|
282 | GEvent.addDomListener(document, 'mousemove', function(e) { |
---|
283 | me.drag_(e); |
---|
284 | }); |
---|
285 | GEvent.addDomListener(document, 'mouseup', function(e) { |
---|
286 | me.mouseup_(e); |
---|
287 | }); |
---|
288 | |
---|
289 | // get globals |
---|
290 | G.mapPosition = DragZoomUtil.getElementPosition(mapDiv); |
---|
291 | G.buttonDiv = buttonDiv; |
---|
292 | G.backButtonDiv = backButtonDiv; |
---|
293 | G.mapCover = zoomDiv; |
---|
294 | G.map = map; |
---|
295 | |
---|
296 | G.borderCorrection = G.style.outlineWidth * 2; |
---|
297 | this.setDimensions_(); |
---|
298 | |
---|
299 | //styles |
---|
300 | this.initStyles_(); |
---|
301 | |
---|
302 | // disable text selection on map cover |
---|
303 | G.mapCover.onselectstart = function() {return false}; |
---|
304 | |
---|
305 | return buttonContainerDiv; |
---|
306 | }; |
---|
307 | |
---|
308 | /** |
---|
309 | * Required by GMaps API for controls. |
---|
310 | * @return {GControlPosition} Default location for control |
---|
311 | */ |
---|
312 | DragZoomControl.prototype.getDefaultPosition = function() { |
---|
313 | return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(3, 120)); |
---|
314 | }; |
---|
315 | |
---|
316 | /** |
---|
317 | * Function called when mousedown event is captured. |
---|
318 | * @param {Object} e |
---|
319 | */ |
---|
320 | DragZoomControl.prototype.coverMousedown_ = function(e){ |
---|
321 | var G = this.globals; |
---|
322 | var pos = this.getRelPos_(e); |
---|
323 | G.startX = pos.left; |
---|
324 | G.startY = pos.top; |
---|
325 | |
---|
326 | if (e.which) { |
---|
327 | var rightMouse = (e.which != 1); |
---|
328 | } else if (e.button) { |
---|
329 | var rightMouse = (e.button != 1); |
---|
330 | } |
---|
331 | G.draggingRightMouse = rightMouse; |
---|
332 | |
---|
333 | DragZoomUtil.style([G.mapCover], {background: 'transparent', opacity: 1, filter: 'alpha(opacity=100)'}); |
---|
334 | DragZoomUtil.style([G.outlineDiv], {left: G.startX + 'px', top: G.startY + 'px', display: 'block', width: '1px', height: '1px'}); |
---|
335 | G.draggingOn = true; |
---|
336 | |
---|
337 | G.cornerTopDiv.style.top = (G.startY - G.mapHeight) + 'px'; |
---|
338 | G.cornerTopDiv.style.display ='block'; |
---|
339 | G.cornerLeftDiv.style.left = (G.startX - G.mapWidth) +'px'; |
---|
340 | G.cornerLeftDiv.style.top = G.startY + 'px'; |
---|
341 | G.cornerLeftDiv.style.display = 'block'; |
---|
342 | |
---|
343 | G.cornerRightDiv.style.left = G.startX + 'px'; |
---|
344 | G.cornerRightDiv.style.top = G.startY + 'px'; |
---|
345 | G.cornerRightDiv.style.display = 'block'; |
---|
346 | G.cornerBottomDiv.style.left = G.startX + 'px'; |
---|
347 | G.cornerBottomDiv.style.top = G.startY + 'px'; |
---|
348 | G.cornerBottomDiv.style.width = '0px'; |
---|
349 | G.cornerBottomDiv.style.display = 'block'; |
---|
350 | |
---|
351 | // invoke the callback if provided |
---|
352 | if (G.callbacks.dragstart != null) { |
---|
353 | G.callbacks.dragstart(G.startX, G.startY); |
---|
354 | } |
---|
355 | |
---|
356 | return false; |
---|
357 | }; |
---|
358 | |
---|
359 | /** |
---|
360 | * Function called when drag event is captured |
---|
361 | * @param {Object} e |
---|
362 | */ |
---|
363 | DragZoomControl.prototype.drag_ = function(e){ |
---|
364 | var G = this.globals; |
---|
365 | if(G.draggingOn) { |
---|
366 | var pos = this.getRelPos_(e); |
---|
367 | var rect = this.getRectangle_(G.startX, G.startY, pos, G.mapRatio); |
---|
368 | |
---|
369 | if (rect.left) { |
---|
370 | addX = -rect.width; |
---|
371 | } else { |
---|
372 | addX = 0; |
---|
373 | } |
---|
374 | |
---|
375 | if (rect.top) { |
---|
376 | addY = -rect.height; |
---|
377 | } else { |
---|
378 | addY = 0; |
---|
379 | } |
---|
380 | |
---|
381 | DragZoomUtil.style([G.outlineDiv], {left: G.startX + addX + 'px', top: G.startY + addY + 'px', display: 'block', width: '1px', height: '1px'}); |
---|
382 | |
---|
383 | G.outlineDiv.style.width = rect.width + "px"; |
---|
384 | G.outlineDiv.style.height = rect.height + "px"; |
---|
385 | |
---|
386 | G.cornerTopDiv.style.height = ((G.startY + addY) - (G.startY - G.mapHeight)) + 'px'; |
---|
387 | G.cornerLeftDiv.style.top = (G.startY + addY) + 'px'; |
---|
388 | G.cornerLeftDiv.style.width = ((G.startX + addX) - (G.startX - G.mapWidth)) + 'px'; |
---|
389 | G.cornerRightDiv.style.top = G.cornerLeftDiv.style.top; |
---|
390 | G.cornerRightDiv.style.left = (G.startX + addX + rect.width + G.borderCorrection) + 'px'; |
---|
391 | G.cornerBottomDiv.style.top = (G.startY + addY + rect.height + G.borderCorrection) + 'px'; |
---|
392 | G.cornerBottomDiv.style.left = (G.startX - G.mapWidth + ((G.startX + addX) - (G.startX - G.mapWidth))) + 'px'; |
---|
393 | G.cornerBottomDiv.style.width = (rect.width + G.borderCorrection) + 'px'; |
---|
394 | |
---|
395 | // invoke callback if provided |
---|
396 | if (G.callbacks.dragging != null) { |
---|
397 | G.callbacks.dragging(G.startX, G.startY, rect.endX, rect.endY) |
---|
398 | } |
---|
399 | |
---|
400 | return false; |
---|
401 | } |
---|
402 | }; |
---|
403 | |
---|
404 | /** |
---|
405 | * Function called when mouseup event is captured |
---|
406 | * @param {Event} e |
---|
407 | */ |
---|
408 | DragZoomControl.prototype.mouseup_ = function(e){ |
---|
409 | var G = this.globals; |
---|
410 | if (G.draggingOn) { |
---|
411 | var pos = this.getRelPos_(e); |
---|
412 | G.draggingOn = false; |
---|
413 | |
---|
414 | var rect = this.getRectangle_(G.startX, G.startY, pos, G.mapRatio); |
---|
415 | |
---|
416 | if (rect.left) rect.endX = rect.startX - rect.width; |
---|
417 | if (rect.top) rect.endY = rect.startY - rect.height; |
---|
418 | |
---|
419 | this.resetDragZoom_(); |
---|
420 | |
---|
421 | if (rect.width >= G.options.minDragSize && rect.height >= G.options.minDragSize) { |
---|
422 | var nwpx = new GPoint(rect.startX, rect.startY); |
---|
423 | var nepx = new GPoint(rect.endX, rect.startY); |
---|
424 | var sepx = new GPoint(rect.endX, rect.endY); |
---|
425 | var swpx = new GPoint(rect.startX, rect.endY); |
---|
426 | var nw = G.map.fromContainerPixelToLatLng(nwpx); |
---|
427 | var ne = G.map.fromContainerPixelToLatLng(nepx); |
---|
428 | var se = G.map.fromContainerPixelToLatLng(sepx); |
---|
429 | var sw = G.map.fromContainerPixelToLatLng(swpx); |
---|
430 | |
---|
431 | var zoomAreaPoly = new GPolyline([nw, ne, se, sw, nw], G.style.outlineColor, G.style.outlineWidth + 1,.4); |
---|
432 | |
---|
433 | try{ |
---|
434 | G.map.addOverlay(zoomAreaPoly); |
---|
435 | setTimeout (function() {G.map.removeOverlay(zoomAreaPoly)}, G.options.overlayRemoveTime); |
---|
436 | }catch(e) {} |
---|
437 | |
---|
438 | var polyBounds = zoomAreaPoly.getBounds(); |
---|
439 | var ne = polyBounds.getNorthEast(); |
---|
440 | var sw = polyBounds.getSouthWest(); |
---|
441 | var se = new GLatLng(sw.lat(), ne.lng()); |
---|
442 | var nw = new GLatLng(ne.lat(), sw.lng()); |
---|
443 | if (G.options.rightMouseZoomOutEnabled && G.draggingRightMouse) { |
---|
444 | var mapSpan = G.map.getBounds().toSpan(); |
---|
445 | var polySpan = polyBounds.toSpan(); |
---|
446 | var dSize = Math.max(mapSpan.lat()/polySpan.lat(), mapSpan.lng()/polySpan.lng()); |
---|
447 | var zoomLevel = G.map.getZoom() - Math.ceil(Math.log(dSize, 2)); |
---|
448 | } else { |
---|
449 | var zoomLevel = G.map.getBoundsZoomLevel(polyBounds); |
---|
450 | } |
---|
451 | var center = polyBounds.getCenter(); |
---|
452 | G.map.setCenter(center, zoomLevel); |
---|
453 | |
---|
454 | // invoke callback if provided |
---|
455 | if (G.callbacks.dragend != null) { |
---|
456 | G.callbacks.dragend(nw, ne, se, sw, nwpx, nepx, sepx, swpx); |
---|
457 | } |
---|
458 | } |
---|
459 | |
---|
460 | //re-init if sticky |
---|
461 | if (G.options.stickyZoomEnabled) { |
---|
462 | //GLog.write("stickyZoomEnabled, re-initting"); |
---|
463 | this.initCover_(); |
---|
464 | if (G.options.backButtonEnabled) this.saveBackContext_(G.options.backButtonHTML,false); // save the map context for back button |
---|
465 | G.backButtonDiv.style.display='none'; |
---|
466 | } |
---|
467 | } |
---|
468 | }; |
---|
469 | |
---|
470 | /** |
---|
471 | * Set the cover sizes according to the size of the map |
---|
472 | */ |
---|
473 | DragZoomControl.prototype.setDimensions_ = function() { |
---|
474 | var G = this.globals; |
---|
475 | var mapSize = G.map.getSize(); |
---|
476 | G.mapWidth = mapSize.width; |
---|
477 | G.mapHeight = mapSize.height; |
---|
478 | G.mapRatio = G.mapHeight / G.mapWidth; |
---|
479 | // set left:0px in next <div>s in case we inherit text-align:center from map <div> in IE. |
---|
480 | DragZoomUtil.style([G.mapCover, G.cornerTopDiv, G.cornerRightDiv, G.cornerBottomDiv, G.cornerLeftDiv], |
---|
481 | {top: '0px', left: '0px', width: G.mapWidth + 'px', height: G.mapHeight +'px'}); |
---|
482 | }; |
---|
483 | |
---|
484 | /** |
---|
485 | * Initializes styles based on global parameters |
---|
486 | */ |
---|
487 | DragZoomControl.prototype.initStyles_ = function(){ |
---|
488 | var G = this.globals; |
---|
489 | DragZoomUtil.style([G.mapCover, G.cornerTopDiv, G.cornerRightDiv, G.cornerBottomDiv, G.cornerLeftDiv], |
---|
490 | {filter: G.style.alphaIE, opacity: G.style.opacity, background:G.style.fillColor}); |
---|
491 | G.outlineDiv.style.border = G.style.border; |
---|
492 | }; |
---|
493 | |
---|
494 | /** |
---|
495 | * Function called when the zoom button's click event is captured. |
---|
496 | */ |
---|
497 | DragZoomControl.prototype.buttonclick_ = function(){ |
---|
498 | var G = this.globals; |
---|
499 | G.backButtonDiv.style.display='none'; |
---|
500 | if (G.mapCover.style.display == 'block') { // reset if clicked before dragging |
---|
501 | this.resetDragZoom_(); |
---|
502 | if (G.options.backButtonEnabled) { |
---|
503 | this.restoreBackContext_(); // pop the backStack on a button reset |
---|
504 | if (G.backStack.length==0) G.backButtonDiv.style.display='none'; |
---|
505 | } |
---|
506 | } else { |
---|
507 | this.initCover_(); |
---|
508 | if ( G.options.backButtonEnabled ) this.saveBackContext_(G.options.backButtonHTML,false); // save the map context for back button |
---|
509 | } |
---|
510 | }; |
---|
511 | |
---|
512 | /** |
---|
513 | * Back Button functionality: |
---|
514 | * Function called when the back button's click event is captured. |
---|
515 | * calls the function to set the map context back to where it was before the zoom. |
---|
516 | */ |
---|
517 | DragZoomControl.prototype.backbuttonclick_ = function(){ |
---|
518 | var G = this.globals; |
---|
519 | if (G.options.backButtonEnabled && G.backStack.length > 0) { |
---|
520 | this.restoreBackContext_(); |
---|
521 | // invoke the callback if provided |
---|
522 | if (G.callbacks['backbuttonclick'] != null) { |
---|
523 | G.callbacks.backbuttonclick(G.methodCall); |
---|
524 | } |
---|
525 | } |
---|
526 | }; |
---|
527 | |
---|
528 | /** |
---|
529 | * Back Button functionality: |
---|
530 | * Saves the map context and pushes it on the backStack for later use by the back button |
---|
531 | */ |
---|
532 | DragZoomControl.prototype.saveBackContext_ = function(text,methodCall) { |
---|
533 | var G = this.globals; |
---|
534 | var backFrame = {}; |
---|
535 | backFrame["center"] = G.map.getCenter(); |
---|
536 | backFrame["zoom"] = G.map.getZoom(); |
---|
537 | backFrame["maptype"] = G.map.getCurrentMapType(); |
---|
538 | backFrame["text"] = G.backButtonDiv.innerHTML; // this saves the previous button text |
---|
539 | backFrame["methodCall"] = methodCall; //This determines if it was an internal or method call |
---|
540 | G.backStack.push(backFrame); |
---|
541 | G.backButtonDiv.innerHTML = text; |
---|
542 | // Back Button is turned on in resetDragZoom_() |
---|
543 | }; |
---|
544 | |
---|
545 | /** |
---|
546 | * Back Button functionality: |
---|
547 | * Pops the previous map context off of the backStack and restores the map to that context |
---|
548 | */ |
---|
549 | DragZoomControl.prototype.restoreBackContext_ = function() { |
---|
550 | var G = this.globals; |
---|
551 | var backFrame = G.backStack.pop(); |
---|
552 | G.map.setCenter(backFrame["center"],backFrame["zoom"],backFrame["maptype"]); |
---|
553 | G.backButtonDiv.innerHTML = backFrame["text"]; |
---|
554 | G.methodCall = backFrame["methodCall"]; |
---|
555 | if (G.backStack.length==0) G.backButtonDiv.style.display = 'none'; // if we're at the top of the stack, hide the back botton |
---|
556 | }; |
---|
557 | |
---|
558 | /** |
---|
559 | * Shows the cover over the map |
---|
560 | */ |
---|
561 | DragZoomControl.prototype.initCover_ = function(){ |
---|
562 | var G = this.globals; |
---|
563 | G.mapPosition = DragZoomUtil.getElementPosition(G.map.getContainer()); |
---|
564 | this.setDimensions_(); |
---|
565 | this.setButtonMode_('zooming'); |
---|
566 | DragZoomUtil.style([G.mapCover], {display: 'block', background: G.style.fillColor}); |
---|
567 | DragZoomUtil.style([G.outlineDiv], {width: '0px', height: '0px'}); |
---|
568 | |
---|
569 | //invoke callback if provided |
---|
570 | if(G.callbacks['buttonclick'] != null){ |
---|
571 | G.callbacks.buttonclick(); |
---|
572 | } |
---|
573 | }; |
---|
574 | |
---|
575 | /** |
---|
576 | * Gets position of the mouse relative to the map |
---|
577 | * @param {Object} e |
---|
578 | */ |
---|
579 | DragZoomControl.prototype.getRelPos_ = function(e) { |
---|
580 | var pos = DragZoomUtil.getMousePosition(e); |
---|
581 | var G = this.globals; |
---|
582 | return {top: (pos.top - G.mapPosition.top), |
---|
583 | left: (pos.left - G.mapPosition.left)}; |
---|
584 | }; |
---|
585 | |
---|
586 | /** |
---|
587 | * Figures out the rectangle the user's trying to draw |
---|
588 | * @param {Number} startX |
---|
589 | * @param {Number} startY |
---|
590 | * @param {Object} pos |
---|
591 | * @param {Number} ratio |
---|
592 | * @return {Object} Describes the rectangle |
---|
593 | */ |
---|
594 | DragZoomControl.prototype.getRectangle_ = function(startX, startY, pos, ratio){ |
---|
595 | var left = false; |
---|
596 | var top = false; |
---|
597 | var dX = pos.left - startX; |
---|
598 | var dY = pos.top - startY; |
---|
599 | if (dX < 0) { |
---|
600 | dX = dX * -1; |
---|
601 | left = true; |
---|
602 | } |
---|
603 | if (dY < 0) { |
---|
604 | dY = dY * -1; |
---|
605 | top = true; |
---|
606 | } |
---|
607 | delta = dX > dY ? dX : dY; |
---|
608 | |
---|
609 | return { |
---|
610 | startX: startX, |
---|
611 | startY: startY, |
---|
612 | endX: startX + delta, |
---|
613 | endY: startY + parseInt(delta * ratio), |
---|
614 | width: delta, |
---|
615 | height: parseInt(delta * ratio), |
---|
616 | left:left, |
---|
617 | top:top |
---|
618 | } |
---|
619 | }; |
---|
620 | |
---|
621 | /** |
---|
622 | * Resets CSS and button display when drag zoom done |
---|
623 | */ |
---|
624 | DragZoomControl.prototype.resetDragZoom_ = function() { |
---|
625 | var G = this.globals; |
---|
626 | DragZoomUtil.style([G.mapCover, G.cornerTopDiv, G.cornerRightDiv, G.cornerBottomDiv, G.cornerLeftDiv], |
---|
627 | {display: 'none', opacity: G.style.opacity, filter: G.style.alphaIE}); |
---|
628 | G.outlineDiv.style.display = 'none'; |
---|
629 | this.setButtonMode_('normal'); |
---|
630 | if (G.options.backButtonEnabled && (G.backStack.length > 0)) G.backButtonDiv.style.display = 'block'; // show the back button |
---|
631 | }; |
---|
632 | |
---|
633 | /* utility functions in DragZoomUtil.namespace */ |
---|
634 | var DragZoomUtil={}; |
---|
635 | |
---|
636 | /** |
---|
637 | * Alias function for getting element by id |
---|
638 | * @param {String} sId |
---|
639 | * @return {Object} DOM object with sId id |
---|
640 | */ |
---|
641 | DragZoomUtil.gE = function(sId) { |
---|
642 | return document.getElementById(sId); |
---|
643 | }; |
---|
644 | |
---|
645 | /** |
---|
646 | * A general-purpose function to get the absolute position |
---|
647 | * of the mouse. |
---|
648 | * @param {Object} e Mouse event |
---|
649 | * @return {Object} Describes position |
---|
650 | */ |
---|
651 | DragZoomUtil.getMousePosition = function(e) { |
---|
652 | var posX = 0; |
---|
653 | var posY = 0; |
---|
654 | if (!e) var e = window.event; |
---|
655 | if (e.pageX || e.pageY) { |
---|
656 | posX = e.pageX; |
---|
657 | posY = e.pageY; |
---|
658 | } else if (e.clientX || e.clientY){ |
---|
659 | posX = e.clientX + |
---|
660 | (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); |
---|
661 | posY = e.clientY + |
---|
662 | (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); |
---|
663 | } |
---|
664 | return {left: posX, top: posY}; |
---|
665 | }; |
---|
666 | |
---|
667 | /** |
---|
668 | * Gets position of element |
---|
669 | * @param {Object} element |
---|
670 | * @return {Object} Describes position |
---|
671 | */ |
---|
672 | DragZoomUtil.getElementPosition = function(element) { |
---|
673 | var leftPos = element.offsetLeft; // initialize var to store calculations |
---|
674 | var topPos = element.offsetTop; // initialize var to store calculations |
---|
675 | var parElement = element.offsetParent; // identify first offset parent element |
---|
676 | while (parElement != null ) { // move up through element hierarchy |
---|
677 | leftPos += parElement.offsetLeft; // appending left offset of each parent |
---|
678 | topPos += parElement.offsetTop; |
---|
679 | parElement = parElement.offsetParent; // until no more offset parents exist |
---|
680 | } |
---|
681 | return {left: leftPos, top: topPos}; |
---|
682 | }; |
---|
683 | |
---|
684 | /** |
---|
685 | * Applies styles to DOM objects |
---|
686 | * @param {String/Object} elements Either comma-delimited list of ids |
---|
687 | * or an array of DOM objects |
---|
688 | * @param {Object} styles Hash of styles to be applied |
---|
689 | */ |
---|
690 | DragZoomUtil.style = function(elements, styles){ |
---|
691 | if (typeof(elements) == 'string') { |
---|
692 | elements = DragZoomUtil.getManyElements(elements); |
---|
693 | } |
---|
694 | for (var i = 0; i < elements.length; i++){ |
---|
695 | for (var s in styles) { |
---|
696 | elements[i].style[s] = styles[s]; |
---|
697 | } |
---|
698 | } |
---|
699 | }; |
---|
700 | |
---|
701 | /** |
---|
702 | * Gets DOM elements array according to list of IDs |
---|
703 | * @param {String} elementsString Comma-delimited list of IDs |
---|
704 | * @return {Array} Array of DOM elements corresponding to s |
---|
705 | */ |
---|
706 | DragZoomUtil.getManyElements = function(idsString){ |
---|
707 | var idsArray = idsString.split(','); |
---|
708 | var elements = []; |
---|
709 | for (var i = 0; i < idsArray.length; i++){ |
---|
710 | elements[elements.length] = DragZoomUtil.gE(idsArray[i]) |
---|
711 | }; |
---|
712 | return elements; |
---|
713 | }; |
---|