Updated to exspandable buttions

JackCrawfordRobertson · Apr 15, 2024 · c2cb717 · c2cb717
1 parent a4f474d
commit c2cb717
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 13 deletions.
diff --git a/src/pages/Map/BaseMap.js b/src/pages/Map/BaseMap.js
@@ -1,35 +1,27 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import mapboxgl from "mapbox-gl";
 import './BaseMap.css';
 
 mapboxgl.accessToken = "pk.eyJ1IjoiamFja3JvYiIsImEiOiJjanZ1bDBrdjUxYmgyNGJtczlxdWl3MzRuIn0.qla3sSgkkyxIkbYLvVsceA";
 
 const BaseMap = ({ center, zoom, setMap, resetView }) => {
     const mapContainer = useRef(null);
-    const [is3D, setIs3D] = useState(false);
 
     useEffect(() => {
         const map = new mapboxgl.Map({
             container: mapContainer.current,
-            style: "mapbox://styles/jackrob/clutmwwaf002401qz513g42lw", 
+            style: "mapbox://styles/jackrob/clutmwwaf002401qz513g42lw", // Use the Mapbox Studio style URL
             center: center,
             zoom: zoom,
             interactive: true,
-            // Initialize with a very high exaggeration for dramatic effect
-            terrain: { source: "mapbox-dem", exaggeration: 7.0 }
         });
 
         setMap(map);
 
-        map.on('load', () => {
-            // Update terrain exaggeration based on the is3D state
-            map.setTerrain({ source: 'mapbox-dem', exaggeration: is3D ? 7.0 : 1.5 });
-        });
-
         return () => {
             map.remove();
         };
-    }, [center, zoom, is3D]); 
+    }, [center, zoom]); // No need to include terrain options in the dependency array
 
     return (
         <>

diff --git a/src/pages/Map/MapNavigation/ControlButtons.js b/src/pages/Map/MapNavigation/ControlButtons.js
@@ -31,14 +31,16 @@ const ControlButtons = ({ map }) => {
 
     // Animation styles
     const animationStyleReset = useSpring({
-        width: isHoveredReset ? "100%" : "40px",
+        height: isHoveredReset ? 120 : 40,
+        width: isHoveredReset ? "120px" : "40px",
         backgroundColor: "#3DA9DE",
         config: { tension: 300, friction: 20 },
         borderRadius: "30px",
     });
 
     const animationStyleToggle = useSpring({
-        width: isHoveredToggle ? "100%" : "40px",
+        height: isHoveredToggle ? 120 : 40,
+        width: isHoveredToggle ? "120px" : "40px",
         backgroundColor: "#3DA9DE",
         config: { tension: 300, friction: 20 },
         borderRadius: "30px",