← Back to branch summary

~hsiung0911/sahana-eden/test

« back to all changes in this revision

Viewing changes to static/scripts/gis/openlayers/lib/OpenLayers/Control/PanZoomBar.js

  • Committer: eliao
  • Date: 2010-08-01 09:56:45 UTC
  • Revision ID: eliao@ibm-l3bw307-20100801095645-gsq9wcmjan0o0tby
This is my change

Show diffs side-by-side

added added

removed removed

Lines of Context:
static/scripts/gis/openlayers/lib/OpenLayers/Control/PanZoomBar.js
 
1
/* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD
 
2
 * license.  See http://svn.openlayers.org/trunk/openlayers/license.txt for the
 
3
 * full text of the license. */
 
4
 
 
5
 
 
6
/**
 
7
 * @requires OpenLayers/Control/PanZoom.js
 
8
 */
 
9
 
 
10
/**
 
11
 * Class: OpenLayers.Control.PanZoomBar
 
12
 * The PanZoomBar is a visible control composed of a
 
13
 * <OpenLayers.Control.PanPanel> and a <OpenLayers.Control.ZoomBar>. 
 
14
 * By default it is displayed in the upper left corner of the map as 4
 
15
 * directional arrows above a vertical slider.
 
16
 *
 
17
 * Inherits from:
 
18
 *  - <OpenLayers.Control.PanZoom>
 
19
 */
 
20
OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
 
21
 
 
22
    /** 
 
23
     * APIProperty: zoomStopWidth
 
24
     */
 
25
    zoomStopWidth: 18,
 
26
 
 
27
    /** 
 
28
     * APIProperty: zoomStopHeight
 
29
     */
 
30
    zoomStopHeight: 11,
 
31
 
 
32
    /** 
 
33
     * Property: slider
 
34
     */
 
35
    slider: null,
 
36
 
 
37
    /** 
 
38
     * Property: sliderEvents
 
39
     * {<OpenLayers.Events>}
 
40
     */
 
41
    sliderEvents: null,
 
42
 
 
43
    /** 
 
44
     * Property: zoombarDiv
 
45
     * {DOMElement}
 
46
     */
 
47
    zoombarDiv: null,
 
48
 
 
49
    /** 
 
50
     * Property: divEvents
 
51
     * {<OpenLayers.Events>}
 
52
     */
 
53
    divEvents: null,
 
54
 
 
55
    /** 
 
56
     * APIProperty: zoomWorldIcon
 
57
     * {Boolean}
 
58
     */
 
59
    zoomWorldIcon: false,
 
60
 
 
61
    /**
 
62
     * APIProperty: forceFixedZoomLevel
 
63
     * {Boolean} Force a fixed zoom level even though the map has 
 
64
     *     fractionalZoom
 
65
     */
 
66
    forceFixedZoomLevel: false,
 
67
 
 
68
    /**
 
69
     * Property: mouseDragStart
 
70
     * {<OpenLayers.Pixel>}
 
71
     */
 
72
    mouseDragStart: null,
 
73
 
 
74
    /**
 
75
     * Property: zoomStart
 
76
     * {<OpenLayers.Pixel>}
 
77
     */
 
78
    zoomStart: null,
 
79
 
 
80
    /**
 
81
     * Constructor: OpenLayers.Control.PanZoomBar
 
82
     */ 
 
83
    initialize: function() {
 
84
        OpenLayers.Control.PanZoom.prototype.initialize.apply(this, arguments);
 
85
    },
 
86
 
 
87
    /**
 
88
     * APIMethod: destroy
 
89
     */
 
90
    destroy: function() {
 
91
 
 
92
        this._removeZoomBar();
 
93
 
 
94
        this.map.events.un({
 
95
            "changebaselayer": this.redraw,
 
96
            scope: this
 
97
        });
 
98
 
 
99
        OpenLayers.Control.PanZoom.prototype.destroy.apply(this, arguments);
 
100
 
 
101
        delete this.mouseDragStart;
 
102
        delete this.zoomStart;
 
103
    },
 
104
    
 
105
    /**
 
106
     * Method: setMap
 
107
     * 
 
108
     * Parameters:
 
109
     * map - {<OpenLayers.Map>} 
 
110
     */
 
