Differentiating between web and non web platforms.

src/components/finder/Finder.module.css

@@ -5,6 +5,13 @@
   margin-left: calc(100% - 230px) !important;
   z-index: 1;
 }
+.control_web {
+  opacity: 1;
+  position: fixed !important;
+  top: 0px;
+  margin-left: calc(100% - 190px) !important;
+  z-index: 1;
+}
 .ol_popup {
   position: absolute;
   background-color: white;

src/components/finder/Finder.tsx

@@ -112,7 +112,13 @@ const Finder: Component<Props> = (props) => {
 
   return (
     <>
-      <div class={style.control}>
+      <div
+        class={
+          window.Capacitor.platform === 'web'
+            ? style.control_web
+            : style.control
+        }
+      >
         <IconButton
           onClick={() => {
             setOpen(true);

src/components/map/Map.tsx

@@ -10,6 +10,7 @@ import Attribution from 'ol/control/Attribution';
 import Rotate from 'ol/control/Rotate';
 import ScaleLine from 'ol/control/ScaleLine';
 import Control from 'ol/control/Control';
+import Zoom from 'ol/control/Zoom';
 import { fromLonLat, toLonLat } from 'ol/proj';
 import DragRotate from 'ol/interaction/DragRotate';
 
@@ -43,6 +44,7 @@ import { AndroidFullScreen } from '@awesome-cordova-plugins/android-full-screen'
 import Account from '../account';
 import { Overlays } from '../overlays/Overlays';
 import Finder, { findLocation } from '../finder';
+import { ZoomIn } from '@suid/icons-material';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -252,6 +254,16 @@ const Map: Component = () => {
     //   vectorTile: clusterableVectorTileSource.getProjection(),
     // });
 
+    let controls = [
+      new Attribution({ collapsible: true }),
+      new Rotate(),
+      new ScaleLine({ bar: true }),
+    ];
+
+    if (window.Capacitor.platform === 'web') {
+      controls.push(new Zoom());
+    }
+
     const olMap = new OlMap({
       view: new View({
         center: fromLonLat([+getState().lon, +getState().lat]),
@@ -260,11 +272,7 @@ const Map: Component = () => {
       }),
       layers: [tileLayer, vectorLayer],
       target: target,
-      controls: new Collection<Control>([
-        new Attribution({ collapsible: true }),
-        new Rotate(),
-        new ScaleLine({ bar: true }),
-      ]),
+      controls: new Collection<Control>(controls),
       moveTolerance: 10,
       interactions: new Collection<Interaction>([
         new DragRotate(),
@@ -291,9 +299,11 @@ const Map: Component = () => {
       <Overlays map={getMap} />
       <Finder />
       <GetLocation />
-      <Forward />
-      <Back />
-      <GpxRecord />
+      <Show when={window.Capacitor.platform !== 'web'}>
+        <Forward />
+        <Back />
+        <GpxRecord />
+      </Show>
       <GpxImport />
       <MapTileProvider />
       <GpxDialog />