Integrasi Lokasi Wisata Storytelling dan Kustomisasi Toggle

yakubhariana70 · Nov 16, 2023 · 10e446e · 10e446e
1 parent 9c07a5f
commit 10e446e
Show file tree

Hide file tree

Showing 6 changed files with 10,550 additions and 789 deletions.
diff --git a/src/data/wisata.json b/src/data/wisata.json
diff --git a/src/pages/DirectionMap/DirectionMap.css b/src/pages/DirectionMap/DirectionMap.css
@@ -3,39 +3,75 @@
   width: 100vw;
 }
 
-.feature-toggle {
+#sidebar {
+  /* background-color: rgba(35, 55, 75, 0.9); */
+  color: #fff;
+  z-index: 1;
+  position: absolute;
+  bottom: 2rem;
+  left: 1rem;
+  /* margin: 1rem; */
+  border-radius: 1rem;
+}
+
+.feature-bar {
+  display: flex;
+}
+
+.coordinate-bar {
   background-color: rgba(35, 55, 75, 0.9);
   color: #fff;
-  padding: 6px 12px;
   font-family: monospace;
   z-index: 2;
-  position: absolute;
-  top: 1rem;
-  left: 0;
   margin: 12px;
   border-radius: 4px;
 }
 
-.sidebar {
-  background-color: rgba(35, 55, 75, 0.9);
-  color: #fff;
-  padding: 6px 12px;
-  z-index: 1;
+#toggle-layer {
+  display: flex;
+  flex-flow: column wrap;
+  align-items: flex-end;
   position: absolute;
-  bottom: 1rem;
-  left: 0;
-  margin: 12px;
-  border-radius: 4px;
+  z-index: 1;
+  bottom: 2rem;
+  right: 10px;
+  gap: 10px;
+}
+
+#toggle-layer .inactive {
+  display: none;
+}
+
+#toggle-layer .active {
+  display: block;
+}
+
+#button-layer-bar {
+  display: flex;
+  gap: calc(8px + 0.312vw);
+}
+
+.click-toggle {
+  padding: calc(12px + 0.312vw);
+  border-radius: 50%;
+  border: 1px solid white;
+  background-color: white;
+  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
+    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
+    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
+}
+
+.active {
+  background-color: limegreen;
 }
 
 /* WISATA  */
 
 #menu-wisata {
   background: #404040;
-  border-radius: 0.5  rem;
+  border-radius: 0.5rem;
   width: 120px;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
-    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
 }
 
 #menu-wisata :first-child {
@@ -74,24 +110,24 @@
   background: limegreen;
 }
 
-/* FITUR  */
-#menu-fitur {
+/* TRANSPORTASI  */
+#menu-transportasi {
   background: #fff;
   border-radius: 0.5rem;
   width: 120px;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
     rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
 }
 
-#menu-fitur :first-child {
+#menu-transportasi :first-child {
   border-radius: 0.5rem 0.5rem 0rem 0rem;
 }
 
-#menu-fitur :last-child {
+#menu-transportasi :last-child {
   border-radius: 0rem 0rem 0.5rem 0.5rem;
 }
 
-#menu-fitur a {
+#menu-transportasi a {
   font-size: 13px;
   color: #404040;
   display: block;
@@ -101,40 +137,25 @@
   text-align: center;
 }
 
-#menu-fitur a:last-child {
+#menu-transportasi a:last-child {
   border: none;
 }
 
-#menu-fitur a:hover {
+#menu-transportasi a:hover {
   background-color: #f8f8f8;
   color: #404040;
 }
 
-#menu-fitur a.active {
+#menu-transportasi a.active {
   background-color: #3887be;
   color: #ffffff;
 }
 
-#menu-fitur a.active:hover {
+#menu-transportasi a.active:hover {
   background: #3074a4;
 }
 
-
-#toggle-layer{
-  display: flex;
-  align-items: flex-end;
-  position: absolute;
-  z-index: 1;
-  bottom: 1rem;
-  right: 10px;
-  gap: 10px;
-}
-
-
-#toggle-layer .inactive {
-  display: none;
-}
-
-#toggle-layer .active {
-  display: block; 
+.icon {
+  max-height: 30px;
+  max-width: 20px;
 }
