test reduce geojson size

bagusindrayana · Apr 10, 2024 · ea34e03 · ea34e03
1 parent 3eeacee
commit ea34e03
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -3,6 +3,7 @@
 - [x] Informasi Gempa
 - [ ] Informasi Tsunami
 - [ ] Data Geojson Garis Pantai/Pesisir
+- [ ] Reduce Geojson Size
 - [ ] PWA
 - [ ] Push Notification
 - [ ] Broadcast System

diff --git a/app/page.tsx b/app/page.tsx
@@ -272,9 +272,11 @@ export default function Home() {
     const areas = data.area;
 
     // Hapus data array objek yang sama
-    const uniqueData = areas.filter((obj, index, self) =>
-      index === self.findIndex((t) => isEqual(t.properties, obj.properties))
-    );
+    // const uniqueData = areas.filter((obj, index, self) =>
+    //   index === self.findIndex((t) => isEqual(t.properties.mhid, obj.properties.mhid))
+    // );
+
+    const uniqueData = areas;
 
     for (let x = 0; x < uniqueData.length; x++) {
       const element = uniqueData[x];
@@ -338,6 +340,7 @@ export default function Home() {
     sendWave();
   }
 
+  const hoverWilayah = useRef<any>(null);
   function loadGeoJsonData() {
     fetch('/geojson/all_kabkota_ind.geojson')
       .then(response => response.json())
@@ -359,6 +362,51 @@ export default function Home() {
               'line-width': 1
             }
           });
+
+          map.current!.addLayer({
+            'id': 'wilayah-fill',
+            'type': 'fill',
+            'source': 'wilayah',
+            'layout': {
+
+            },
+            'paint': {
+              'fill-color': 'red',
+              'fill-opacity': [
+                'case',
+                ['boolean', ['feature-state', 'hover'], false],
+                0.1,
+                0
+              ],
+
+            }
+          });
+
+          // map.current!.on('mousemove', 'wilayah-fill', (e: any) => {
+          //   if (e.features.length > 0) {
+          //     if (hoverWilayah.current !== null) {
+          //       map.current!.setFeatureState(
+          //         { source: 'wilayah', id: hoverWilayah.current },
+          //         { hover: false }
+          //       );
+          //     }
+          //     hoverWilayah.current = e.features[0].id;
+          //     map.current!.setFeatureState(
+          //       { source: 'wilayah', id: hoverWilayah.current },
+          //       { hover: true }
+          //     );
+          //   }
+          // });
+
+          // map.current!.on('mouseleave', 'wilayah-fill', () => {
+          //   if (hoverWilayah.current !== null) {
+          //     map.current!.setFeatureState(
+          //       { source: 'wilayah', id: hoverWilayah.current },
+          //       { hover: false }
+          //     );
+          //   }
+          //   hoverWilayah.current = null;
+          // });
         }
         // getTitikStationJson();
         getTitikGempaJson();

diff --git a/app/worker.mjs b/app/worker.mjs
@@ -77,6 +77,7 @@ function checkMultiHighlightArea(titikGempa,id) {
 
     for (let index = 0; index < allPolygon.length; index++) {
         const polygon = allPolygon[index];
+
         for (let it = 0; it < titikGempa.length; it++) {
             const tg = titikGempa[it];
 
@@ -127,9 +128,10 @@ function checkMultiHighlightArea(titikGempa,id) {
 
             if(radius > 0){
                 var buffer = turf.buffer(turf.point(coordinate), radius, { units: 'meters' });
-
-                var intersection = turf.booleanIntersects(polygon, buffer);
+                
+
                 //var intersection = turf.booleanPointInPolygon(turf.centroid(polygon), buffer);
+                var intersection = turf.booleanIntersects(polygon, buffer);
                 if (intersection) {
                     const item = highlightSelectedArea.find(e => e.properties.mhid === polygon.properties.mhid);
                     if(item){
@@ -138,13 +140,26 @@ function checkMultiHighlightArea(titikGempa,id) {
                     }
                     const at = tg.areaTerdampak.find(e => e.mhid === polygon.properties.mhid);
                     if(at) {
+                        at.distance = turf.distance(turf.point(at.center),turf.point(coordinate));
                         at.color = "red";
                         at.hit = true;
                     }
-
-
-
                 }
+                // const distance = turf.distance(turf.centroid(polygon),turf.point(coordinate))
+                // if (distance < (radius/1000)) {
+                //     const item = highlightSelectedArea.find(e => e.properties.mhid === polygon.properties.mhid);
+                //     if(item){
+                //         item.properties.color = "red";
+                //         item.properties.hit = true;
+                //     }
+                //     const at = tg.areaTerdampak.find(e => e.mhid === polygon.properties.mhid);
+                //     if(at) {
+                //         at.distance = turf.distance(turf.point(at.center),turf.point(coordinate));
+                //         at.color = "red";
+                //         at.hit = true;
+
+                //     }
+                // }
             }