From d3861b092201e7c4609d5d4f235bbae592c0bbfc Mon Sep 17 00:00:00 2001 From: jeanpierre Date: Fri, 15 Jul 2022 19:14:46 +0200 Subject: [PATCH 1/4] scaleBarColors a new option for scalebar colors --- src/ol/control/ScaleLine.js | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/ol/control/ScaleLine.js b/src/ol/control/ScaleLine.js index 338821bcea..bc12d4d748 100644 --- a/src/ol/control/ScaleLine.js +++ b/src/ol/control/ScaleLine.js @@ -65,6 +65,9 @@ const DEFAULT_DPI = 25.4 / 0.28; * when `bar` is `true`. * @property {number|undefined} [dpi=undefined] dpi of output device such as printer. Only applies * when `bar` is `true`. If undefined the OGC default screen pixel size of 0.28mm will be assumed. + * @property {array} [scaleBarColors=['#ffffff','#000000']] 2 colors to alternate the steps colors of the scalebar. Only applies + * when `bar` is `true`. If undefined the default will be white and black ['#ffffff','#000000']. + */ /** @@ -189,6 +192,12 @@ class ScaleLine extends Control { * @type {number|undefined} */ this.dpi_ = options.dpi || undefined; + + /** + * @private + * @type {array|['#ffffff','#000000']} + */ + this.scaleBarColors_ = options.scaleBarColors || ['#ffffff','#000000']; } /** @@ -346,7 +355,7 @@ class ScaleLine extends Control { } let html; if (this.scaleBar_) { - html = this.createScaleBar(width, count, suffix); + html = this.createScaleBar(width, count, suffix, scaleBarColors); } else { html = count.toFixed(decimalCount < 0 ? -decimalCount : 0) + ' ' + suffix; } @@ -372,14 +381,15 @@ class ScaleLine extends Control { * @param {number} width The current width of the scalebar. * @param {number} scale The current scale. * @param {string} suffix The suffix to append to the scale text. + * @param {array} color The 2 colors of the scalebar. * @return {string} The stringified HTML of the scalebar. */ - createScaleBar(width, scale, suffix) { + createScaleBar(width, scale, suffix, color) { const mapScale = '1 : ' + Math.round(this.getScaleForResolution()).toLocaleString(); const scaleSteps = []; const stepWidth = width / this.scaleBarSteps_; - let backgroundColor = '#ffffff'; + let backgroundColor = color[0]; for (let i = 0; i < this.scaleBarSteps_; i++) { if (i === 0) { // create the first marker at position 0 @@ -411,12 +421,8 @@ class ScaleLine extends Control { } scaleSteps.push(this.createStepText(i + 1, width, true, scale, suffix)); } - // switch colors of steps between black and white - if (backgroundColor === '#ffffff') { - backgroundColor = '#000000'; - } else { - backgroundColor = '#ffffff'; - } + // switch colors of steps + backgroundColor = (backgroundColor === color[0]) ? color[1] : color[0]; } let scaleBarText; From 4d2b2c96504491dfc19e25a756665a6c530c5197 Mon Sep 17 00:00:00 2001 From: jeanpierre Date: Sat, 16 Jul 2022 11:41:31 +0200 Subject: [PATCH 2/4] style for scalebar with new class in css and remove the hardcoded background Co-Authored-By: Andreas Hocevar <211514+ahocevar@users.noreply.github.com> --- src/ol/control/ScaleLine.js | 32 ++++++++++++-------------------- src/ol/ol.css | 6 ++++++ 2 files changed, 18 insertions(+), 20 deletions(-) diff --git a/src/ol/control/ScaleLine.js b/src/ol/control/ScaleLine.js index bc12d4d748..04fe9fd8c7 100644 --- a/src/ol/control/ScaleLine.js +++ b/src/ol/control/ScaleLine.js @@ -65,9 +65,6 @@ const DEFAULT_DPI = 25.4 / 0.28; * when `bar` is `true`. * @property {number|undefined} [dpi=undefined] dpi of output device such as printer. Only applies * when `bar` is `true`. If undefined the OGC default screen pixel size of 0.28mm will be assumed. - * @property {array} [scaleBarColors=['#ffffff','#000000']] 2 colors to alternate the steps colors of the scalebar. Only applies - * when `bar` is `true`. If undefined the default will be white and black ['#ffffff','#000000']. - */ /** @@ -192,12 +189,6 @@ class ScaleLine extends Control { * @type {number|undefined} */ this.dpi_ = options.dpi || undefined; - - /** - * @private - * @type {array|['#ffffff','#000000']} - */ - this.scaleBarColors_ = options.scaleBarColors || ['#ffffff','#000000']; } /** @@ -355,7 +346,7 @@ class ScaleLine extends Control { } let html; if (this.scaleBar_) { - html = this.createScaleBar(width, count, suffix, scaleBarColors); + html = this.createScaleBar(width, count, suffix); } else { html = count.toFixed(decimalCount < 0 ? -decimalCount : 0) + ' ' + suffix; } @@ -381,15 +372,14 @@ class ScaleLine extends Control { * @param {number} width The current width of the scalebar. * @param {number} scale The current scale. * @param {string} suffix The suffix to append to the scale text. - * @param {array} color The 2 colors of the scalebar. * @return {string} The stringified HTML of the scalebar. */ - createScaleBar(width, scale, suffix, color) { + createScaleBar(width, scale, suffix) { const mapScale = '1 : ' + Math.round(this.getScaleForResolution()).toLocaleString(); const scaleSteps = []; const stepWidth = width / this.scaleBarSteps_; - let backgroundColor = color[0]; + let backgroundColor = 'ol-scale-line-bar-light'; for (let i = 0; i < this.scaleBarSteps_; i++) { if (i === 0) { // create the first marker at position 0 @@ -398,14 +388,13 @@ class ScaleLine extends Control { scaleSteps.push( '
' + '
' + '
' + this.createMarker('relative', i) + @@ -421,8 +410,11 @@ class ScaleLine extends Control { } scaleSteps.push(this.createStepText(i + 1, width, true, scale, suffix)); } - // switch colors of steps - backgroundColor = (backgroundColor === color[0]) ? color[1] : color[0]; + // switch style of steps + backgroundColor = + backgroundColor === 'ol-scale-line-bar-light' + ? 'ol-scale-line-bar-dark' + : 'ol-scale-line-bar-light'; } let scaleBarText; diff --git a/src/ol/ol.css b/src/ol/ol.css index 18ad4ac1d3..7c3b4ba55a 100644 --- a/src/ol/ol.css +++ b/src/ol/ol.css @@ -29,6 +29,12 @@ will-change: contents, width; transition: all 0.25s; } +.ol-scale-line-bar-dark{ + background-color: #000000; +} +.ol-scale-line-bar-light{ + background-color: #ffffff; +} .ol-scale-bar { position: absolute; bottom: 8px; From c8a28848dd6fdcdc13e023dc7e34519fd3b2300a Mon Sep 17 00:00:00 2001 From: jeanpierre Date: Sat, 16 Jul 2022 16:57:14 +0200 Subject: [PATCH 3/4] change class names --- src/ol/control/ScaleLine.js | 8 ++++---- src/ol/ol.css | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/ol/control/ScaleLine.js b/src/ol/control/ScaleLine.js index 04fe9fd8c7..852ec120c7 100644 --- a/src/ol/control/ScaleLine.js +++ b/src/ol/control/ScaleLine.js @@ -379,7 +379,7 @@ class ScaleLine extends Control { '1 : ' + Math.round(this.getScaleForResolution()).toLocaleString(); const scaleSteps = []; const stepWidth = width / this.scaleBarSteps_; - let backgroundColor = 'ol-scale-line-bar-light'; + let backgroundColor = 'ol-scale-singlebar-odd'; for (let i = 0; i < this.scaleBarSteps_; i++) { if (i === 0) { // create the first marker at position 0 @@ -412,9 +412,9 @@ class ScaleLine extends Control { } // switch style of steps backgroundColor = - backgroundColor === 'ol-scale-line-bar-light' - ? 'ol-scale-line-bar-dark' - : 'ol-scale-line-bar-light'; + backgroundColor === 'ol-scale-singlebar-odd' + ? 'ol-scale-singlebar-even' + : 'ol-scale-singlebar-odd'; } let scaleBarText; diff --git a/src/ol/ol.css b/src/ol/ol.css index 7c3b4ba55a..593775377c 100644 --- a/src/ol/ol.css +++ b/src/ol/ol.css @@ -29,10 +29,10 @@ will-change: contents, width; transition: all 0.25s; } -.ol-scale-line-bar-dark{ +.ol-scale-singlebar-even{ background-color: #000000; } -.ol-scale-line-bar-light{ +.ol-scale-singlebar-odd{ background-color: #ffffff; } .ol-scale-bar { From d957bdeb864e983b7e52b87f5deff308d22107fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 16 Jul 2022 18:56:59 +0200 Subject: [PATCH 4/4] Fix ScaleLine markup --- src/ol/control/ScaleLine.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ol/control/ScaleLine.js b/src/ol/control/ScaleLine.js index 852ec120c7..f496316ff6 100644 --- a/src/ol/control/ScaleLine.js +++ b/src/ol/control/ScaleLine.js @@ -390,7 +390,7 @@ class ScaleLine extends Control { '