£d Mapp Updates

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

src/pages/Map/BaseMap.js

@@ -1,11 +1,13 @@
-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
 
 mapboxgl.accessToken = "pk.eyJ1IjoiamFja3JvYiIsImEiOiJjanZ1bDBrdjUxYmgyNGJtczlxdWl3MzRuIn0.qla3sSgkkyxIkbYLvVsceA";
 
 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;

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",