modified dynamic sizing implementation

tritonuas · Nov 1, 2023 · ca97748 · ca97748
1 parent 5885012
commit ca97748
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/houston/src/pages/Control.css b/houston/src/pages/Control.css
@@ -5,15 +5,22 @@
     align-items: center;
     border: 1px solid black;
     padding: 20px;
-    height: 89vh;
+    height: 89dvh;
+    overflow-y: hidden;
 }
 
 .flight-telemetry {
-    min-width: 25%;
-    min-height: 90%;
+    flex: 1;
+    height: 100%;
     border: 1px solid black;
     border-radius: 20px;
     margin-left: 20px;
     margin-right: 20px;
     background-color: var(--light-bg);
+}
+
+.map {
+    flex: 2;
+    width: 100%;
+    height: 100%;
 }
diff --git a/houston/src/pages/Control.tsx b/houston/src/pages/Control.tsx
@@ -9,10 +9,14 @@ function Control() {
                 <div className="flight-telemetry">
 
                 </div>
-                <MapContainer style={{width: "100%", height: "90%"}} center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
+                <MapContainer className={"map"} center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
                     <TileLayer
-                        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                        attribution='Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'
+                        url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
+                        accessToken="pk.eyJ1IjoidGxlbnR6IiwiYSI6ImNsM2dwNmwzczBrb24zaXcxcWNoNWZjMjQifQ.sgAV6vkF7vOLC4P1_WkV_w"
+                        tileSize={512}
+                        zoomOffset={-1}
+                        id= 'mapbox/satellite-v9'
                     />
                     <Marker position={[51.505, -0.09]}>
                         <Popup>