Setting Layer Transportation StoryMap

yakubhariana70 · Nov 19, 2023 · f70bcfe · f70bcfe
1 parent e51a558
commit f70bcfe
Show file tree

Hide file tree

Showing 2 changed files with 238 additions and 15 deletions.
diff --git a/src/pages/Storytelling/Storytelling.jsx b/src/pages/Storytelling/Storytelling.jsx
@@ -56,6 +56,9 @@ const Storytelling = () => {
   const { ref: sectionThirteen, inView: thirteenVisible } = useInView({
     threshold: 0.7,
   });
+  const { ref: sectionFourteen, inView: fourteenVisible } = useInView({
+    threshold: 0.7,
+  });
 
   useEffect(() => {
     if (map.current) return;
@@ -114,16 +117,33 @@ const Storytelling = () => {
 
   const addChapterLayers = (map, chapter) => {
     // Tambahkan sumber data baru
-    map.addSource(chapter.sourceID, {
-      type: "vector",
-      url: chapter.layerUrl,
-    });
+    if (chapter.icon) {
+      map.loadImage(`icon/layer/${chapter.icon}.png`, (error, image) => {
+        if (error) throw error;
+        map.addImage(`${chapter.icon}`, image);
+        map.addSource(chapter.sourceID, {
+          type: "vector",
+          url: chapter.layerUrl,
+        });
 
-    map.addLayer({
-      id: chapter.layerID,
-      source: chapter.sourceID,
-      ...chapter.layerLoad,
-    });
+        map.addLayer({
+          id: chapter.layerID,
+          source: chapter.sourceID,
+          ...chapter.layerLoad,
+        });
+      });
+    } else {
+      map.addSource(chapter.sourceID, {
+        type: "vector",
+        url: chapter.layerUrl,
+      });
+
+      map.addLayer({
+        id: chapter.layerID,
+        source: chapter.sourceID,
+        ...chapter.layerLoad,
+      });
+    }
 
     // Atur opacity menjadi 0 agar layer tersembunyi
     map.setLayoutProperty(chapter.layerID, "visibility", "none");
@@ -154,12 +174,12 @@ const Storytelling = () => {
         },
       });
     });
-  }
-
+  };
 
   // ON CHANGE CHAPTER
   const onChangeChapter = (chapter) => {
-    const { category, layerID, sourceID, isLayerOn, rotateAnimation, icon } = chapter;
+    const { category, layerID, sourceID, isLayerOn, rotateAnimation, icon } =
+      chapter;
     const dataForCategory = wisataByCategory[category];
     console.log(category, dataForCategory);
     if (dataForCategory && isLayerOn) {
@@ -208,7 +228,7 @@ const Storytelling = () => {
         addChapterLayers(map.current, chapter);
       }
       if (rotateAnimation) {
-        onRotateAnimation()
+        onRotateAnimation();
       }
     } else {
       removeChapterLayers(map.current);
@@ -271,8 +291,21 @@ const Storytelling = () => {
       } else if (thirteenVisible) {
         onChangeChapter(config.chapters[12]);
         console.log("Fly to Loc 13");
+      } else if (fourteenVisible) {
+        onChangeChapter(config.chapters[13]);
+        // addChapterLayers(map.current, config.chapters[14])
+        // addChapterLayers(map.current, config.chapters[15])
+        // addChapterLayers(map.current, config.chapters[16])
+        // addChapterLayers(map.current, config.chapters[17])
+        // addChapterLayers(map.current, config.chapters[18])
+        // addChapterLayers(map.current, config.chapters[19])
+        // addChapterLayers(map.current, config.chapters[20])
+        // addChapterLayers(map.current, config.chapters[21])
+        console.log("Fly to Loc 14");
+      } else {
+        removeChapterLayers(map.current)
       }
-    }
+    } 
   }, [
     oneVisible,
     twoVisible,
@@ -287,6 +320,7 @@ const Storytelling = () => {
     elevenVisible,
     twelveVisible,
     thirteenVisible,
+    fourteenVisible
   ]);
 
   // MAP COMPONENT (FUNCTION ATAU CONTROL)