111
    setMap: function(map) {
 
112
        OpenLayers.Control.PanZoom.prototype.setMap.apply(this, arguments);
 
113
        this.map.events.register("changebaselayer", this, this.redraw);
 
114
    },
 
115
 
 
116
    /** 
 
117
     * Method: redraw
 
118
     * clear the div and start over.
 
119
     */
 
120
    redraw: function() {
 
121
        if (this.div != null) {
 
122
            this.removeButtons();
 
123
            this._removeZoomBar();
 
124
        }  
 
125
        this.draw();
 
126
    },
 
127
    
 
128
    /**
 
129
    * Method: draw 
 
130
    *
 
131
    * Parameters:
 
132
    * px - {<OpenLayers.Pixel>} 
 
133
    */
 
134
    draw: function(px) {
 
135
        // initialize our internal div
 
136
        OpenLayers.Control.prototype.draw.apply(this, arguments);
 
137
        px = this.position.clone();
 
138
 
 
139
        // place the controls
 
140
        this.buttons = [];
 
141
 
 
142
        var sz = new OpenLayers.Size(18,18);
 
143
        var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);
 
144
        var wposition = sz.w;
 
145
 
 
146
        if (this.zoomWorldIcon) {
 
147
            centered = new OpenLayers.Pixel(px.x+sz.w, px.y);
 
148
        }
 
149
 
 
150
        this._addButton("panup", "north-mini.png", centered, sz);
 
151
        px.y = centered.y+sz.h;
 
152
        this._addButton("panleft", "west-mini.png", px, sz);
 
153
        if (this.zoomWorldIcon) {
 
154
            this._addButton("zoomworld", "zoom-world-mini.png", px.add(sz.w, 0), sz);
 
155
            
 
156
            wposition *= 2;
 
157
        }
 
158
        this._addButton("panright", "east-mini.png", px.add(wposition, 0), sz);
 
159
        this._addButton("pandown", "south-mini.png", centered.add(0, sz.h*2), sz);
 
160
        this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0, sz.h*3+5), sz);
 
161
        centered = this._addZoomBar(centered.add(0, sz.h*4 + 5));
 
162
        this._addButton("zoomout", "zoom-minus-mini.png", centered, sz);
 
163
        return this.div;
 
164
    },
 
165
 
 
166
    /** 
 
167
    * Method: _addZoomBar
 
168
    * 
 
169
    * Parameters:
 
170
    * location - {<OpenLayers.Pixel>} where zoombar drawing is to start.
 
171
    */
 
172
    _addZoomBar:function(centered) {
 
173
        var imgLocation = OpenLayers.Util.getImagesLocation();
 
174
        
 
175
        var id = this.id + "_" + this.map.id;
 
176
        var zoomsToEnd = this.map.getNumZoomLevels() - 1 - this.map.getZoom();
 
177
        var slider = OpenLayers.Util.createAlphaImageDiv(id,
 
178
                       centered.add(-1, zoomsToEnd * this.zoomStopHeight), 
 
179
                       new OpenLayers.Size(20,9), 
 
180
                       imgLocation+"slider.png",
 
181
                       "absolute");
 
182
        this.slider = slider;
 
183
        
 
184
        this.sliderEvents = new OpenLayers.Events(this, slider, null, true,
 
185
                                            {includeXY: true});
 
186
        this.sliderEvents.on({
 
187
            "mousedown": this.zoomBarDown,
 
188
            "mousemove": this.zoomBarDrag,
 
189
            "mouseup": this.zoomBarUp,
 
190
            "dblclick": this.doubleClick,
 
191
            "click": this.doubleClick
 
192
        });
 
193
        
 
194
        var sz = new OpenLayers.Size();
 
195
        sz.h = this.zoomStopHeight * this.map.getNumZoomLevels();
 
196
        sz.w = this.zoomStopWidth;
 
197
        var div = null;
 
198
        
 
199
        if (OpenLayers.Util.alphaHack()) {
 
200
            var id = this.id + "_" + this.map.id;
 
201
            div = OpenLayers.Util.createAlphaImageDiv(id, centered,
 
202
                                      new OpenLayers.Size(sz.w, 
 
203
                                              this.zoomStopHeight),
 
204
                                      imgLocation + "zoombar.png", 
 
205
                                      "absolute", null, "crop");
 
206
            div.style.height = sz.h + "px";
 
207
        } else {
 
208
            div = OpenLayers.Util.createDiv(
 
209
                        'OpenLayers_Control_PanZoomBar_Zoombar' + this.map.id,
 
210
                        centered,
 
211
                        sz,
 
212
                        imgLocation+"zoombar.png");
 
213
        }
 
214
        
 
215
        this.zoombarDiv = div;
 
216
        
 
217
        this.divEvents = new OpenLayers.Events(this, div, null, true, 
 
218
                                                {includeXY: true});
 
219
        this.divEvents.on({
 
220
            "mousedown": this.divClick,
 
221
            "mousemove": this.passEventToSlider,
 
222
            "dblclick": this.doubleClick,
 
223
            "click": this.doubleClick
 
224
        });
 
225
        
 
226
        this.div.appendChild(div);
 
227
 
 
228
        this.startTop = parseInt(div.style.top);
 
229
        this.div.appendChild(slider);
 
230
 
 
231
        this.map.events.register("zoomend", this, this.moveZoomBar);
 
232
 
 
233
        centered = centered.add(0, 
 
234
            this.zoomStopHeight * this.map.getNumZoomLevels());
 
235
        return centered; 
 
236
    },
 
