Add more controls: a zoom slider and a scale line.

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);