OpenLayers OpenLayers

Changeset 27

Show
Ignore:
Timestamp:
05/13/06 10:13:32 (2 years ago)
Author:
crschmidt
Message:

Convert zoom levels to be a slider. Graphics need much improvement, and the code also needs a good twice over, but it works.

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • trunk/openlayers/lib/OpenLayers/Control/PanZoom.js

    r26 r27  
    3232        this._addButton("pandown", "south-mini.png", centered.addY(sz.h*2), sz); 
    3333        this._addButton("zoomin", "zoom-plus-mini.png", centered.addY(sz.h*3), sz); 
    34         centered = centered.addY(sz.h*3); 
    35         for (var i=this.map.getZoomLevels(); i--; i>=0) { 
    36             centered = centered.addY(sz.h); 
    37             this._addButton("zoomLevel"+i, "zoom-world-mini.png", centered, sz); 
    38         } 
    39         this._addButton("zoomout", "zoom-minus-mini.png", centered.addY(sz.h), sz); 
     34        centered = centered.addY(sz.h*4); 
     35        centered = this._addZoomBar(centered,sz.copyOf()); 
     36        this._addButton("zoomout", "zoom-minus-mini.png", centered, sz); 
    4037        return this.div; 
    4138    }, 
    42  
     39    _addZoomBar:function(centered,sz) { 
     40        var zoomStopSize = 15; 
     41        var slider = OpenLayers.Util.createImage("img/slider.png", 
     42                       new OpenLayers.Pixel(22,9),  
     43                       centered.addY((this.map.getZoomLevels())*zoomStopSize), "absolute", 
     44                       "OpenLayers_Control_PanZoom_Slider"); 
     45        sz.h = zoomStopSize*(this.map.getZoomLevels()+1); 
     46        sz.w = 17; 
     47        var div = OpenLayers.Util.createDiv('OpenLayers_Control_PanZoom_Zoombar',centered,sz); 
     48        div.style.backgroundImage = "url(img/zoombar.png)"; 
     49        div.onmousedown  = this.doubleClick.bindAsEventListener(div); 
     50        div.onmousemove  = this.zoomBarDivDrag.bindAsEventListener(div); 
     51        div.ondblclick  = this.doubleClick.bindAsEventListener(div); 
     52        div.slider = slider; 
     53        this.div.appendChild(div); 
     54        slider.startTop = div.style.top; 
     55        slider.getMousePosition = this.getMousePosition; 
     56        slider.onmousedown = this.zoomBarDown.bindAsEventListener(slider); 
     57        slider.onmousemove = this.zoomBarDrag.bindAsEventListener(slider); 
     58        slider.onmouseup   = this.zoomBarUp.bindAsEventListener(slider); 
     59        slider.ondblclick  = this.doubleClick.bindAsEventListener(slider); 
     60        slider.div = this.div; 
     61        slider.map = this.map; 
     62        slider.zIndex = this.div.zIndex + 5; 
     63        this.div.appendChild(slider); 
     64        this.buttons.append(slider); 
     65        centered = centered.addY(zoomStopSize*(this.map.getZoomLevels()+1)); 
     66        return centered;  
     67    }, 
     68    getMousePosition: function (evt) { 
     69        var offsets = Position.page(this.div);  
     70        return new OpenLayers.Pixel( 
     71                        evt.clientX - offsets[0],  
     72                        evt.clientY - offsets[1]);  
     73    }, 
     74    zoomBarDown:function(evt) { 
     75        evt.xy = this.getMousePosition(evt); 
     76        this.mouseDragStart = evt.xy.copyOf(); 
     77        this.zoomStart = evt.xy.copyOf(); 
     78        this.div.style.cursor = "move"; 
     79        Event.stop(evt); 
     80    }, 
     81    zoomBarDivDrag: function(evt) { 
     82        this.slider.onmousemove(evt); 
     83    }, 
     84    zoomBarDrag:function(evt) { 
     85        if (this.mouseDragStart != null) { 
     86            evt.xy = this.getMousePosition(evt); 
     87            var deltaY = this.mouseDragStart.y - evt.xy.y 
     88            this.style.top = (parseInt(this.style.top)-deltaY)+"px"; 
     89            this.mouseDragStart = evt.xy.copyOf(); 
     90        } 
     91    }, 
     92    zoomBarUp:function(evt) { 
     93        evt.xy = this.getMousePosition(evt); 
     94        var deltaY = this.zoomStart.y - evt.xy.y 
     95        this.map.zoomTo(this.map.zoom + Math.round(deltaY/15)); 
     96        this.style.top = (this.map.getZoomLevels() - this.map.getZoom())*15+ 
     97                          parseInt(document.getElementById("OpenLayers_Control_PanZoom_Zoombar").style.top) + 3; 
     98        this.div.style.cursor="default"; 
     99        this.mouseDragStart = null; 
     100        Event.stop(evt); 
     101    }, 
    43102    _addButton:function(id, img, xy, sz) { 
    44103        var imgLocation = OpenLayers.Util.getImagesLocation() + img; 
    …… 
    66125     
    67126    buttonDown: function (evt) { 
    68         if (this.action.startsWith("zoomLevel")) { 
    69             this.map.zoomTo(parseInt(this.action.substr(9,this.action.length))); 
    70         } 
    71127        switch (this.action) { 
    72             case "zoomLevel0": 
    73                 this.map.zoomExtent(); 
    74                 break; 
    75128            case "panup":  
    76129                var resolution = this.map.getResolution();