From 2831f901a77f934bcfdc3ab2f52df77c7886e206 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Sat, 24 Sep 2022 00:29:42 +0200
Subject: [PATCH] Changing components stacking.

---
 src/components/map/map.tsx        |  6 +++---
 src/components/map/whiteboard.tsx |  2 +-
 src/components/slippy/slippy.tsx  | 10 +---------
 src/theme/map.css                 |  5 +++++
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
index f16d5d2..38d36ed 100644
--- a/src/components/map/map.tsx
+++ b/src/components/map/map.tsx
@@ -47,10 +47,10 @@ const Map: react.FC<{}> = (props: {}) => {
               <CurrentLocation />
               <Tracks />
             </Whiteboard>
+            <Layer>
+              <TiledMap />
+            </Layer>
           </Slippy>
-          <Layer>
-            <TiledMap />
-          </Layer>
         </IonApp>
       </IonContent>
       <IonHeader className='ion-no-border' translucent={true}>
diff --git a/src/components/map/whiteboard.tsx b/src/components/map/whiteboard.tsx
index 79c2722..5a04915 100644
--- a/src/components/map/whiteboard.tsx
+++ b/src/components/map/whiteboard.tsx
@@ -12,7 +12,7 @@ const Whiteboard: React.FC<WhiteboardProps> = (props: WhiteboardProps) => {
   );
 
   return (
-    <svg width={window.innerWidth} height={window.innerHeight}>
+    <svg width={window.innerWidth} height={window.innerHeight} className="whiteboard">
       <g
         transform={`scale(${whiteBoardState.scale}) translate(${whiteBoardState.translation.x},${whiteBoardState.translation.y})`}
       >
diff --git a/src/components/slippy/slippy.tsx b/src/components/slippy/slippy.tsx
index 60a6d43..def653e 100644
--- a/src/components/slippy/slippy.tsx
+++ b/src/components/slippy/slippy.tsx
@@ -28,15 +28,7 @@ const Slippy: react.FC<SlippyProps> = (props: SlippyProps) => {
         <SingleTouchHandler>
           <DoubleTouchHandler>
             <WheelHandler>
-              <div
-                style={{
-                  position: 'fixed',
-                  width: window.innerWidth + 'px',
-                  height: window.innerHeight + 'px',
-                }}
-              >
-                {props.children}
-              </div>
+                 {props.children}
             </WheelHandler>
           </DoubleTouchHandler>
         </SingleTouchHandler>
diff --git a/src/theme/map.css b/src/theme/map.css
index b7b714d..7211932 100644
--- a/src/theme/map.css
+++ b/src/theme/map.css
@@ -13,6 +13,11 @@ ion-button.get-location {
   margin-left: calc(50% - 20px);
 }
 
+.whiteboard {
+  position: fixed;
+  z-index: 1;
+}
+
 .input-file {
 	width: 0.1px;
 	height: 0.1px;