237
    
 
238
    /**
 
239
     * Method: _removeZoomBar
 
240
     */
 
241
    _removeZoomBar: function() {
 
242
        this.sliderEvents.un({
 
243
            "mousedown": this.zoomBarDown,
 
244
            "mousemove": this.zoomBarDrag,
 
245
            "mouseup": this.zoomBarUp,
 
246
            "dblclick": this.doubleClick,
 
247
            "click": this.doubleClick
 
248
        });
 
249
        this.sliderEvents.destroy();
 
250
 
 
251
        this.divEvents.un({
 
252
            "mousedown": this.divClick,
 
253
            "mousemove": this.passEventToSlider,
 
254
            "dblclick": this.doubleClick,
 
255
            "click": this.doubleClick
 
256
        });
 
257
        this.divEvents.destroy();
 
258
        
 
259
        this.div.removeChild(this.zoombarDiv);
 
260
        this.zoombarDiv = null;
 
261
        this.div.removeChild(this.slider);
 
262
        this.slider = null;
 
263
        
 
264
        this.map.events.unregister("zoomend", this, this.moveZoomBar);
 
265
    },
 
266
    
 
267
    /**
 
268
     * Method: passEventToSlider
 
269
     * This function is used to pass events that happen on the div, or the map,
 
270
     * through to the slider, which then does its moving thing.
 
271
     *
 
272
     * Parameters:
 
273
     * evt - {<OpenLayers.Event>} 
 
274
     */
 
275
    passEventToSlider:function(evt) {
 
276
        this.sliderEvents.handleBrowserEvent(evt);
 
277
    },
 
278
    
 
279
    /**
 
280
     * Method: divClick
 
281
     * Picks up on clicks directly on the zoombar div
 
282
     *           and sets the zoom level appropriately.
 
283
     */
 
284
    divClick: function (evt) {
 
285
        if (!OpenLayers.Event.isLeftClick(evt)) {
 
286
            return;
 
287
        }
 
288
        var y = evt.xy.y;
 
289
        var top = OpenLayers.Util.pagePosition(evt.object)[1];
 
290
        var levels = (y - top)/this.zoomStopHeight;
 
291
        if(this.forceFixedZoomLevel || !this.map.fractionalZoom) {
 
292
            levels = Math.floor(levels);
 
293
        }    
 
294
        var zoom = (this.map.getNumZoomLevels() - 1) - levels; 
 
295
        zoom = Math.min(Math.max(zoom, 0), this.map.getNumZoomLevels() - 1);
 
296
        this.map.zoomTo(zoom);
 
297
        OpenLayers.Event.stop(evt);
 
298
    },
 
299
    
 
300
    /*
 
301
     * Method: zoomBarDown
 
302
     * event listener for clicks on the slider
 
303
     *
 
304
     * Parameters:
 
305
     * evt - {<OpenLayers.Event>} 
 
306
     */
 