diff --git a/src/pages/DirectionMap/DirectionMap.jsx b/src/pages/DirectionMap/DirectionMap.jsx
@@ -19,12 +19,13 @@ const DirectionMap = () => {
   const [zoom, setZoom] = useState(10);
   const [basemap, setBasemap] = useState("dawn");
   const [isDirectionActive, setIsDirectionActive] = useState(true);
-  const [toggleLayer, setToggleLayer] = useState("wisata");
+  const [toggleLayer, setToggleLayer] = useState(null);
 
   useEffect(() => {
     console.log(wisataData);
   }, []);
 
+  // LOAD MAP AND CONTROLS
   useEffect(() => {
     if (map.current) return;
     map.current = new mapboxgl.Map({
@@ -63,7 +64,7 @@ const DirectionMap = () => {
     }
   }, [basemap]);
 
-  // SETTING FITUR NAVIGATION
+  // SETTING FITUR DIRECTION
   const toggleDirection = () => {
     setIsDirectionActive((prevState) => {
       const newState = !prevState;
@@ -480,7 +481,7 @@ const DirectionMap = () => {
           }
         };
 
-        const layers = document.getElementById("menu-fitur");
+        const layers = document.getElementById("menu-transportasi");
         layers.appendChild(link);
       }
     });
@@ -502,9 +503,6 @@ const DirectionMap = () => {
         .setHTML(description)
         .addTo(map.current);
     });
-  }, []);
-
-  useEffect(() => {
     // Change the cursor to a pointer when the mouse is over the places layer.
     map.current.on("mouseenter", "places", () => {
       map.current.getCanvas().style.cursor = "pointer";
@@ -514,7 +512,7 @@ const DirectionMap = () => {
     map.current.on("mouseleave", "places", () => {
       map.current.getCanvas().style.cursor = "";
     });
-  });
+  }, []);
 
   // READ LONGLAT
   useEffect(() => {
@@ -526,23 +524,37 @@ const DirectionMap = () => {
     });
   });
 
+  // TOGGLE LAYER
+  const onChangeLayer = (toggle) => {
+    if (toggleLayer !== toggle) {
+      setToggleLayer(toggle);
+    } else {
+      setToggleLayer(null);
+    }
+  };
+
   return (
     <div className="direction-map">
-      <div className="sidebar">
-        {/* Longitude: {lng} | Latitude: {lat} | Zoom: {zoom} */}
-        <Button
-          variant={isDirectionActive ? "success" : "secondary"}
-          size="sm"
-          onClick={toggleDirection}
-        >
-          {isDirectionActive ? "Turn Off Direction" : "Turn On Direction"}
-        </Button>
-        <Button  variant="danger" onClick={() => {setToggleLayer("wisata")}}>
-          Toggle Wisata
-        </Button>
-        <Button onClick={() => {setToggleLayer("fitur")}}>
-          Toggle Fitur
-        </Button>
+      <div id="sidebar">
+        <div className="feature-bar">
+          <button
+            className={
+              isDirectionActive ? "click-toggle active" : "click-toggle"
+            }
+            onClick={() => {
+              toggleDirection();
+            }}
+          >
+            <img
+              className="icon"
+              src={isDirectionActive ? "vite.svg" : "jakarta-tourism.svg"}
+              alt="transportasi-layer"
+            />
+          </button>
+        </div>
+        {/* <div className="coordinate-bar">
+          Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
+        </div> */}
       </div>
       <div id="toggle-layer">
         <div
@@ -552,11 +564,43 @@ const DirectionMap = () => {
           {/* Konten atau layer wisata */}
         </div>
         <div
-          id="menu-fitur"
-          className={toggleLayer === "fitur" ? "active" : "inactive"}
+          id="menu-transportasi"
+          className={toggleLayer === "transportasi" ? "active" : "inactive"}
         >
           {/* Konten atau layer fitur */}
         </div>
+        <div id="button-layer-bar">
+          <button
+            className= {toggleLayer === "wisata" ? "click-toggle active" : "click-toggle"}
+            onClick={() => {
+              onChangeLayer("wisata");
+            }}
+          >
+            <img
+              className="icon"
+              src={
+                toggleLayer === "wisata" ? "vite.svg" : "jakarta-tourism.svg"
+              }
+              alt="wisata-layer"
+            />
+          </button>
+          <button
+            className={toggleLayer === "transportasi" ? "click-toggle active" : "click-toggle"}
+            onClick={() => {
+              onChangeLayer("transportasi");
+            }}
+          >
+            <img
+              className="icon"
+              src={
+                toggleLayer === "transportasi"
+                  ? "vite.svg"
+                  : "jakarta-tourism.svg"
+              }
+              alt="transportasi-layer"
+            />
+          </button>
+        </div>
       </div>
       <div ref={mapContainer} className="map-container" />
     </div>

diff --git a/src/pages/Storytelling/Storytelling.css b/src/pages/Storytelling/Storytelling.css
@@ -39,7 +39,8 @@
   flex-flow: column nowrap;
   justify-content: flex-start;
   padding: 3rem;
-  margin-bottom: 1.5rem;
+  /* margin-bottom: 1.5rem; */
+  border: 1px solid grey;
 }
 
 #story-mapbox {