diff --git a/examples/scale-line.html b/examples/scale-line.html
index 045b3c989c..099e75a227 100644
--- a/examples/scale-line.html
+++ b/examples/scale-line.html
@@ -30,6 +30,11 @@
+
diff --git a/examples/scale-line.js b/examples/scale-line.js
index d916320123..52fa92e496 100644
--- a/examples/scale-line.js
+++ b/examples/scale-line.js
@@ -2,17 +2,17 @@ goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.control.ScaleLine');
-goog.require('ol.control.ScaleLineUnits');
goog.require('ol.control.defaults');
+goog.require('ol.dom.Input');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.OSM');
+var control = new ol.control.ScaleLine();
+
var map = new ol.Map({
controls: ol.control.defaults({}, [
- new ol.control.ScaleLine({
- units: ol.control.ScaleLineUnits.IMPERIAL
- })
+ control
]),
layers: [
new ol.layer.TileLayer({
@@ -26,3 +26,7 @@ var map = new ol.Map({
zoom: 2
})
});
+
+
+var units = new ol.dom.Input(document.getElementById('units'));
+units.bindTo('value', control, 'units');
diff --git a/src/ol/control/scalelinecontrol.js b/src/ol/control/scalelinecontrol.js
index 7c3d76c913..3e2af66005 100644
--- a/src/ol/control/scalelinecontrol.js
+++ b/src/ol/control/scalelinecontrol.js
@@ -1,21 +1,32 @@
goog.provide('ol.control.ScaleLine');
+goog.provide('ol.control.ScaleLineProperty');
goog.provide('ol.control.ScaleLineUnits');
goog.require('goog.array');
goog.require('goog.asserts');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
+goog.require('goog.events');
goog.require('goog.math');
goog.require('goog.style');
-goog.require('ol.FrameState');
+goog.require('ol.Object');
goog.require('ol.ProjectionUnits');
goog.require('ol.TransformFunction');
+goog.require('ol.View2DState');
goog.require('ol.control.Control');
goog.require('ol.css');
goog.require('ol.proj');
goog.require('ol.sphere.NORMAL');
+/**
+ * @enum {string}
+ */
+ol.control.ScaleLineProperty = {
+ UNITS: 'units'
+};
+
+
/**
* @enum {string}
*/
@@ -71,16 +82,15 @@ ol.control.ScaleLine = function(opt_options) {
/**
* @private
- * @type {number}
+ * @type {?ol.View2DState}
*/
- this.minWidth_ = goog.isDef(options.minWidth) ? options.minWidth : 64;
+ this.view2DState_ = null;
/**
* @private
- * @type {ol.control.ScaleLineUnits}
+ * @type {number}
*/
- this.units_ = goog.isDef(options.units) ?
- options.units : ol.control.ScaleLineUnits.METRIC;
+ this.minWidth_ = goog.isDef(options.minWidth) ? options.minWidth : 64;
/**
* @private
@@ -112,6 +122,12 @@ ol.control.ScaleLine = function(opt_options) {
target: options.target
});
+ goog.events.listen(
+ this, ol.Object.getChangeEventType(ol.control.ScaleLineProperty.UNITS),
+ this.handleUnitsChanged_, false, this);
+
+ this.setUnits(options.units || ol.control.ScaleLineUnits.METRIC);
+
};
goog.inherits(ol.control.ScaleLine, ol.control.Control);
@@ -123,21 +139,60 @@ goog.inherits(ol.control.ScaleLine, ol.control.Control);
ol.control.ScaleLine.LEADING_DIGITS = [1, 2, 5];
+/**
+ * @return {ol.control.ScaleLineUnits|undefined} units.
+ */
+ol.control.ScaleLine.prototype.getUnits = function() {
+ return /** @type {ol.control.ScaleLineUnits|undefined} */ (
+ this.get(ol.control.ScaleLineProperty.UNITS));
+};
+goog.exportProperty(
+ ol.control.ScaleLine.prototype,
+ 'getUnits',
+ ol.control.ScaleLine.prototype.getUnits);
+
+
/**
* @inheritDoc
*/
ol.control.ScaleLine.prototype.handleMapPostrender = function(mapEvent) {
- this.updateElement_(mapEvent.frameState);
+ var frameState = mapEvent.frameState;
+ if (goog.isNull(frameState)) {
+ this.view2DState_ = null;
+ } else {
+ this.view2DState_ = frameState.view2DState;
+ }
+ this.updateElement_();
};
/**
- * @param {?ol.FrameState} frameState Frame state.
* @private
*/
-ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
+ol.control.ScaleLine.prototype.handleUnitsChanged_ = function() {
+ this.updateElement_();
+};
- if (goog.isNull(frameState)) {
+
+/**
+ * @param {ol.control.ScaleLineUnits} units Units.
+ */
+ol.control.ScaleLine.prototype.setUnits = function(units) {
+ this.set(ol.control.ScaleLineProperty.UNITS, units);
+};
+goog.exportProperty(
+ ol.control.ScaleLine.prototype,
+ 'setUnits',
+ ol.control.ScaleLine.prototype.setUnits);
+
+
+/**
+ * @private
+ */
+ol.control.ScaleLine.prototype.updateElement_ = function() {
+ var view2DState = this.view2DState_;
+
+ if (goog.isNull(view2DState)) {
if (this.renderedVisible_) {
goog.style.showElement(this.element_, false);
this.renderedVisible_ = false;
@@ -145,7 +200,6 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
return;
}
- var view2DState = frameState.view2DState;
var center = view2DState.center;
var projection = view2DState.projection;
var pointResolution =
@@ -153,9 +207,10 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
var projectionUnits = projection.getUnits();
var cosLatitude;
+ var units = this.getUnits();
if (projectionUnits == ol.ProjectionUnits.DEGREES &&
- (this.units_ == ol.control.ScaleLineUnits.METRIC ||
- this.units_ == ol.control.ScaleLineUnits.IMPERIAL)) {
+ (units == ol.control.ScaleLineUnits.METRIC ||
+ units == ol.control.ScaleLineUnits.IMPERIAL)) {
// Convert pointResolution from degrees to meters
this.toEPSG4326_ = null;
@@ -165,7 +220,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
} else if ((projectionUnits == ol.ProjectionUnits.FEET ||
projectionUnits == ol.ProjectionUnits.METERS) &&
- this.units_ == ol.control.ScaleLineUnits.DEGREES) {
+ units == ol.control.ScaleLineUnits.DEGREES) {
// Convert pointResolution from meters or feet to degrees
if (goog.isNull(this.toEPSG4326_)) {
@@ -181,21 +236,19 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
projectionUnits = ol.ProjectionUnits.DEGREES;
} else {
-
this.toEPSG4326_ = null;
-
}
goog.asserts.assert(
- ((this.units_ == ol.control.ScaleLineUnits.METRIC ||
- this.units_ == ol.control.ScaleLineUnits.IMPERIAL) &&
+ ((units == ol.control.ScaleLineUnits.METRIC ||
+ units == ol.control.ScaleLineUnits.IMPERIAL) &&
projectionUnits == ol.ProjectionUnits.METERS) ||
- (this.units_ == ol.control.ScaleLineUnits.DEGREES &&
+ (units == ol.control.ScaleLineUnits.DEGREES &&
projectionUnits == ol.ProjectionUnits.DEGREES));
var nominalCount = this.minWidth_ * pointResolution;
var suffix = '';
- if (this.units_ == ol.control.ScaleLineUnits.DEGREES) {
+ if (units == ol.control.ScaleLineUnits.DEGREES) {
if (nominalCount < 1 / 60) {
suffix = '\u2033'; // seconds
pointResolution *= 3600;
@@ -205,7 +258,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
} else {
suffix = '\u00b0'; // degrees
}
- } else if (this.units_ == ol.control.ScaleLineUnits.IMPERIAL) {
+ } else if (units == ol.control.ScaleLineUnits.IMPERIAL) {
if (nominalCount < 0.9144) {
suffix = 'in';
pointResolution /= 0.0254;
@@ -216,10 +269,10 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
suffix = 'mi';
pointResolution /= 1609.344;
}
- } else if (this.units_ == ol.control.ScaleLineUnits.NAUTICAL) {
+ } else if (units == ol.control.ScaleLineUnits.NAUTICAL) {
pointResolution /= 1852;
suffix = 'nm';
- } else if (this.units_ == ol.control.ScaleLineUnits.METRIC) {
+ } else if (units == ol.control.ScaleLineUnits.METRIC) {
if (nominalCount < 1) {
suffix = 'mm';
pointResolution *= 1000;
@@ -229,7 +282,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
suffix = 'km';
pointResolution /= 1000;
}
- } else if (this.units_ == ol.control.ScaleLineUnits.US) {
+ } else if (units == ol.control.ScaleLineUnits.US) {
if (nominalCount < 0.9144) {
suffix = 'in';
pointResolution *= 39.37;