ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use a range input to select the number of steps (1 to 8)

Browse Source
This commit is contained in:
Maximilian Krög
2022-08-06 23:07:25 +02:00
parent 436a4ca597
commit 03a16e3444
3 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/scale-line.css
View File

@@ -2,6 +2,10 @@
display: none; display: none;
} }
input[type=range] {
vertical-align: middle;
}
.ol-scale-bar-inverted .ol-scale-singlebar-even { .ol-scale-bar-inverted .ol-scale-singlebar-even {
background-color: var(--ol-background-color); background-color: var(--ol-background-color);
} }

8
examples/scale-line.html
View File

@@ -23,12 +23,8 @@ tags: "scale-line, openstreetmap"
</select> </select>
<div id="scaleBarOptions"> <div id="scaleBarOptions">
<select id="steps"> <label for="steps">Steps:</label>
<option value=2>2 steps</option> <input id="steps" type="range" value="4" min="1" max="8">
<option value=4 selected>4 steps</option>
<option value=6>6 steps</option>
<option value=8>8 steps</option>
</select>
<label><input type="checkbox" id="showScaleText" checked> Show scale text</label> <label><input type="checkbox" id="showScaleText" checked> Show scale text</label>

6
examples/scale-line.js
View File

@@ -7,7 +7,7 @@ import {ScaleLine, defaults as defaultControls} from '../src/ol/control.js';
const scaleBarOptionsContainer = document.getElementById('scaleBarOptions'); const scaleBarOptionsContainer = document.getElementById('scaleBarOptions');
const unitsSelect = document.getElementById('units'); const unitsSelect = document.getElementById('units');
const typeSelect = document.getElementById('type'); const typeSelect = document.getElementById('type');
const stepsSelect = document.getElementById('steps'); const stepsRange = document.getElementById('steps');
const scaleTextCheckbox = document.getElementById('showScaleText'); const scaleTextCheckbox = document.getElementById('showScaleText');
const invertColorsCheckbox = document.getElementById('invertColors'); const invertColorsCheckbox = document.getElementById('invertColors');
@@ -23,7 +23,7 @@ function scaleControl() {
control = new ScaleLine({ control = new ScaleLine({
units: unitsSelect.value, units: unitsSelect.value,
bar: true, bar: true,
steps: parseInt(stepsSelect.value, 10), steps: parseInt(stepsRange.value, 10),
text: scaleTextCheckbox.checked, text: scaleTextCheckbox.checked,
minWidth: 140, minWidth: 140,
}); });
@@ -61,6 +61,6 @@ function onInvertColorsChange() {
} }
unitsSelect.addEventListener('change', onChangeUnit); unitsSelect.addEventListener('change', onChangeUnit);
typeSelect.addEventListener('change', reconfigureScaleLine); typeSelect.addEventListener('change', reconfigureScaleLine);
stepsSelect.addEventListener('change', reconfigureScaleLine); stepsRange.addEventListener('input', reconfigureScaleLine);
scaleTextCheckbox.addEventListener('change', reconfigureScaleLine); scaleTextCheckbox.addEventListener('change', reconfigureScaleLine);
invertColorsCheckbox.addEventListener('change', onInvertColorsChange); invertColorsCheckbox.addEventListener('change', onInvertColorsChange);