Ticket #1089: scaleline.patch

theme/default/style.css

@@ -24 +24 @@
-    position: absolute;
-    font-size: smaller;
-}
+.olControlScaleLine {
+    left: 3px;
+    bottom: 8em;
+    font-size: xx-small;
+    text-align:center;
+}
+.olControlScaleLine div {
+    border: solid 2px black;
+}
+.olControlScaleLineBottom {
+    margin-top:-2px;
+}
+
-.olControlPermalink {
-    right: 3px;
-    bottom: 1.5em;

tests/list-tests.html

@@ -78 +78 @@
-    <li>test_Control.html</li>
-    <li>Control/test_Attribution.html</li>
-    <li>Control/test_Button.html</li>
+    <li>Control/test_ScaleLine.html</li>
-    <li>Control/test_DragFeature.html</li>
-    <li>Control/test_DragPan.html</li>
-    <li>Control/test_LayerSwitcher.html</li>

lib/OpenLayers/Control/ScaleLine.js

@@ +1 @@
+/* Copyright (c) 2006-2007 MetaCarta, Inc., published under a modified BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/repository-license.txt 
+ * for the full text of the license. */
+
+
+/**
+ * @requires OpenLayers/Control.js
+ *
+ * Class: OpenLayers.Control.ScaleLine
+ * Display a small line indicator representing the current map scale on the map.
+ * Inherits from:
+ *  - <OpenLayers.Control>
+ * Is a very close copy of:
+ *  - <OpenLayers.Control.Scale>
+ */
+OpenLayers.Control.ScaleLine = OpenLayers.Class(OpenLayers.Control, {
+    
+    /** parameter: topOutUnits
+     *  units for zoomed out on top bar
+     * {String}
+     */
+    topOutUnits: "km",
+    
+    /** parameter: topInUnits
+     *  units for zoomed in on top bar
+     * {String}
+     */
+    topInUnits: "m",
+
+    /** parameter: bottomOutUnits
+     *  units for zoomed out on bottom bar
+     * {String}
+     */
+    bottomOutUnits: "mi",
+
+    /** parameter: bottomInUnits
+     *  units for zoomed in on bottom bar
+     * {String}
+     */
+    bottomInUnits: "ft",
+    
+
+    /**
+     * Property: UI elements
+     * {DOMElement}
+     */
+    eTop: null,
+    eBottom:null,
+    
+    
+    /**
+     * Constructor: OpenLayers.ScaleLine 
+     * 
+     * Parameters:
+     * options - {Object} An optional object whose properties will be used
+     *     to extend the control.
+     */
+    initialize: function(options) {
+        OpenLayers.Control.prototype.initialize.apply(this, [options]);     
+    },
+
+    /**
+     * Method: draw
+     * 
+     * Returns:
+     * {DOMElemen}
+     */    
+    draw: function() {
+        OpenLayers.Control.prototype.draw.apply(this, arguments);
+        if (!this.eTop) {
+            this.div.className = this.displayClass;
+            this.div.style.display = "block;";
+            this.div.style.position = "absolute;"           
+            
+            // stick in the top bar
+            this.eTop = document.createElement("div");
+            this.eTop.className = this.displayClass + "Top";
+            this.eTop.style.borderTopStyle = "none;";
+            var theLen = this.topInUnits.length;
+            this.div.appendChild(this.eTop);
+            if((this.topOutUnits == "") || (this.topInUnits == ""))
+                this.eTop.style.visibility = "hidden;";
+            else 
+                this.eTop.style.visibility = "visible;";
+
+            // and the bottom bar
+            this.eBottom = document.createElement("div");
+            this.eBottom.className = this.displayClass + "Bottom";
+            this.eBottom.style.borderBottomStyle = "none;";
+            this.div.appendChild(this.eBottom);
+            if((this.bottomOutUnits == "") || (this.bottomInUnits == ""))
+                this.eBottom.style.visibility = "hidden;";
+            else 
+                this.eBottom.style.visibility = "visible;";
+        }               
+        this.map.events.register( 'moveend', this, this.updateScale);
+        this.updateScale();
+        return this.div;
+    },
+
+
+    /** 
+     * Method: getBarLen
+     * Given a number, round it down to the nearest 1,2,5 times a power of 10.  That seems a fairly useful set of 
+     * number groups to use.
+     * Parameters:
+     * maxLen - {float}  the number we're rounding down from
+     * Returns:
+     * {Float} the rounded number (less than or equal to maxLen)
+     */
+    getBarLen: function(maxLen){
+        // how many chars is it?
+        var digits = parseInt(Math.log(maxLen)/Math.log(10));
+        
+        var pow10 = Math.pow(10, digits);
+        
+        // ok, find first character
+        var firstChar = parseInt(maxLen / pow10);
+
+        // right, put it into the correct bracket
+        var barLen;
+        if(firstChar > 5)
+        {
+            barLen = 5;     
+        }
+        else if(firstChar > 2)
+        {       
+            barLen = 2;
+        }
+        else            
+            barLen = 1;
+            
+        // scale it up the correct power of 10
+        barLen *= pow10;
+            
+        // done.
+        return barLen;
+    },
+   
+    /**
+     * Method: updateScale
+     * update the size of the bars, and the labels they contain
+     */
+    updateScale: function() {
+        var res = this.map.getResolution();
+        if (!res) return;
+        
+        // ok, what's the max size of bar to draw
+        var maxSizePx = 100;
+        
+        // ok, convert it to data units
+        var maxSizeData = maxSizePx * res;  
+        
+        // coarse check for whether to use large (km) units or small (m) units
+        var topUnits;
+        var bottomUnits;
+        
+        // what are the units of the current map?
+        var curMapUnits = this.map.units;
+
+        // decide whether to use large or small scale units     
+        if(maxSizeData > 0.1)
+        {
+            topUnits = this.topOutUnits;
+            bottomUnits = this.bottomOutUnits;
+        }
+        else
+        {
+            topUnits = this.topInUnits;
+            bottomUnits = this.bottomInUnits;
+        }
+        
+        // and to relevant units
+        var topMax = maxSizeData * OpenLayers.INCHES_PER_UNIT[curMapUnits] / OpenLayers.INCHES_PER_UNIT[topUnits];
+        var bottomMax = maxSizeData * OpenLayers.INCHES_PER_UNIT[curMapUnits] / OpenLayers.INCHES_PER_UNIT[bottomUnits];
+
+        // now trim this down to useful block length
+        var topRounded = this.getBarLen(topMax);
+        var bottomRounded = this.getBarLen(bottomMax);
+
+        // and back to data units
+        topMax = topRounded / OpenLayers.INCHES_PER_UNIT[curMapUnits] * OpenLayers.INCHES_PER_UNIT[topUnits];
+        bottomMax = bottomRounded / OpenLayers.INCHES_PER_UNIT[curMapUnits] * OpenLayers.INCHES_PER_UNIT[bottomUnits];
+        
+        // and to screen units
+        var topPx = topMax / res;
+        var bottomPx = bottomMax / res;
+        
+        // now set the widths       
+        this.eTop.style.width= topPx; 
+        this.eBottom.style.width= bottomPx; 
+        
+        // and the values inside them
+        this.eTop.innerHTML = topRounded + " " + topUnits;
+        this.eBottom.innerHTML = bottomRounded + " " + bottomUnits ;
+    }, 
+
+    CLASS_NAME: "OpenLayers.Control.ScaleLine"
+});
+

lib/OpenLayers.js

@@ -149 +149 @@
-            "OpenLayers/Control/ArgParser.js",
-            "OpenLayers/Control/Permalink.js",
-            "OpenLayers/Control/Scale.js",
+            "OpenLayers/Control/ScaleLine.js",
-            "OpenLayers/Control/LayerSwitcher.js",
-            "OpenLayers/Control/DrawFeature.js",
-            "OpenLayers/Control/DragFeature.js",

examples/controls.html

@@ -20 +20 @@
-                map.addControl(new OpenLayers.Control.MouseToolbar());
-                map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
-                map.addControl(new OpenLayers.Control.Permalink());
+                map.addControl(new OpenLayers.Control.ScaleLine());
-                map.addControl(new OpenLayers.Control.Permalink('permalink'));
-                map.addControl(new OpenLayers.Control.MousePosition());
-                map.addControl(new OpenLayers.Control.OverviewMap());