@@ -376,6 +410,9 @@ const Storytelling = () => {
               Tourism Map
             </Link>
           </section>
+          <section className="chapter" ref={sectionFourteen}>
+            <TourismStory story={config.chapters[13]} />
+          </section>
         </main>
       </section>
       <section id="story-mapbox">

diff --git a/src/pages/Storytelling/config.jsx b/src/pages/Storytelling/config.jsx
@@ -316,7 +316,7 @@ var config = {
       description:
         "Bosan dengan hiruk-pikuk dan ramainya ibukota, ketenangan dapat kamu temukan di kepulauan seribu yang menyajikan keindahan dan pesona alam ",
       location: {
-        center: [106.57960, -5.80614],
+        center: [106.5796, -5.80614],
         zoom: 10,
         pitch: 15,
         bearing: 60.2,
@@ -352,6 +352,192 @@ var config = {
       callback: "",
       isLayerOn: false,
     },
+    {
+      id: "transportation-desc",
+      alignment: "left",
+      title: "Transportasi Umum Sesuai Kebutuhan!",
+      subtitle: "Get to Know More!",
+      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.",
+      location: {
+        center: [106.877, -6.175],
+        zoom: 10,
+        pitch: 30,
+        bearing: -30.2,
+        duration: 3000,
+        essential: true,
+      },
+      mapAnimation: "flyTo",
+      rotateAnimation: true,
+      callback: "",
+      isLayerOn: true,
+      sourceID: "stasiun-kereta",
+      layerID: "point-stasiun-kereta",
+      layerUrl: "mapbox://yakubhariana70.clowkmnky04gb1uo1369vvgyj-3hwny",
+      layerLoad: {
+        type: "symbol",
+        slot: "top",
+        "source-layer": "JS-stasiun-kereta",
+        layout: {
+          "icon-image": "kereta",
+          visibility: "visible",
+        },
+      },
+    },
+    {
+      id: "transportation-item",
+      icon: "mrt",
+      isLayerOn: true,
+      sourceID: "stasiun-mrt",
+      layerID: "point-stasiun-mrt",
+      layerUrl: "mapbox://yakubhariana70.clowkn7g027pp20ldj94qmd0i-3mnja",
+      layerLoad: {
+        type: "symbol",
+        slot: "top",
+        "source-layer": "JS-stasiun-mrt",
+        layout: {
+          "icon-image": "mrt",
+          visibility: "visible",
+        },
+      },
+    },
+    {
+      id: "transportation-item",
+      icon: "lrt",
+      isLayerOn: true,
+      sourceID: "stasiun-lrt",
+      layerID: "point-stasiun-lrt",
+      layerUrl: "mapbox://yakubhariana70.clp18n1m123bh1mqfo4rnglzz-5ruy3",
+      layerLoad: {
+        type: "symbol",
+        slot: "top",
+        "source-layer": "JS-stasiun-LRT",
+        layout: {
+          "icon-image": "lrt",
+          visibility: "visible",
+        },
+      },
+    },
+    {
+      id: "transportation-item",
+      icon: "bus",
+      isLayerOn: true,
+      sourceID: "terminal-bus",
+      layerID: "point-terminal-bus",
+      layerUrl: "mapbox://yakubhariana70.clowkrjed27qq20ld3ehv8vfv-2kgny",
+      layerLoad: {
+        type: "symbol",
+        slot: "top",
+        "source-layer": "JS-terminal-bus",
+        layout: {
+          "icon-image": "bus",
+          visibility: "visible",
+        },
+      },
+    },
+    {
+      id: "transportation-item",
+      icon: "halte-tj",
+      isLayerOn: true,
+      sourceID: "halte-tj",
+      layerID: "point-halte-tj",
+      layerUrl: "mapbox://yakubhariana70.clowkscgb29tt20psl939zcii-3t55t",
+      layerLoad: {
+        type: "symbol",
+        slot: "top",
+        "source-layer": "JS-halte-transjakarta",
+        layout: {
+          "icon-image": "halte-tj",
+          visibility: "visible",
+        },
+      },
+    },
+    {
+      id: "transportation-item",
+      icon: "bandara",
+      isLayerOn: true,
+      sourceID: "bandara",
+      layerID: "point-bandara",
+      layerUrl: "mapbox://yakubhariana70.clowktio804e11mo1qxmg6wim-29qnk",
+      layerLoad: {
+        type: "symbol",
+        slot: "top",
+        "source-layer": "JS-bandara",
+        layout: {
+          "icon-image": "bandara",
+          visibility: "visible",
+        },
+      },
+    },
+    {
+      id: "transportation-item",
+      sourceID: "ka-route",
+      layerID: "line-ka",
+      layerUrl: "mapbox://yakubhariana70.clp18huim0d9a1np6galo91h0-0w31i",
+      isLayerOn: true,
+      layerLoad: {
+        type: "line",
+        slot: "middle",
+        "source-layer": "JS-jalur-KA",
+        layout: {
+          // Make the layer visible by default.
+          visibility: "visible",
+          "line-join": "round",
+          "line-cap": "round",
+        },
+        paint: {
+          "line-color": "#cc3433",
+          "line-width": 2,
+        },
+      },
+    },
+    {
+      id: "transportation-item",
+      sourceID: "lrt-route",
+      layerID: "line-lrt",
+      layerUrl: "mapbox://yakubhariana70.clp18jlyu2ddo1tqkf6v1d0dn-956yo",
+      isLayerOn: true,
+      layerLoad: {
+        type: "line",
+        slot: "middle",
+        "source-layer": "JS-jalur-LRT",
+        layout: {
+          // Make the layer visible by default.
+          visibility: "visible",
+          "line-join": "round",
+          "line-cap": "round",
+        },
+        paint: {
+          "line-color": "#1A1D40",
+          "line-width": 2,
+        },
+      },
+    },
+    {
+      id: "transportation-item",
+      sourceID: "mrt-route",
+      layerID: "line-mrt",
+      layerUrl: "mapbox://yakubhariana70.clowknwwh1xm11no4makbjv3u-0rvb4",
+      isLayerOn: true,
+      layerLoad: {
+        type: "line",
+        slot: "middle",
+        "source-layer": "JS-jalur-MRT",
+        layout: {
+          // Make the layer visible by default.
+          visibility: "visible",
+          "line-join": "round",
+          "line-cap": "round",
+        },
+        paint: {
+          "line-color": "#C2FE46",
+          "line-width": 2,
+        },
+      },
+    },
   ],
 };