feat(map): update MapLegend component usage and enhance click handler management in DistrictLayer

sigap-website/app/_components/map/controls/map-legend.tsx

@@ -8,7 +8,7 @@ interface MapLegendProps {
 
 export default function MapLegend({ position = "bottom-right" }: MapLegendProps) {
   return (
-    <Overlay position={position}>
+    // <Overlay position={position}>
       <div className="flex flex-row text-xs font-semibold font-sans text-white">
         <div className={`flex items-center gap-1.5 py-0 px-8 rounded-l-md border-y border-1 `} style={{ backgroundColor: `${CRIME_RATE_COLORS.low}` }}>
           <span>Low</span>
@@ -20,6 +20,6 @@ export default function MapLegend({ position = "bottom-right" }: MapLegendProps)
           <span>High</span>
         </div>
       </div>
-    </Overlay>
+    // </Overlay>
   )
 }

sigap-website/app/_components/map/crime-map.tsx

@@ -303,8 +303,9 @@ export default function CrimeMap() {
                                                     selectedYear={selectedYear}
                                                     selectedMonth={selectedMonth}
                                                 />
-
+                                                <div className="absolute bottom-20 right-0 z-10 p-2">
                                                 <MapLegend position="bottom-right" />
+                                                </div>
 
                                             </>
                                         )}

sigap-website/app/_components/map/layers/district-layer-old.tsx

@@ -716,6 +716,10 @@ export default function DistrictLayer({
                             CRIME_RATE_COLORS.default,
                         ] as any)
                     }
+
+                    // Re-add click handler to ensure it works after timelapse
+                    map.off("click", "district-fill", handleDistrictClick)
+                    map.on("click", "district-fill", handleDistrictClick)
                 }
             } catch (error) {
                 console.error("Error adding district layers:", error)
@@ -735,6 +739,58 @@ export default function DistrictLayer({
         }
     }, [map, visible, tilesetId, crimes, filterCategory, year, month, handleIncidentClick, handleClusterClick])
 
+    // Add an additional effect to ensure click handlers are properly maintained
+    useEffect(() => {
+        if (!map || !layersAdded.current) return
+
+        // Re-attach the click handler after any data changes
+        if (map.getMap().getLayer("district-fill")) {
+            map.off("click", "district-fill", handleDistrictClick)
+            map.on("click", "district-fill", handleDistrictClick)
+        }
+
+        // Ensure district-extrusion settings are maintained after timelapse
+        if (map.getMap().getLayer("district-extrusion")) {
+            map.getMap().setFilter("district-extrusion", ["==", ["get", "kode_kec"], focusedDistrictId || ""]);
+
+            // Re-apply the extrusion color based on the focused district
+            map.getMap().setPaintProperty("district-extrusion", "fill-extrusion-color", [
+                "case",
+                ["has", "kode_kec"],
+                [
+                    "match",
+                    ["get", "kode_kec"],
+                    focusedDistrictId || "",
+                    crimeDataByDistrict[focusedDistrictId || ""]?.level === "low"
+                        ? CRIME_RATE_COLORS.low
+                        : crimeDataByDistrict[focusedDistrictId || ""]?.level === "medium"
+                            ? CRIME_RATE_COLORS.medium
+                            : crimeDataByDistrict[focusedDistrictId || ""]?.level === "high"
+                                ? CRIME_RATE_COLORS.high
+                                : CRIME_RATE_COLORS.default,
+                    "transparent",
+                ],
+                "transparent",
+            ]);
+
+            // Ensure extrusion height is restored if needed
+            if (focusedDistrictId) {
+                map.getMap().setPaintProperty("district-extrusion", "fill-extrusion-height", [
+                    "case",
+                    ["has", "kode_kec"],
+                    ["match", ["get", "kode_kec"], focusedDistrictId, 800, 0],
+                    0,
+                ]);
+            }
+        }
+
+        return () => {
+            if (map) {
+                map.off("click", "district-fill", handleDistrictClick)
+            }
+        }
+    }, [map, year, month, crimeDataByDistrict, focusedDistrictId])
+
     useEffect(() => {
         if (!map || !layersAdded.current) return
 

sigap-website/app/_styles/globals.css

@@ -160,10 +160,10 @@
 
 /* Mapbox copyright */
 .mapbox-logo {
-  /* display: none; */
+  display: none !important;
 }
 .mapboxgl-ctrl-logo {
-  /* display: none !important; */
+  display: none !important;
 }
 
 /* .mapbox-improve-map {