307
    zoomBarDown:function(evt) {
 
308
        if (!OpenLayers.Event.isLeftClick(evt)) {
 
309
            return;
 
310
        }
 
311
        this.map.events.on({
 
312
            "mousemove": this.passEventToSlider,
 
313
            "mouseup": this.passEventToSlider,
 
314
            scope: this
 
315
        });
 
316
        this.mouseDragStart = evt.xy.clone();
 
317
        this.zoomStart = evt.xy.clone();
 
318
        this.div.style.cursor = "move";
 
319
        // reset the div offsets just in case the div moved
 
320
        this.zoombarDiv.offsets = null; 
 
321
        OpenLayers.Event.stop(evt);
 
322
    },
 
323
    
 
324
    /*
 
325
     * Method: zoomBarDrag
 
326
     * This is what happens when a click has occurred, and the client is
 
327
     * dragging.  Here we must ensure that the slider doesn't go beyond the
 
328
     * bottom/top of the zoombar div, as well as moving the slider to its new
 
329
     * visual location
 
330
     *
 
331
     * Parameters:
 
332
     * evt - {<OpenLayers.Event>} 
 
333
     */
 
334
    zoomBarDrag:function(evt) {
 
335
        if (this.mouseDragStart != null) {
 
336
            var deltaY = this.mouseDragStart.y - evt.xy.y;
 
337
            var offsets = OpenLayers.Util.pagePosition(this.zoombarDiv);
 
338
            if ((evt.clientY - offsets[1]) > 0 && 
 
339
                (evt.clientY - offsets[1]) < parseInt(this.zoombarDiv.style.height) - 2) {
 
340
                var newTop = parseInt(this.slider.style.top) - deltaY;
 
341
                this.slider.style.top = newTop+"px";
 
342
                this.mouseDragStart = evt.xy.clone();
 
343
            }
 
344
            OpenLayers.Event.stop(evt);
 
345
        }
 
346
    },
 
347
    
 
348
    /*
 
349
     * Method: zoomBarUp
 
350
     * Perform cleanup when a mouseup event is received -- discover new zoom
 
351
     * level and switch to it.
 
352
     *
 
353
     * Parameters:
 
354
     * evt - {<OpenLayers.Event>} 
 
355
     */
 
356
    zoomBarUp:function(evt) {
 
357
        if (!OpenLayers.Event.isLeftClick(evt)) {
 
358
            return;
 
359
        }
 
360
        if (this.mouseDragStart) {
 
361
            this.div.style.cursor="";
 
362
            this.map.events.un({
 
363
                "mouseup": this.passEventToSlider,
 
364
                "mousemove": this.passEventToSlider,
 
365
                scope: this
 
366
            });
 
367
            var deltaY = this.zoomStart.y - evt.xy.y;
 
368
            var zoomLevel = this.map.zoom;
 
369
            if (!this.forceFixedZoomLevel && this.map.fractionalZoom) {
 
370
                zoomLevel += deltaY/this.zoomStopHeight;
 
371
                zoomLevel = Math.min(Math.max(zoomLevel, 0), 
 
372
                                     this.map.getNumZoomLevels() - 1);
 
373
            } else {
 
374
                zoomLevel += Math.round(deltaY/this.zoomStopHeight);
 
375
            }
 
376
            this.map.zoomTo(zoomLevel);
 
377
            this.mouseDragStart = null;
 
378
            this.zoomStart = null;
 
379
            OpenLayers.Event.stop(evt);
 
380
        }
 
381
    },
 
382
    
 
383
    /*
 
384
    * Method: moveZoomBar
 
385
    * Change the location of the slider to match the current zoom level.
 
386
    */
 
387
    moveZoomBar:function() {
 
388
        var newTop = 
 
389
            ((this.map.getNumZoomLevels()-1) - this.map.getZoom()) * 
 
390
            this.zoomStopHeight + this.startTop + 1;
 
391
        this.slider.style.top = newTop + "px";
 
392
    },    
 
393
    
 
394
    CLASS_NAME: "OpenLayers.Control.PanZoomBar"
 
395
});