Setting Layer Transportation StoryMap and Custom Scrollbar

src/pages/Storytelling/Storytelling.css

@@ -21,7 +21,6 @@
   height: 90vh;
   overflow-y: scroll;
 }
-
 #story-container h1 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -69,7 +68,7 @@
   height: 300px;
   border-radius: calc(12px + 0.312vw);
   object-fit: cover;
-  object-position: bottom;
+  object-position: top;
 }
 .chapter .btn-hero {
   background-color: #1A1D40;
@@ -85,6 +84,26 @@
     rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
 }
 
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+  border-radius: 10px;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a8bbbf;
+}
+
 /* PHONE */
 @media (max-width: 576px), screen and (orientation: portrait) {
   #storytelling-page {

src/pages/Storytelling/Storytelling.jsx

@@ -286,6 +286,15 @@ const Storytelling = () => {
         onChangeChapter(config.chapters[10]);
         console.log("Fly to Loc 11");
       } else if (twelveVisible) {
+        for (let i = 12; i <= 20; i++) {
+          const chapter = config.chapters[i];
+          if (map.current.getLayer(chapter.layerID)) {
+            map.current.removeLayer(chapter.layerID);
+          }
+          if (map.current.getSource(chapter.sourceID)) {
+            map.current.removeSource(chapter.sourceID);
+          }
+        }
         onChangeChapter(config.chapters[11]);
         console.log("Fly to Loc 12");
       } else if (thirteenVisible) {
@@ -323,8 +332,6 @@ const Storytelling = () => {
             map.current.removeSource(chapter.sourceID);
           }
         }
-      } else {
-        removeChapterLayers(map.current);
       }
     }
   }, [

src/pages/Storytelling/config.jsx

@@ -21,13 +21,13 @@ var config = {
       image: "image-story/story-1.jpg",
       hidden: false,
       description:
-        "Bingung memilih destinasi wisata di Kota Jakarta? Banyaknya rekomendasi vlogger dan selebgram yang buat kamu bimbang? Mari tentukan tempat healing-mu disini! Halaman Partayana Bhumi Jakarta mengemas rekomendasi wisata di Kota Jakarta dari sisi geospasial secara interaktif melalui 3D Mapping. Ratusan titik destinasi dan ulasan menarik dari berbagai jenis wisata yang dilengkapi visualisasi 3D buat kamu lebih mengerti dimana tempat yang cocok untuk menyegarkan pikiran. Fitur maps yang tersedia juga membantumu mengatur perjalanan. Penasaran? Yuk Swipe ke atas kalo kamu pake desktop atau swipe ke kiri kalo kamu pake smartphone!",
+        "Bingung memilih destinasi wisata di Kota Jakarta? Banyaknya rekomendasi vlogger dan selebgram yang buat kamu bimbang? Mari tentukan tempat healing-mu disini! WebGIS Partayana Bhumi Jakarta mengemas rekomendasi wisata di Kota Jakarta dari sisi geospasial secara interaktif melalui 3D Mapping. Ratusan titik destinasi dan ulasan menarik dari berbagai jenis wisata yang dilengkapi visualisasi 3D buat kamu lebih mengerti dimana tempat yang cocok untuk menyegarkan pikiran. Fitur maps yang tersedia juga membantumu mengatur perjalanan. Penasaran? Yuk Swipe ke atas kalo kamu pake desktop atau swipe ke kiri kalo kamu pake smartphone!",
       location: {
         center: [106.827, -6.175],
         zoom: 9,
         pitch: 15,
         bearing: 0,
-        duration: 3000,
+        duration: 5000,
         essential: true,
       },
       mapAnimation: "flyTo",
@@ -86,7 +86,7 @@ var config = {
         zoom: 12,
         pitch: 60,
         bearing: -43.2,
-        duration: 3000,
+        duration: 5000,
         essential: true,
       },
       mapAnimation: "flyTo",
@@ -112,7 +112,7 @@ var config = {
         zoom: 11,
         pitch: 45,
         bearing: -10.2,
-        duration: 3000,
+        duration: 5000,
         essential: true,
       },
       mapAnimation: "flyTo",
@@ -138,7 +138,7 @@ var config = {
         zoom: 11,
         pitch: 15,
         bearing: -60.2,
-        duration: 3000,
+        duration: 5000,
         essential: true,
       },
       mapAnimation: "flyTo",
@@ -164,7 +164,7 @@ var config = {
         zoom: 11,
         pitch: 45,
         bearing: -60.2,
-        duration: 3000,
+        duration: 5000,
         essential: true,
       },
       mapAnimation: "flyTo",
@@ -190,7 +190,7 @@ var config = {
         zoom: 16.75,
         pitch: 75,
         bearing: 150,
-        duration: 3000,
+        duration: 5000,
         essential: true,
       },
       mapAnimation: "flyTo",
@@ -216,7 +216,7 @@ var config = {
         zoom: 11,
         pitch: 10,
         bearing: 15.2,
-        duration: 3000,
+        duration: 5000,
         essential: true,
       },
       mapAnimation: "flyTo",
@@ -242,7 +242,7 @@ var config = {
         zoom: 10.5,
         pitch: 10,
         bearing: -20.2,
-        duration: 3000,
+        duration: 5000,
         essential: true,
       },
       mapAnimation: "flyTo",
@@ -268,7 +268,7 @@ var config = {
         zoom: 16.25,
         pitch: 45,
         bearing: 60.2,
-        duration: 3000,
+        duration: 5000,
         essential: true,
       },
       mapAnimation: "flyTo",
@@ -294,7 +294,7 @@ var config = {
         zoom: 11,
         pitch: 30,
         bearing: -30.2,
-        duration: 3000,
+        duration: 5000,
         essential: true,
       },
       mapAnimation: "flyTo",
@@ -314,13 +314,13 @@ var config = {
       icon: "wisata-alam",
       image: "image-story/Wisata Alam/pulau tidung.jpg",
       description:
-        "Bosan dengan hiruk-pikuk dan ramainya ibukota, ketenangan dapat kamu temukan di kepulauan seribu yang menyajikan keindahan dan pesona alam ",
+        "Bosan dengan hiruk-pikuk dan ramainya ibukota, ketenangan dapat kamu temukan di Kepulauan Seribu yang menyajikan keindahan dan pesona alam ",
       location: {
-        center: [106.5796, -5.80614],
-        zoom: 10,
+        center: [106.54829, -5.581173],
+        zoom: 11.5,
         pitch: 15,
-        bearing: 60.2,
-        duration: 3000,
+        bearing: 90.2,
+        duration: 5000,
         essential: true,
       },
       mapAnimation: "flyTo",
@@ -334,18 +334,18 @@ var config = {
       id: "transportation-desc",
       alignment: "left",
       title: "Transportasi Umum Sesuai Kebutuhan!",
-      subtitle: "Get to Know More!",
+      subtitle: "Moda Transportasi",
       image: "image-story/LRT.webp",
       hidden: false,
       icon: "kereta",
       description:
-        "Untuk anda yang tidak membawa kendaraan pribadi, tidak perlu bingung untuk mencapai tempat wisata. Jakarta memiliki banyak moda transportasi umum yang bukan hanya membantu mengantarkan anda ke lokasi tujuan perjalanan, transportasi umum juga bukti bahwa Jakarta mengusung konsep smart city dan ramah lingkungan. Banyak moda transportasi umum yang dapat dilihat pada peta di samping maupun peta utama.",
+        "Untuk anda yang tidak membawa kendaraan pribadi, tidak perlu bingung untuk mencapai tempat wisata. Jakarta memiliki banyak moda transportasi umum yang bukan hanya membantu mengantarkan anda ke lokasi tujuan perjalanan, transportasi umum juga bukti bahwa Jakarta mengusung konsep smart city dan ramah lingkungan. Transportasi umum yang tersedia mulai dari bus Transjakarta, kereta api, hingga MRT dan LRT. Jaringan transportasi di DKI Jakarta bisa kamu lihat dalam peta disamping loh!",
       location: {
         center: [106.877, -6.175],
         zoom: 10,
         pitch: 30,
         bearing: -30.2,
-        duration: 3000,
+        duration: 5000,
         essential: true,
       },
       mapAnimation: "flyTo",
@@ -530,14 +530,14 @@ var config = {
         zoom: 17,
         pitch: 50,
         bearing: -15.2,
-        duration: 3000,
+        duration: 5000,
         essential: true,
       },
       mapAnimation: "flyTo",
       rotateAnimation: true,
       callback: "",
       isLayerOn: false,
-      button: true
+      button: true,
     },
   ],
 };