Changing components stacking.

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}>

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})`}
       >

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>

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;