Moving controls out of the ol map object.

src/components/back-forward/BackForward.module.css

@@ -3,6 +3,7 @@
   --ion-background-color: white;
   position: fixed !important;
   top: 6px;
+  z-index: 1;
 }
 
 .back {

src/components/get-location/GetLocation.module.css

@@ -3,5 +3,6 @@
   --ion-background-color: white;
   margin-left: calc(50% - 20px) !important;
   position: fixed !important;
+  z-index: 1;
   bottom: 6px;
 }

src/components/gpx-import/GpxImport.module.css

@@ -2,6 +2,7 @@
   position: fixed !important;
   top: 6px;
   margin-left: calc(100% - 80px) !important;
+  z-index: 1;
 }
 .label {
   --opacity: 0.6;

src/components/map/Map.tsx

@@ -137,39 +137,39 @@ const Map: Component = () => {
         new Attribution({ collapsible: true }),
         new Rotate(),
         new ScaleLine({ bar: true }),
-        // @ts-ignore
-        new Control({
-          // @ts-ignore
-          element: (
-            <div>
-              <GetLocation />
-            </div>
-          ),
-        }),
-        new Control({
-          // @ts-ignore
-          element: (
-            <div>
-              <Back />
-            </div>
-          ),
-        }),
-        new Control({
-          // @ts-ignore
-          element: (
-            <div>
-              <Forward />
-            </div>
-          ),
-        }),
-        new Control({
-          // @ts-ignore
-          element: (
-            <div>
-              <GpxImport />
-            </div>
-          ),
-        }),
+        // // @ts-ignore
+        // new Control({
+        //   // @ts-ignore
+        //   element: (
+        //     <div>
+        //       <GetLocation />
+        //     </div>
+        //   ),
+        // }),
+        // new Control({
+        //   // @ts-ignore
+        //   element: (
+        //     <div>
+        //       <Back />
+        //     </div>
+        //   ),
+        // }),
+        // new Control({
+        //   // @ts-ignore
+        //   element: (
+        //     <div>
+        //       <Forward />
+        //     </div>
+        //   ),
+        // }),
+        // new Control({
+        //   // @ts-ignore
+        //   element: (
+        //     <div>
+        //       <GpxImport />
+        //     </div>
+        //   ),
+        // }),
       ]),
     });
     olMap.on(['moveend'], changeListener);
@@ -178,7 +178,14 @@ const Map: Component = () => {
   });
 
   // @ts-ignore
-  return <div class='ol-map' ref={target} />;
+  return (
+    <div class='ol-map' ref={target}>
+      <GetLocation />
+      <Forward />
+      <Back />
+      <GpxImport />
+    </div>
+  );
 };
 
 export default Map;