Move MapViewControl to inside the map

src/components/timeline/map-view-control.js

@@ -0,0 +1,29 @@
+import React from "react"
+import PropTypes from "prop-types"
+import styled from "styled-components"
+import Button from "../button"
+import { POSITIVE } from "../../utils/constants"
+
+const ControlBox = styled.div`
+  display: inline-block;
+  text-align: right;
+  position: absolute;
+  left: 5px;
+  bottom: 0px;
+  margin-bottom: 5px;
+  font-weight: ${props => (props.checked ? 600 : 400)};
+  font-family: "Titillium Web", sans-serif;
+`
+
+export const MapViewControl = ({ onClick, is3DViewEnabled }) => (
+  <ControlBox>
+    <Button action={onClick} mode={POSITIVE} noBorder>
+      Switch to {is3DViewEnabled ? "2D" : "3D"} map view
+    </Button>
+  </ControlBox>
+)
+
+MapViewControl.propTypes = {
+  onClick: PropTypes.func,
+  is3DViewEnabled: PropTypes.bool.isRequired,
+}

src/components/timeline/map.js

@@ -12,10 +12,9 @@ import {
   getStaticIcons,
   getIconColors,
 } from "../../utils/platform-colors"
-import Button from "../button"
 import { GlobeMap } from "../map/globe-map"
-import { POSITIVE } from "../../utils/constants"
 import { MapLegend } from "./map-legend"
+import { MapViewControl } from "./map-view-control"
 
 export function DeploymentMap({
   geojson,
@@ -74,6 +73,10 @@ export function DeploymentMap({
             selectedPlatforms={selectedPlatforms}
             setSelectedPlatforms={setSelectedPlatforms}
           />
+          <MapViewControl
+            onClick={() => setEnable3DView(!enable3DView)}
+            is3DViewEnabled={enable3DView}
+          />
         </GlobeMap>
       ) : (
         <MapboxMap
@@ -85,24 +88,21 @@ export function DeploymentMap({
           setSelectedPlatforms={setSelectedPlatforms}
           bounds={bounds}
         >
-          <MapLegend
-            platforms={platforms}
-            platformsWithData={platformsWithData}
-            activeDeploymentPlatforms={activeDeploymentPlatforms}
-            selectedPlatforms={selectedPlatforms}
-            setSelectedPlatforms={setSelectedPlatforms}
-          />
+          <>
+            <MapLegend
+              platforms={platforms}
+              platformsWithData={platformsWithData}
+              activeDeploymentPlatforms={activeDeploymentPlatforms}
+              selectedPlatforms={selectedPlatforms}
+              setSelectedPlatforms={setSelectedPlatforms}
+            />
+            <MapViewControl
+              onClick={() => setEnable3DView(!enable3DView)}
+              is3DViewEnabled={enable3DView}
+            />
+          </>
         </MapboxMap>
       )}
-      <div css={{ marginTop: "5px" }}>
-        <Button
-          action={() => setEnable3DView(!enable3DView)}
-          mode={POSITIVE}
-          noBorder
-        >
-          Switch to {enable3DView ? "2D" : "3D"} map view
-        </Button>
-      </div>
     </>
   )
 }