From 50f73743dd1465278880530887b1cfff059c1dd0 Mon Sep 17 00:00:00 2001
From: Jack Robetson <jackrobertsonps3@gmail.com>
Date: Mon, 15 Apr 2024 11:42:18 +0100
Subject: [PATCH] =?UTF-8?q?=C2=A3d=20Mapp=20Updates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Home/App.js           |  6 +++---
 src/pages/Map/BaseMap.js        | 32 +++++++++++++++++++++++++++-----
 src/pages/StartingZoom/index.js |  2 +-
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/pages/Home/App.js b/src/pages/Home/App.js
index 248b621..f8c0c63 100644
--- a/src/pages/Home/App.js
+++ b/src/pages/Home/App.js
@@ -52,10 +52,10 @@ const App = () => {
             <BaseMap center={center} zoom={zoom} onMove={handleMove} setMap={onMapLoad} />
             {map && <GeoJsonHeatmapOverlay map={map} currentGeoJsonIndex={currentGeoJsonIndex} />}
             {map && <WidgetConsolidation map={map} isZoomCompleted={isZoomCompleted} cycleSVG={cycleSVG} />}
-            <DevZoom onZoom={handleZoom} />
-            {/* {showZoomFrontLoadScreen && (
+            {/* <DevZoom onZoom={handleZoom} /> */}
+            {showZoomFrontLoadScreen && (
                 <ZoomFrontLoadScreen onZoom={handleZoom} onOtherAction={() => setShowZoomFrontLoadScreen(false)} />
-            )} */}
+            )}
         </div>
     );
 };
diff --git a/src/pages/Map/BaseMap.js b/src/pages/Map/BaseMap.js
index 51c1117..28926aa 100644
--- a/src/pages/Map/BaseMap.js
+++ b/src/pages/Map/BaseMap.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import mapboxgl from "mapbox-gl";
 import './BaseMap.css'; // Ensure this path is correct
 
@@ -6,6 +6,8 @@ mapboxgl.accessToken = "pk.eyJ1IjoiamFja3JvYiIsImEiOiJjanZ1bDBrdjUxYmgyNGJtczlxd
 
 const BaseMap = ({ center, zoom, setMap }) => {
     const mapContainer = useRef(null);
+    const [is3D, setIs3D] = useState(false); // Manage 3D state
+
 
     useEffect(() => {
         const map = new mapboxgl.Map({
@@ -16,14 +18,34 @@ const BaseMap = ({ center, zoom, setMap }) => {
             interactive: true,
         });
 
-        setMap(map); // Optional: Store the map instance in the parent component's state for further use
+        setMap(map); // Optional: Store the map instance
+
+        map.on('load', () => {
+            // Example: Adjust a layer to 3D when 'is3D' is true
+            if (is3D) {
+                map.setPaintProperty('your_layer_id', 'fill-extrusion-height', 20);
+                // Add additional adjustments for 3D view
+            } else {
+                map.setPaintProperty('your_layer_id', 'fill-extrusion-height', 0);
+                // Adjust settings back for 2D view
+            }
+        });
 
         return () => {
-            map.remove(); // Cleanup map instance on component unmount
+            map.remove(); // Cleanup
         };
-    }, [center, zoom]); // React to changes in 'center' and 'zoom'
+    }, [center, zoom, is3D]); // React to changes
+
+    const toggle3D = () => {
+        setIs3D(!is3D); // Toggle 3D state
+    };
 
-    return <div className="map-container" ref={mapContainer}></div>;
+    return (
+        <>
+            <div className="map-container" ref={mapContainer}></div>
+            
+        </>
+    );
 };
 
 export default BaseMap;
diff --git a/src/pages/StartingZoom/index.js b/src/pages/StartingZoom/index.js
index 62ff2b6..c147c56 100644
--- a/src/pages/StartingZoom/index.js
+++ b/src/pages/StartingZoom/index.js
@@ -40,7 +40,7 @@ const ZoomFrontLoadScreen = ({onZoom, onOtherAction}) => {
                 left: 0,
                 width: "100vw",
                 height: "100vh",
-                backgroundColor: `rgba(61, 169, 222, ${backgroundOpacity})`, // Set background opacity dynamically
+                backgroundColor: `rgba(52,152,219, ${backgroundOpacity})`, // Set background opacity dynamically
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",