From e0cbb6daa8248d2ad8a8b5ef9ad84921efa55d06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 16 Jul 2022 11:58:10 +0200 Subject: [PATCH 1/8] Cleanup ScaleLine code --- src/ol/control/ScaleLine.js | 105 ++++++++++-------------------------- src/ol/ol.css | 20 ++++--- 2 files changed, 41 insertions(+), 84 deletions(-) diff --git a/src/ol/control/ScaleLine.js b/src/ol/control/ScaleLine.js index f303c43ecf..259839b8df 100644 --- a/src/ol/control/ScaleLine.js +++ b/src/ol/control/ScaleLine.js @@ -334,12 +334,9 @@ class ScaleLine extends Control { previousDecimalCount = decimalCount; ++i; } - let html; - if (this.scaleBar_) { - html = this.createScaleBar(width, count, suffix); - } else { - html = count.toFixed(decimalCount < 0 ? -decimalCount : 0) + ' ' + suffix; - } + const html = this.scaleBar_ + ? this.createScaleBar(width, count, suffix) + : count.toFixed(decimalCount < 0 ? -decimalCount : 0) + ' ' + suffix; if (this.renderedHTML_ != html) { this.innerElement_.innerHTML = html; @@ -367,85 +364,49 @@ class ScaleLine extends Control { createScaleBar(width, scale, suffix) { const mapScale = '1 : ' + Math.round(this.getScaleForResolution()).toLocaleString(); - const scaleSteps = []; - const stepWidth = width / this.scaleBarSteps_; - let backgroundColor = 'ol-scale-singlebar-odd'; - for (let i = 0; i < this.scaleBarSteps_; i++) { - if (i === 0) { - // create the first marker at position 0 - scaleSteps.push(this.createMarker('absolute', i)); - } + const steps = this.scaleBarSteps_; + const stepWidth = width / steps; + const scaleSteps = [this.createMarker('absolute')]; + for (let i = 0; i < steps; ++i) { + const cls = + i % 2 === 0 ? 'ol-scale-singlebar-odd' : 'ol-scale-singlebar-even'; scaleSteps.push( '
' + '
' + '
' + - this.createMarker('relative', i) + - /*render text every second step, except when only 2 steps */ - (i % 2 === 0 || this.scaleBarSteps_ === 2 + this.createMarker('relative') + + // render text every second step, except when only 2 steps + (i % 2 === 0 || steps === 2 ? this.createStepText(i, width, false, scale, suffix) : '') + '
' ); - if (i === this.scaleBarSteps_ - 1) { - { - /*render text at the end */ - } - scaleSteps.push(this.createStepText(i + 1, width, true, scale, suffix)); - } - // switch style of steps - backgroundColor = - backgroundColor === 'ol-scale-singlebar-odd' - ? 'ol-scale-singlebar-even' - : 'ol-scale-singlebar-odd'; } + // render text at the end + scaleSteps.push(this.createStepText(steps, width, true, scale, suffix)); - let scaleBarText; - if (this.scaleBarText_) { - scaleBarText = - '
' + + const scaleBarText = this.scaleBarText_ + ? `
` + mapScale + - '
'; - } else { - scaleBarText = ''; - } - const container = - '
' + - scaleBarText + - scaleSteps.join('') + - '
'; - return container; + '
' + : ''; + return `
${scaleBarText}${scaleSteps.join('')}
`; } /** * Creates a marker at given position - * @param {string} position The position, absolute or relative - * @param {number} i The iterator + * @param {'absolute'|'relative'} position The position, absolute or relative * @return {string} The stringified div containing the marker */ - createMarker(position, i) { + createMarker(position) { const top = position === 'absolute' ? 3 : -10; return ( '
' ); } @@ -469,19 +430,11 @@ class ScaleLine extends Control { '
' + + `margin-left: ${margin}px;` + + `text-align: ${i === 0 ? 'left' : 'center'};` + + `min-width: ${minWidth}px;` + + `left: ${isLast ? width + 'px' : 'unset'};` + + '">' + lengthString + '
' ); diff --git a/src/ol/ol.css b/src/ol/ol.css index 6e1482afd5..72aa2370bd 100644 --- a/src/ol/ol.css +++ b/src/ol/ol.css @@ -41,20 +41,16 @@ transition: all 0.25s; } -.ol-scale-singlebar-even { - background-color: var(--ol-subtle-foreground-color); -} - -.ol-scale-singlebar-odd { - background-color: var(--ol-background-color); -} - .ol-scale-bar { position: absolute; bottom: 8px; left: 8px; } +.ol-scale-bar-inner > div { + display: flex; +} + .ol-scale-step-marker { width: 1px; height: 15px; @@ -89,6 +85,14 @@ border: 1px solid var(--ol-foreground-color); } +.ol-scale-singlebar-even { + background-color: var(--ol-subtle-foreground-color); +} + +.ol-scale-singlebar-odd { + background-color: var(--ol-background-color); +} + .ol-unsupported { display: none; } From 97f0e7044727f58a3f174f88c2be7176f5417b17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 6 Aug 2022 23:06:09 +0200 Subject: [PATCH 2/8] Remove unnecessary code Remove unnecessary nested div element Don't number to string to number --- src/ol/control/ScaleLine.js | 4 ++-- src/ol/ol.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ol/control/ScaleLine.js b/src/ol/control/ScaleLine.js index 259839b8df..1542b55368 100644 --- a/src/ol/control/ScaleLine.js +++ b/src/ol/control/ScaleLine.js @@ -393,7 +393,7 @@ class ScaleLine extends Control { mapScale + '' : ''; - return `
${scaleBarText}${scaleSteps.join('')}
`; + return scaleBarText + scaleSteps.join(''); } /** @@ -453,7 +453,7 @@ class ScaleLine extends Control { ); const dpi = this.dpi_ || DEFAULT_DPI; const inchesPerMeter = 1000 / 25.4; - return parseFloat(resolution.toString()) * inchesPerMeter * dpi; + return resolution * inchesPerMeter * dpi; } /** diff --git a/src/ol/ol.css b/src/ol/ol.css index 72aa2370bd..e48f0dbcbb 100644 --- a/src/ol/ol.css +++ b/src/ol/ol.css @@ -47,7 +47,7 @@ left: 8px; } -.ol-scale-bar-inner > div { +.ol-scale-bar-inner { display: flex; } From ff79897f065f515aebc915ab5d879c0cd3e8ef96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 6 Aug 2022 22:57:42 +0200 Subject: [PATCH 3/8] Fix default value docs for ScaleLine class option --- src/ol/control/ScaleLine.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ol/control/ScaleLine.js b/src/ol/control/ScaleLine.js index 1542b55368..28c88d117b 100644 --- a/src/ol/control/ScaleLine.js +++ b/src/ol/control/ScaleLine.js @@ -39,7 +39,8 @@ const DEFAULT_DPI = 25.4 / 0.28; /** * @typedef {Object} Options - * @property {string} [className='ol-scale-line'] CSS Class name. + * @property {string} [className] CSS class name. The default is `ol-scale-bar` when configured with + * `bar: true`. Otherwise the default is `ol-scale-line`. * @property {number} [minWidth=64] Minimum width in pixels at the OGC default dpi. The width will be * adjusted to match the dpi used. * @property {number} [maxWidth] Maximum width in pixels at the OGC default dpi. The width will be From 564d9d768555c635f670359bea0921c4e6e7711d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 6 Aug 2022 23:00:33 +0200 Subject: [PATCH 4/8] Set pointer-event: none for ScaleLine There is no reason to interact with this control and for the `bar` option the blocked rect may be unexpectedly large --- src/ol/control/ScaleLine.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/ol/control/ScaleLine.js b/src/ol/control/ScaleLine.js index 28c88d117b..dac67278ee 100644 --- a/src/ol/control/ScaleLine.js +++ b/src/ol/control/ScaleLine.js @@ -80,15 +80,11 @@ class ScaleLine extends Control { constructor(opt_options) { const options = opt_options ? opt_options : {}; - const className = - options.className !== undefined - ? options.className - : options.bar - ? 'ol-scale-bar' - : 'ol-scale-line'; + const element = document.createElement('div'); + element.style.pointerEvents = 'none'; super({ - element: document.createElement('div'), + element: element, render: options.render, target: options.target, }); @@ -108,6 +104,13 @@ class ScaleLine extends Control { */ this.un; + const className = + options.className !== undefined + ? options.className + : options.bar + ? 'ol-scale-bar' + : 'ol-scale-line'; + /** * @private * @type {HTMLElement} From f7cb9b9fdf2e2821d87dd3871bf448991533c8c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 6 Aug 2022 23:04:25 +0200 Subject: [PATCH 5/8] Invert displayed scale for very high zoom levels This prevents a scale of '1 : 0' being displayed and instead displays 'scale : 1' --- src/ol/control/ScaleLine.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/ol/control/ScaleLine.js b/src/ol/control/ScaleLine.js index dac67278ee..01377cc199 100644 --- a/src/ol/control/ScaleLine.js +++ b/src/ol/control/ScaleLine.js @@ -366,8 +366,11 @@ class ScaleLine extends Control { * @return {string} The stringified HTML of the scalebar. */ createScaleBar(width, scale, suffix) { + const resolutionScale = this.getScaleForResolution(); const mapScale = - '1 : ' + Math.round(this.getScaleForResolution()).toLocaleString(); + resolutionScale < 1 + ? Math.round(1 / resolutionScale).toLocaleString() + ' : 1' + : '1 : ' + Math.round(resolutionScale).toLocaleString(); const steps = this.scaleBarSteps_; const stepWidth = width / steps; const scaleSteps = [this.createMarker('absolute')]; From e10432260fd7078be6c8067225363f95f4d00638 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 16 Jul 2022 14:56:08 +0200 Subject: [PATCH 6/8] Cleanup scale-line example --- examples/scale-line.css | 3 ++ examples/scale-line.html | 16 +++++----- examples/scale-line.js | 63 ++++++++++++++-------------------------- 3 files changed, 33 insertions(+), 49 deletions(-) create mode 100644 examples/scale-line.css diff --git a/examples/scale-line.css b/examples/scale-line.css new file mode 100644 index 0000000000..03c39ff5d1 --- /dev/null +++ b/examples/scale-line.css @@ -0,0 +1,3 @@ +#scaleBarOptions { + display: none; +} diff --git a/examples/scale-line.html b/examples/scale-line.html index 923c69a09b..f31a77aca6 100644 --- a/examples/scale-line.html +++ b/examples/scale-line.html @@ -7,6 +7,7 @@ docs: > tags: "scale-line, openstreetmap" ---
+ + - +
+ - diff --git a/examples/scale-line.js b/examples/scale-line.js index d961b13d41..2f4af685c0 100644 --- a/examples/scale-line.js +++ b/examples/scale-line.js @@ -4,31 +4,30 @@ import TileLayer from '../src/ol/layer/Tile.js'; import View from '../src/ol/View.js'; import {ScaleLine, defaults as defaultControls} from '../src/ol/control.js'; +const scaleBarOptionsContainer = document.getElementById('scaleBarOptions'); const unitsSelect = document.getElementById('units'); const typeSelect = document.getElementById('type'); const stepsSelect = document.getElementById('steps'); const scaleTextCheckbox = document.getElementById('showScaleText'); -const showScaleTextDiv = document.getElementById('showScaleTextDiv'); -let scaleType = 'scaleline'; -let scaleBarSteps = 4; -let scaleBarText = true; let control; function scaleControl() { - if (scaleType === 'scaleline') { + if (typeSelect.value === 'scaleline') { control = new ScaleLine({ units: unitsSelect.value, }); - return control; + scaleBarOptionsContainer.style.display = 'none'; + } else { + control = new ScaleLine({ + units: unitsSelect.value, + bar: true, + steps: parseInt(stepsSelect.value, 10), + text: scaleTextCheckbox.checked, + minWidth: 140, + }); + scaleBarOptionsContainer.style.display = 'block'; } - control = new ScaleLine({ - units: unitsSelect.value, - bar: true, - steps: scaleBarSteps, - text: scaleBarText, - minWidth: 140, - }); return control; } const map = new Map({ @@ -45,34 +44,14 @@ const map = new Map({ }), }); -function onChange() { +function reconfigureScaleLine() { + map.removeControl(control); + map.addControl(scaleControl()); +} +function onChangeUnit() { control.setUnits(unitsSelect.value); } -function onChangeType() { - scaleType = typeSelect.value; - if (typeSelect.value === 'scalebar') { - stepsSelect.style.display = 'inline'; - showScaleTextDiv.style.display = 'inline'; - map.removeControl(control); - map.addControl(scaleControl()); - } else { - stepsSelect.style.display = 'none'; - showScaleTextDiv.style.display = 'none'; - map.removeControl(control); - map.addControl(scaleControl()); - } -} -function onChangeSteps() { - scaleBarSteps = parseInt(stepsSelect.value, 10); - map.removeControl(control); - map.addControl(scaleControl()); -} -function onChangeScaleText() { - scaleBarText = scaleTextCheckbox.checked; - map.removeControl(control); - map.addControl(scaleControl()); -} -unitsSelect.addEventListener('change', onChange); -typeSelect.addEventListener('change', onChangeType); -stepsSelect.addEventListener('change', onChangeSteps); -scaleTextCheckbox.addEventListener('change', onChangeScaleText); +unitsSelect.addEventListener('change', onChangeUnit); +typeSelect.addEventListener('change', reconfigureScaleLine); +stepsSelect.addEventListener('change', reconfigureScaleLine); +scaleTextCheckbox.addEventListener('change', reconfigureScaleLine); From 436a4ca597aa67efd2788f6d4a9b8806c120cd29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 16 Jul 2022 14:56:40 +0200 Subject: [PATCH 7/8] Add color invert option to scale-line example --- examples/scale-line.css | 8 ++++++++ examples/scale-line.html | 2 ++ examples/scale-line.js | 9 +++++++++ 3 files changed, 19 insertions(+) diff --git a/examples/scale-line.css b/examples/scale-line.css index 03c39ff5d1..e995aba680 100644 --- a/examples/scale-line.css +++ b/examples/scale-line.css @@ -1,3 +1,11 @@ #scaleBarOptions { display: none; } + +.ol-scale-bar-inverted .ol-scale-singlebar-even { + background-color: var(--ol-background-color); +} + +.ol-scale-bar-inverted .ol-scale-singlebar-odd { + background-color: var(--ol-subtle-foreground-color);; +} diff --git a/examples/scale-line.html b/examples/scale-line.html index f31a77aca6..3d601b7049 100644 --- a/examples/scale-line.html +++ b/examples/scale-line.html @@ -31,4 +31,6 @@ tags: "scale-line, openstreetmap" + +
diff --git a/examples/scale-line.js b/examples/scale-line.js index 2f4af685c0..7405e9b785 100644 --- a/examples/scale-line.js +++ b/examples/scale-line.js @@ -9,6 +9,7 @@ const unitsSelect = document.getElementById('units'); const typeSelect = document.getElementById('type'); const stepsSelect = document.getElementById('steps'); const scaleTextCheckbox = document.getElementById('showScaleText'); +const invertColorsCheckbox = document.getElementById('invertColors'); let control; @@ -26,6 +27,7 @@ function scaleControl() { text: scaleTextCheckbox.checked, minWidth: 140, }); + onInvertColorsChange(); scaleBarOptionsContainer.style.display = 'block'; } return control; @@ -51,7 +53,14 @@ function reconfigureScaleLine() { function onChangeUnit() { control.setUnits(unitsSelect.value); } +function onInvertColorsChange() { + control.element.classList.toggle( + 'ol-scale-bar-inverted', + invertColorsCheckbox.checked + ); +} unitsSelect.addEventListener('change', onChangeUnit); typeSelect.addEventListener('change', reconfigureScaleLine); stepsSelect.addEventListener('change', reconfigureScaleLine); scaleTextCheckbox.addEventListener('change', reconfigureScaleLine); +invertColorsCheckbox.addEventListener('change', onInvertColorsChange); From 03a16e34445f2407f87ccb06b597f14a5c7f7f69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 6 Aug 2022 23:07:25 +0200 Subject: [PATCH 8/8] Use a range input to select the number of steps (1 to 8) --- examples/scale-line.css | 4 ++++ examples/scale-line.html | 8 ++------ examples/scale-line.js | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/examples/scale-line.css b/examples/scale-line.css index e995aba680..aa432f70c8 100644 --- a/examples/scale-line.css +++ b/examples/scale-line.css @@ -2,6 +2,10 @@ display: none; } +input[type=range] { + vertical-align: middle; +} + .ol-scale-bar-inverted .ol-scale-singlebar-even { background-color: var(--ol-background-color); } diff --git a/examples/scale-line.html b/examples/scale-line.html index 3d601b7049..b0c1e8e937 100644 --- a/examples/scale-line.html +++ b/examples/scale-line.html @@ -23,12 +23,8 @@ tags: "scale-line, openstreetmap"
- + + diff --git a/examples/scale-line.js b/examples/scale-line.js index 7405e9b785..1af31da8f5 100644 --- a/examples/scale-line.js +++ b/examples/scale-line.js @@ -7,7 +7,7 @@ import {ScaleLine, defaults as defaultControls} from '../src/ol/control.js'; const scaleBarOptionsContainer = document.getElementById('scaleBarOptions'); const unitsSelect = document.getElementById('units'); const typeSelect = document.getElementById('type'); -const stepsSelect = document.getElementById('steps'); +const stepsRange = document.getElementById('steps'); const scaleTextCheckbox = document.getElementById('showScaleText'); const invertColorsCheckbox = document.getElementById('invertColors'); @@ -23,7 +23,7 @@ function scaleControl() { control = new ScaleLine({ units: unitsSelect.value, bar: true, - steps: parseInt(stepsSelect.value, 10), + steps: parseInt(stepsRange.value, 10), text: scaleTextCheckbox.checked, minWidth: 140, }); @@ -61,6 +61,6 @@ function onInvertColorsChange() { } unitsSelect.addEventListener('change', onChangeUnit); typeSelect.addEventListener('change', reconfigureScaleLine); -stepsSelect.addEventListener('change', reconfigureScaleLine); +stepsRange.addEventListener('input', reconfigureScaleLine); scaleTextCheckbox.addEventListener('change', reconfigureScaleLine); invertColorsCheckbox.addEventListener('change', onInvertColorsChange);