OpenLayers OpenLayers

Ticket #1089: scaleline.2.patch

File scaleline.2.patch, 15.7 kB (added by tschaub, 1 year ago)

ScaleLine control

  • tests/Control/test_ScaleLine.html

    old new  
     1<html> 
     2<head> 
     3  <script src="../../lib/OpenLayers.js"></script> 
     4  <script type="text/javascript"> 
     5 
     6    function test_initialize(t) { 
     7        t.plan(2);     
     8        var control = new OpenLayers.Control.ScaleLine(); 
     9        t.ok(control instanceof OpenLayers.Control.ScaleLine, "new OpenLayers.Control returns object" ); 
     10        t.eq(control.displayClass,  "olControlScaleLine", "displayClass is correct" ); 
     11        control.destroy(); 
     12    } 
     13 
     14    function test_initwithelem(t) { 
     15        t.plan(1); 
     16        var control = new OpenLayers.Control.ScaleLine({"div":OpenLayers.Util.getElement('ScaleLine')}); 
     17        t.ok(true, "If this happens, then we passed. (FF throws an error above otherwise)"); 
     18        control.destroy(); 
     19    } 
     20 
     21    function test_calcDegrees(t) { 
     22        t.plan(5); 
     23        var control = new OpenLayers.Control.ScaleLine(); 
     24        t.ok(control instanceof OpenLayers.Control.ScaleLine, "new OpenLayers.Control returns object" ); 
     25        var map = new OpenLayers.Map('map'); 
     26        var layer = new OpenLayers.Layer.WMS('Test Layer', "http://octo.metacarta.com/cgi-bin/mapserv", {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'}); 
     27        map.addLayer(layer); 
     28        map.zoomTo(0); 
     29        map.addControl(control); 
     30        t.eq(control.div.firstChild.style.visibility, "visible", "top scale is present."); 
     31        t.eq(control.div.lastChild.style.visibility, "visible", "bottom scale is present."); 
     32        t.eq(control.div.firstChild.innerHTML, "10000 km", "top scale has correct text."); 
     33        t.eq(control.div.lastChild.innerHTML, "5000 mi", "bottom scale has correct text."); 
     34        map.destroy(); 
     35    } 
     36 
     37    function test_calcsOther (t) { 
     38        t.plan(5); 
     39        var control = new OpenLayers.Control.ScaleLine(); 
     40        t.ok(control instanceof OpenLayers.Control.ScaleLine, "new OpenLayers.Control returns object" ); 
     41        var map = new OpenLayers.Map('map'); 
     42    map.units = "mi"; 
     43        var layer = new OpenLayers.Layer.WMS('Test Layer', "http://octo.metacarta.com/cgi-bin/mapserv", {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'}); 
     44        map.addLayer(layer); 
     45        map.zoomTo(0); 
     46        map.addControl(control); 
     47        t.eq(control.div.firstChild.style.visibility, "visible", "top scale is present."); 
     48        t.eq(control.div.lastChild.style.visibility, "visible", "bottom scale is present."); 
     49        t.eq(control.div.firstChild.innerHTML, "100 km", "top scale has correct text."); 
     50        t.eq(control.div.lastChild.innerHTML, "100 mi", "bottom scale has correct text."); 
     51        map.destroy(); 
     52    } 
     53 
     54    function test_calcMeters (t) {       
     55        t.plan(5);        
     56        // this example is taken from the projected-map.html OpenLayers example 
     57        var lat = 900863;  
     58        var lon = 235829; 
     59        var zoom = 6; 
     60        var map = new OpenLayers.Map( 'map' ); 
     61        var basemap = new OpenLayers.Layer.WMS( "Boston",  
     62          "http://boston.freemap.in/cgi-bin/mapserv?", 
     63                { 
     64                 map: '/www/freemap.in/boston/map/gmaps.map',  
     65                 layers: 'border,water,roads,rapid_transit,buildings',  
     66                 format: 'png',  
     67                 transparent: 'off' 
     68                }, 
     69         
     70            { 
     71              maxExtent: new OpenLayers.Bounds(33861, 717605, 330846, 1019656),  
     72              maxResolution: 296985/1024,   
     73              projection:"EPSG:2805",     // Used in WMS/WFS requests.    
     74              units: "m"                  // Only neccesary for working with scales. 
     75              } ); 
     76             
     77        map.addLayer(basemap);       
     78        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); 
     79        map.addControl(new OpenLayers.Control.LayerSwitcher());              
     80        var control = new OpenLayers.Control.ScaleLine(); 
     81        t.ok( control instanceof OpenLayers.Control.ScaleLine, "new OpenLayers.Control returns object" ); 
     82        map.addControl(control); 
     83        t.eq(control.div.firstChild.style.visibility, "visible", "top scale is present."); 
     84        t.eq(control.div.lastChild.style.visibility, "visible", "bottom scale is present."); 
     85        t.eq(control.div.firstChild.innerHTML, "20000 km", "top scale has correct text."); 
     86        t.eq(control.div.lastChild.innerHTML, "20000 mi", "bottom scale has correct text."); 
     87        map.destroy(); 
     88    } 
     89     
     90    function test_useArguments (t) { 
     91        t.plan(5); 
     92        var control = new OpenLayers.Control.ScaleLine({topOutUnits: 'dd'} ); 
     93        t.ok( control instanceof OpenLayers.Control.ScaleLine, "new OpenLayers.Control returns object" ); 
     94        var map = new OpenLayers.Map('map'); 
     95        var layer = new OpenLayers.Layer.WMS('Test Layer', "http://octo.metacarta.com/cgi-bin/mapserv", {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'}); 
     96        map.addLayer(layer); 
     97        map.zoomTo(0); 
     98        map.addControl(control); 
     99        t.eq(control.div.firstChild.style.visibility, "visible", "top scale is present."); 
     100        t.eq(control.div.lastChild.style.visibility, "visible", "bottom scale is present."); 
     101        t.eq(control.div.firstChild.innerHTML, "100 dd", "top scale has correct text."); 
     102        t.eq(control.div.lastChild.innerHTML, "5000 mi", "bottom scale has correct text."); 
     103        map.destroy(); 
     104    } 
     105 
     106    function test_respectZoom (t) { 
     107        t.plan(5); 
     108 
     109        // ok, switch the units we use for zoomed in values.  This will test that we're both 
     110        //   correctly respecting all specified parameters and that we're switching to the  
     111        //   "in" units when zoomed in 
     112        var control = new OpenLayers.Control.ScaleLine({topOutUnits : "mi", bottomOutUnits: "km", topInUnits: 'ft', bottomInUnits: 'm'}); 
     113        t.ok( control instanceof OpenLayers.Control.ScaleLine, "new OpenLayers.Control returns object" ); 
     114        var map = new OpenLayers.Map('map'); 
     115        var layer = new OpenLayers.Layer.WMS('Test Layer', "http://octo.metacarta.com/cgi-bin/mapserv", {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'}); 
     116        map.addLayer(layer); 
     117        map.zoomTo(0); 
     118        map.addControl(control); 
     119        t.eq(control.div.firstChild.innerHTML, "5000 mi", "top scale respects constructor parameter."); 
     120        t.eq(control.div.lastChild.innerHTML, "10000 km", "bottom scale respects constructor parameter."); 
     121        map.zoomIn(); 
     122        map.zoomIn(); 
     123        map.zoomIn(); 
     124        map.zoomIn(); 
     125        map.zoomIn(); 
     126        map.zoomIn(); 
     127        map.zoomIn(); 
     128        map.zoomIn(); 
     129        map.zoomIn(); 
     130        map.zoomIn(); 
     131        map.zoomIn(); 
     132         
     133        t.eq(control.div.firstChild.innerHTML, "10000 ft", "top scale zooms in & respects constructor parameter."); 
     134        t.eq(control.div.lastChild.innerHTML, "5000 m", "bottom scale zooms in & respects constructor parameter."); 
     135        map.destroy(); 
     136    }    
     137  </script> 
     138</head> 
     139<body> 
     140    <a id="ScaleLine" href="">ScaleLine</a> <br /> 
     141    <div id="map" style="width: 1024px; height: 512px;"/> 
     142</body> 
     143</html> 

  • tests/list-tests.html

    old new  
    9393    <li>Control/test_PanZoomBar.html</li> 
    9494    <li>Control/test_Permalink.html</li> 
    9595    <li>Control/test_Scale.html</li> 
     96    <li>Control/test_ScaleLine.html</li> 
    9697    <li>Control/test_SelectFeature.html</li> 
    9798    <li>test_Handler.html</li> 
    9899    <li>Handler/test_Click.html</li> 

  • theme/default/style.css

    old new  
    2424    position: absolute; 
    2525    font-size: smaller; 
    2626} 
     27.olControlScaleLine { 
     28   left: 10px; 
     29   bottom: 15px; 
     30   font-size: xx-small; 
     31} 
     32.olControlScaleLineBottom { 
     33   border: solid 2px black; 
     34   border-bottom: none; 
     35   margin-top:-2px; 
     36   text-align: center; 
     37} 
     38.olControlScaleLineTop { 
     39   border: solid 2px black; 
     40   border-top: none; 
     41   text-align: center; 
     42} 
     43 
    2744.olControlPermalink { 
    2845    right: 3px; 
    2946    bottom: 1.5em; 

  • lib/OpenLayers/Control/ScaleLine.js

    old new  
     1/* Copyright (c) 2006-2007 MetaCarta, Inc., published under a modified BSD license. 
     2 * See http://svn.openlayers.org/trunk/openlayers/repository-license.txt  
     3 * for the full text of the license. */ 
     4 
     5 
     6/** 
     7 * @requires OpenLayers/Control.js 
     8 * 
     9 * Class: OpenLayers.Control.ScaleLine 
     10 * Display a small line indicator representing the current map scale on the map. 
     11 *  
     12 * Inherits from: 
     13 *  - <OpenLayers.Control> 
     14 *   
     15 * Is a very close copy of: 
     16 *  - <OpenLayers.Control.Scale> 
     17 */ 
     18OpenLayers.Control.ScaleLine = OpenLayers.Class(OpenLayers.Control, { 
     19     
     20     
     21    /** 
     22     * Property: maxWidth 
     23     * {Integer} Maximum width of the scale line in pixels.  Default is 100. 
     24     */ 
     25    maxWidth: 100, 
     26 
     27    /** 
     28     * Property: topOutUnits 
     29     * {String} Units for zoomed out on top bar.  Default is km. 
     30     */ 
     31    topOutUnits: "km", 
     32     
     33    /** 
     34     * Property: topInUnits 
     35     * {String} Units for zoomed in on top bar.  Default is m. 
     36     */ 
     37    topInUnits: "m", 
     38 
     39    /** 
     40     * Property: bottomOutUnits 
     41     * {String} Units for zoomed out on bottom bar.  Default is mi. 
     42     */ 
     43    bottomOutUnits: "mi", 
     44 
     45    /** 
     46     * Property: bottomInUnits 
     47     * {String} Units for zoomed in on bottom bar.  Default is ft. 
     48     */ 
     49    bottomInUnits: "ft", 
     50     
     51    /** 
     52     * Property: eTop 
     53     * {DOMElement} 
     54     */ 
     55    eTop: null, 
     56 
     57    /** 
     58     * Property: eBottom 
     59     * {DOMElement} 
     60     */ 
     61    eBottom:null, 
     62 
     63    /** 
     64     * Constructor: OpenLayers.ScaleLine 
     65     * Create a new scale line control. 
     66     *  
     67     * Parameters: 
     68     * options - {Object} An optional object whose properties will be used 
     69     *     to extend the control. 
     70     */ 
     71    initialize: function(options) { 
     72        OpenLayers.Control.prototype.initialize.apply(this, [options]);      
     73    }, 
     74 
     75    /** 
     76     * Method: draw 
     77     *  
     78     * Returns: 
     79     * {DOMElement} 
     80     */ 
     81    draw: function() { 
     82        OpenLayers.Control.prototype.draw.apply(this, arguments); 
     83        if (!this.eTop) { 
     84            this.div.className = this.displayClass; 
     85            this.div.style.display = "block"; 
     86            this.div.style.position = "absolute"; 
     87             
     88            // stick in the top bar 
     89            this.eTop = document.createElement("div"); 
     90            this.eTop.className = this.displayClass + "Top"; 
     91            var theLen = this.topInUnits.length; 
     92            this.div.appendChild(this.eTop); 
     93            if((this.topOutUnits == "") || (this.topInUnits == "")) { 
     94                this.eTop.style.visibility = "hidden"; 
     95            } else { 
     96                this.eTop.style.visibility = "visible"; 
     97            } 
     98 
     99            // and the bottom bar 
     100            this.eBottom = document.createElement("div"); 
     101            this.eBottom.className = this.displayClass + "Bottom"; 
     102            this.div.appendChild(this.eBottom); 
     103            if((this.bottomOutUnits == "") || (this.bottomInUnits == "")) { 
     104                this.eBottom.style.visibility = "hidden"; 
     105            } else { 
     106                this.eBottom.style.visibility = "visible"; 
     107            } 
     108        } 
     109        this.map.events.register('moveend', this, this.update); 
     110        this.update(); 
     111        return this.div; 
     112    }, 
     113 
     114 
     115    /**  
     116     * Method: getBarLen 
     117     * Given a number, round it down to the nearest 1,2,5 times a power of 10. 
     118     * That seems a fairly useful set of number groups to use. 
     119     *  
     120     * Parameters: 
     121     * maxLen - {float}  the number we're rounding down from 
     122     *  
     123     * Returns: 
     124     * {Float} the rounded number (less than or equal to maxLen) 
     125     */ 
     126    getBarLen: function(maxLen) { 
     127        // nearest power of 10 lower than maxLen 
     128        var digits = parseInt(Math.log(maxLen) / Math.log(10)); 
     129        var pow10 = Math.pow(10, digits); 
     130         
     131        // ok, find first character 
     132        var firstChar = parseInt(maxLen / pow10); 
     133 
     134        // right, put it into the correct bracket 
     135        var barLen; 
     136        if(firstChar > 5) { 
     137            barLen = 5; 
     138        } else if(firstChar > 2) { 
     139            barLen = 2; 
     140        } else { 
     141            barLen = 1; 
     142        } 
     143 
     144        // scale it up the correct power of 10 
     145        return barLen * pow10; 
     146    }, 
     147 
     148    /** 
     149     * Method: update 
     150     * Update the size of the bars, and the labels they contain. 
     151     */ 
     152    update: function() { 
     153        var res = this.map.getResolution(); 
     154        if (!res) { 
     155            return; 
     156        } 
     157 
     158        // convert maxWidth to map units 
     159        var maxSizeData = this.maxWidth * res;   
     160 
     161        // decide whether to use large or small scale units      
     162        var topUnits; 
     163        var bottomUnits; 
     164        if(maxSizeData > 0.1) { 
     165            topUnits = this.topOutUnits; 
     166            bottomUnits = this.bottomOutUnits; 
     167        } else { 
     168            topUnits = this.topInUnits; 
     169            bottomUnits = this.bottomInUnits; 
     170        } 
     171 
     172        // and to map units units 
     173        var curMapUnits = this.map.units; 
     174        var inches = OpenLayers.INCHES_PER_UNIT; 
     175        var topMax = maxSizeData * inches[curMapUnits] / inches[topUnits]; 
     176        var bottomMax = maxSizeData * inches[curMapUnits] / inches[bottomUnits]; 
     177 
     178        // now trim this down to useful block length 
     179        var topRounded = this.getBarLen(topMax); 
     180        var bottomRounded = this.getBarLen(bottomMax); 
     181 
     182        // and back to display units 
     183        topMax = topRounded / inches[curMapUnits] * inches[topUnits]; 
     184        bottomMax = bottomRounded / inches[curMapUnits] * inches[bottomUnits]; 
     185 
     186        // and to pixel units 
     187        var topPx = topMax / res; 
     188        var bottomPx = bottomMax / res; 
     189         
     190        // now set the pixel widths 
     191        this.eTop.style.width = Math.round(topPx) + "px"; 
     192        this.eBottom.style.width = Math.round(bottomPx) + "px";  
     193         
     194        // and the values inside them 
     195        this.eTop.innerHTML = topRounded + " " + topUnits; 
     196        this.eBottom.innerHTML = bottomRounded + " " + bottomUnits ; 
     197    },  
     198 
     199    CLASS_NAME: "OpenLayers.Control.ScaleLine" 
     200}); 
     201 

  • lib/OpenLayers.js

    old new  
    149149            "OpenLayers/Control/ArgParser.js", 
    150150            "OpenLayers/Control/Permalink.js", 
    151151            "OpenLayers/Control/Scale.js", 
     152            "OpenLayers/Control/ScaleLine.js", 
    152153            "OpenLayers/Control/LayerSwitcher.js", 
    153154            "OpenLayers/Control/DrawFeature.js", 
    154155            "OpenLayers/Control/DragFeature.js", 

  • examples/controls.html

    old new  
    2020                map.addControl(new OpenLayers.Control.MouseToolbar()); 
    2121                map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false})); 
    2222                map.addControl(new OpenLayers.Control.Permalink()); 
     23                map.addControl(new OpenLayers.Control.ScaleLine()); 
    2324                map.addControl(new OpenLayers.Control.Permalink('permalink')); 
    2425                map.addControl(new OpenLayers.Control.MousePosition()); 
    2526                map.addControl(new OpenLayers.Control.OverviewMap());