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

1 files changed, 9 insertions, 1 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,