aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorGuilhem Moulin <guilhem@fripost.org>2024-01-12 05:22:23 +0100
committerGuilhem Moulin <guilhem@fripost.org>2024-01-12 16:15:05 +0100
commitf6345c958eccaf4693e3d53f63c611395daaf545 (patch)
tree19dd4d9830a978d4b4b4fae7e35dbc4bac51e397
parent4a4750c3f6563a62fea050aa67c1f910195d1103 (diff)
Add more controls: a zoom slider and a scale line.
-rw-r--r--main.js10
-rw-r--r--style.css74
2 files changed, 81 insertions, 3 deletions
diff --git a/main.js b/main.js
index 3b6d2ec..f2f3890 100644
--- a/main.js
+++ b/main.js
@@ -22,8 +22,10 @@ import TileLayer from 'ol/layer/Tile.js';
import WMTS from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
-import Zoom from 'ol/control/Zoom.js';
import Attribution from 'ol/control/Attribution.js';
+import ScaleLine from 'ol/control/ScaleLine.js';
+import Zoom from 'ol/control/Zoom.js';
+import ZoomSlider from 'ol/control/ZoomSlider.js';
import Control from 'ol/control/Control.js';
import proj4 from 'proj4';
@@ -107,6 +109,12 @@ const map = new Map({
return label;
})(),
}),
+ new ZoomSlider({
+ }),
+ new ScaleLine({
+ units: 'metric',
+ minWidth: 150,
+ }),
new Attribution({
collapsible: true,
collapsed: true,
diff --git a/style.css b/style.css
index 7840390..df2c454 100644
--- a/style.css
+++ b/style.css
@@ -37,8 +37,10 @@ html, body {
text-decoration: none;
outline: none;
}
-.ol-control, #map-menu {
+#map-menu, .ol-zoom, .ol-zoomslider {
font-size: calc(100% * var(--menu-factor-size));
+}
+#map-menu, .ol-control {
background-color: transparent;
}
.ol-control button,
@@ -75,9 +77,13 @@ html, body {
color: var(--ol-foreground-color);
}
.ol-zoom > .ol-zoom-in,
+.ol-zoom > .ol-zoom-out,
+.ol-zoomslider {
+ --menu-button-size: 1.375em;
+}
+.ol-zoom > .ol-zoom-in,
.ol-zoom > .ol-zoom-out {
margin: 0;
- --menu-button-size: 1.375em;
height: calc(var(--menu-button-size) - var(--menu-border-width) * .5) !important;
}
.ol-zoom > button.ol-zoom-in:hover,
@@ -106,6 +112,70 @@ html, body {
border-top-width: var(--menu-border-width);
margin-top: calc(-.5 * var(--menu-border-width));
}
+@media screen and (max-height: 500px) {
+ .ol-zoomslider {
+ display: none;
+ }
+}
+.ol-zoomslider {
+ --ol-zoomslider-thumb-height: 15px;
+ --ol-zoomslider-margin: 14px;
+}
+@media screen and (max-width: 500px) {
+ .ol-zoomslider {
+ --ol-zoomslider-thumb-height: 10px;
+ --ol-zoomslider-margin: 8px;
+ }
+}
+.ol-zoomslider, button.ol-zoomslider-thumb {
+ --menu-border-width2: 1px;
+}
+.ol-zoomslider {
+ background-color: rgba(255, 255, 255, .7);
+ background-color: rgb(from var(--ol-partial-background-color) r g b / .7);
+ border-radius: var(--menu-border-radius);
+ border: var(--menu-border-width) solid var(--menu-border-color);
+ width: var(--menu-button-size);
+ padding: calc(var(--ol-zoomslider-margin) + var(--ol-zoomslider-thumb-height)*.3) 0;
+ left: var(--menu-spacing);
+ top: calc(var(--menu-spacing) + var(--menu-button-size)*2 - var(--menu-border-width) + var(--menu-spacing));
+}
+.ol-zoomslider::after {
+ content: "";
+ position: absolute;
+ top: var(--ol-zoomslider-margin);
+ left: var(--ol-zoomslider-margin);
+ right: var(--ol-zoomslider-margin);
+ bottom: var(--ol-zoomslider-margin);
+ background-color: var(--ol-subtle-background-color);
+ border-radius: calc((var(--menu-button-size) - var(--menu-border-width))*.5 - var(--ol-zoomslider-margin));
+ border: var(--menu-border-width2) solid var(--menu-border-color);
+ cursor: pointer;
+}
+.ol-zoomslider:hover {
+ background-color: var(--ol-partial-background-color);
+}
+.ol-zoomslider button.ol-zoomslider-thumb {
+ z-index: 1;
+ height: var(--ol-zoomslider-thumb-height);
+ width: calc((var(--menu-button-size) - 2*var(--menu-border-width))*.85);
+ margin: 0 auto;
+ border: var(--menu-border-width2) solid var(--menu-border-color);
+}
+.ol-scale-line {
+ position: absolute;
+ bottom: calc(var(--menu-spacing) * var(--menu-factor-size));
+ left: calc(var(--menu-spacing) * var(--menu-factor-size));
+ border: var(--menu-border-width) solid var(--menu-border-color);
+ background-color: var(--ol-partial-background-color);
+ background-clip: padding-box;
+ border-radius: var(--menu-border-radius);
+ padding: calc(.5ex * var(--menu-factor-size));
+}
+.ol-scale-line .ol-scale-line-inner {
+ font-size: 80%;
+ margin: 0;
+}
#map-menu {
position: absolute;
right: var(--menu-spacing);