-
-
-
-
+
+
Today's Recommendations
+
+
+
+
-
-
-
-
Severity Levels
-
+
+
+
+
-
+
+
+
+
+
+ {crimes.length > 0 ? (
+ crimes.map((crime) => (
+
+
+
+ {crime.district_name}
+
+ {crime.number_of_crime}
+
+
+
+
+ ))
+ ) : (
+ No crime data available
+ )}
+
+
+
-
-
Display Options
-
-
-
-
+
+
+ {weatherData.forecast.map((item, index) => (
+
+
+
+
+ {item.time}
-
-
-
-
-
- Crime Statistics
- Analysis of crime data
-
-
-
-
-
Crime by Type
-
- Chart Placeholder
-
+
+ {item.condition}
+ {item.temperature}°
-
-
-
-
-
Crime by Time of Day
-
- Chart Placeholder
-
-
-
-
-
-
-
Monthly Trend
-
- Chart Placeholder
-
-
-
-
-
-
-
-
-
-
- About This Map
-
-
-
- This interactive crime map visualizes crime data across different districts. Use the controls to
- explore different aspects of the data.
-
-
- Legend
-
-
-
-
-
-
-
Critical Crime Rate
-
-
Data Sources
-
- Crime data is collected from official police reports and updated monthly. District boundaries are
- based on administrative regions.
-
-
- Help & Support
-
- For questions or support regarding this map, please contact the system administrator.
-
-
-
-
-
+
+
+ ))}
+
diff --git a/sigap-website/app/_components/map/controls/map-toggle.tsx b/sigap-website/app/_components/map/controls/map-toggle.tsx
index f9a7f8c..f1da82c 100644
--- a/sigap-website/app/_components/map/controls/map-toggle.tsx
+++ b/sigap-website/app/_components/map/controls/map-toggle.tsx
@@ -1,29 +1,39 @@
"use client"
-
-import { Button } from "@/app/_components/ui/button"
-import { Menu } from "lucide-react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { Button } from "../../ui/button"
+import { cn } from "@/app/_lib/utils"
import { Overlay } from "../overlay"
-import { ControlPosition } from "mapbox-gl"
interface SidebarToggleProps {
isOpen: boolean
onToggle: () => void
- position?: ControlPosition
+ position?: "left" | "right"
+ className?: string
}
-export default function SidebarToggle({ isOpen, onToggle, position = "left" }: SidebarToggleProps) {
- if (isOpen) return null
-
+export default function SidebarToggle({ isOpen, onToggle, position = "left", className }: SidebarToggleProps) {
return (
)
diff --git a/sigap-website/app/_components/map/controls/month-selector.tsx b/sigap-website/app/_components/map/controls/month-selector.tsx
new file mode 100644
index 0000000..cf5b125
--- /dev/null
+++ b/sigap-website/app/_components/map/controls/month-selector.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/app/_components/ui/select"
+import { useEffect, useRef, useState } from "react"
+
+// Month options
+const months = [
+ { value: "1", label: "January" },
+ { value: "2", label: "February" },
+ { value: "3", label: "March" },
+ { value: "4", label: "April" },
+ { value: "5", label: "May" },
+ { value: "6", label: "June" },
+ { value: "7", label: "July" },
+ { value: "8", label: "August" },
+ { value: "9", label: "September" },
+ { value: "10", label: "October" },
+ { value: "11", label: "November" },
+ { value: "12", label: "December" },
+]
+
+interface MonthSelectorProps {
+ selectedMonth: number | "all"
+ onMonthChange: (month: number | "all") => void
+ className?: string
+ includeAllOption?: boolean
+}
+
+export default function MonthSelector({
+ selectedMonth,
+ onMonthChange,
+ className = "w-[120px]",
+ includeAllOption = true
+}: MonthSelectorProps) {
+ const containerRef = useRef
(null)
+ const [isClient, setIsClient] = useState(false)
+
+ useEffect(() => {
+ // This will ensure that the document is only used in the client-side context
+ setIsClient(true)
+ })
+
+ const container = isClient ? document.getElementById("root") : null
+
+ return (
+
+
+
+ )
+}
+
+// Export months constant so it can be reused elsewhere
+export { months }
diff --git a/sigap-website/app/_components/map/controls/year-selector.tsx b/sigap-website/app/_components/map/controls/year-selector.tsx
index 0aa8115..dd62c74 100644
--- a/sigap-website/app/_components/map/controls/year-selector.tsx
+++ b/sigap-website/app/_components/map/controls/year-selector.tsx
@@ -1,29 +1,122 @@
"use client"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/app/_components/ui/select"
+import { createRoot } from "react-dom/client"
+import { useRef, useEffect, useState } from "react"
interface YearSelectorProps {
- years: string[]
- selectedYear: string
- onChange: (year: string) => void
+ availableYears?: (number | null)[]
+ selectedYear: number
+ onYearChange: (year: number) => void
+ isLoading?: boolean
+ className?: string
}
-export default function YearSelector({ years, selectedYear, onChange }: YearSelectorProps) {
- return (
-
- Year:
-
-
- )
+interface YearSelectorProps {
+ availableYears?: (number | null)[];
+ selectedYear: number;
+ onYearChange: (year: number) => void;
+ isLoading?: boolean;
+ className?: string;
}
+
+// React component for the year selector UI
+function YearSelectorUI({
+ availableYears = [],
+ selectedYear,
+ onYearChange,
+ isLoading = false,
+ className = "w-[120px]"
+}: YearSelectorProps) {
+ const containerRef = useRef(null);
+ const [isClient, setIsClient] = useState(false);
+
+ useEffect(() => {
+ // This will ensure that the document is only used in the client-side context
+ setIsClient(true);
+ }, []);
+
+ // Conditionally access the document only when running on the client
+ const container = isClient ? document.getElementById("root") : null;
+
+ return (
+
+ {isLoading ? (
+
+ ) : (
+
+ )}
+
- {/* Regular (non-fullscreen) controls */}
-
+ {/* Year selector component */}
+
-
+ {/* Month selector component */}
+
-
- {/* */}
- {crimesLoading ? (
+ {isCrimesLoading ? (
- ) : crimesError ? (
+ ) : isCrimesError ? (
Failed to load crime data. Please try again later.
) : (
-
+
-
{/* District Layer with crime data */}
)}
+
+ {isFullscreen && (
+ <>
+
+
+
+
+
+
+
+
+
+
+ )}
)}
diff --git a/sigap-website/app/_components/map/map.tsx b/sigap-website/app/_components/map/map.tsx
index 58c4d69..a3b3a44 100644
--- a/sigap-website/app/_components/map/map.tsx
+++ b/sigap-website/app/_components/map/map.tsx
@@ -1,28 +1,16 @@
"use client"
import type React from "react"
-
-import { useState, useCallback, useRef } from "react"
-import {
- type ViewState,
- NavigationControl,
- type MapRef,
- FullscreenControl,
- GeolocateControl,
- Map,
-} from "react-map-gl/mapbox"
+import { useState, useCallback, useRef, useEffect } from "react"
+import { type ViewState, Map, type MapRef, NavigationControl } from "react-map-gl/mapbox"
+import { FullscreenControl } from "react-map-gl/mapbox"
import { BASE_LATITUDE, BASE_LONGITUDE, BASE_ZOOM, MAPBOX_STYLES, type MapboxStyle } from "@/app/_utils/const/map"
import "mapbox-gl/dist/mapbox-gl.css"
-import MapSidebar from "./controls/map-sidebar"
-import SidebarToggle from "./controls/map-toggle"
-import TimeControls from "./controls/time-control"
-import SeverityIndicator from "./controls/severity-indicator"
-import MapFilterControl from "./controls/map-filter-control"
+import { createRoot } from "react-dom/client"
+import { YearSelectorControl } from "./controls/year-selector"
import { useFullscreen } from "@/app/_hooks/use-fullscreen"
-import MapControls from "./controls/map-control"
-import { Overlay } from "./overlay"
-import MapLegend from "./controls/map-legend"
-
+import { CustomControl } from "./controls/example"
+import { toast } from "sonner"
interface MapViewProps {
children?: React.ReactNode
@@ -34,22 +22,6 @@ interface MapViewProps {
mapboxApiAccessToken?: string
onMoveEnd?: (viewState: ViewState) => void
customControls?: React.ReactNode
- crimes?: Array<{
- id: string
- district_name: string
- district_id?: string
- number_of_crime?: number
- level?: "low" | "medium" | "high" | "critical"
- incidents: any[]
- }>
- selectedYear?: number | string
- selectedMonth?: number | string
- availableYears?: (number | null)[]
- yearsLoading?: boolean
- onYearChange?: (year: number) => void
- onMonthChange?: (month: number | "all") => void
- onApplyFilters?: () => void
- onResetFilters?: () => void
}
export default function MapView({
@@ -61,24 +33,9 @@ export default function MapView({
height = "100%",
mapboxApiAccessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN,
onMoveEnd,
- customControls,
- crimes = [],
- selectedYear,
- selectedMonth,
- availableYears = [],
- yearsLoading = false,
- onYearChange = () => { },
- onMonthChange = () => { },
- onApplyFilters = () => { },
- onResetFilters = () => { },
}: MapViewProps) {
const [mapRef, setMapRef] = useState
(null)
- const [activeControl, setActiveControl] = useState("crime-rate")
- const [activeTime, setActiveTime] = useState("today")
- const [sidebarOpen, setSidebarOpen] = useState(false)
const mapContainerRef = useRef(null)
-
- // Use the custom fullscreen hook instead of manual event listeners
const { isFullscreen } = useFullscreen(mapContainerRef)
const defaultViewState: Partial = {
@@ -90,87 +47,32 @@ export default function MapView({
...initialViewState,
}
- const handleMapLoad = useCallback((event: any) => {
- setMapRef(event.target)
- }, [])
-
const handleMoveEnd = useCallback(
(event: any) => {
if (onMoveEnd) {
onMoveEnd(event.viewState)
}
},
- [onMoveEnd],
+ [onMoveEnd]
)
- const handleControlChange = (control: string) => {
- setActiveControl(control)
- }
-
- const handleTimeChange = (time: string) => {
- setActiveTime(time)
- }
-
- const toggleSidebar = () => {
- setSidebarOpen(!sidebarOpen)
- }
-
return (
- {/* Main content with left padding when sidebar is open */}
-
-
+
)
diff --git a/sigap-website/app/_components/map/overlay.tsx b/sigap-website/app/_components/map/overlay.tsx
index 44d880d..0a3e668 100644
--- a/sigap-website/app/_components/map/overlay.tsx
+++ b/sigap-website/app/_components/map/overlay.tsx
@@ -5,32 +5,72 @@ import { createPortal } from "react-dom";
import { useControl } from "react-map-gl/mapbox";
import { v4 as uuidv4 } from 'uuid';
+// Updated props type to include addControl in children props
type OverlayProps = {
position: ControlPosition;
- children: ReactElement<{ map?: Map }>;
+ children: ReactElement<{
+ map?: Map;
+ addControl?: (control: IControl, position?: ControlPosition) => void;
+ }>;
id?: string;
+ className?: string;
+ style?: React.CSSProperties;
};
-// Definisikan custom control untuk overlay
+// Custom control for overlay
class OverlayControl implements IControl {
_map: Map | null = null;
_container: HTMLElement | null = null;
_position: ControlPosition;
_id: string;
_redraw?: () => void;
+ _className?: string;
+ _style?: React.CSSProperties;
- constructor({ position, id, redraw }: { position: ControlPosition; id: string; redraw?: () => void }) {
+ constructor({
+ position,
+ id,
+ redraw,
+ className,
+ style,
+ }: {
+ position: ControlPosition;
+ id: string;
+ redraw?: () => void;
+ className?: string;
+ style?: React.CSSProperties;
+ }) {
this._position = position;
this._id = id;
this._redraw = redraw;
+ this._className = className;
+ this._style = style;
}
onAdd(map: Map) {
this._map = map;
this._container = document.createElement('div');
- this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
+
+ // Apply base classes but keep it minimal to avoid layout conflicts
+ this._container.className = `mapboxgl-ctrl ${this._className || ''}`;
this._container.id = this._id;
+ // Important: These styles make the overlay adapt to content
+ this._container.style.pointerEvents = 'auto';
+ this._container.style.display = 'inline-block'; // Allow container to size to content
+ this._container.style.maxWidth = 'none'; // Remove any max-width constraints
+ this._container.style.width = 'auto'; // Let width be determined by content
+ this._container.style.height = 'auto'; // Let height be determined by content
+ this._container.style.overflow = 'visible'; // Allow content to overflow if needed
+
+ // Apply any custom styles passed as props
+ if (this._style) {
+ Object.entries(this._style).forEach(([key, value]) => {
+ // @ts-ignore - dynamically setting style properties
+ this._container.style[key] = value;
+ });
+ }
+
if (this._redraw) {
map.on('move', this._redraw);
this._redraw();
@@ -61,20 +101,34 @@ class OverlayControl implements IControl {
getElement() {
return this._container;
}
+
+ // Method to add other controls to the map
+ addControl(control: IControl, position?: ControlPosition) {
+ if (this._map) {
+ this._map.addControl(control, position);
+ }
+ return this;
+ }
}
-// Komponen Overlay yang telah ditingkatkan
-function _Overlay({ position, children, id = `overlay-${uuidv4()}` }: OverlayProps) {
+// Enhanced Overlay component
+function _Overlay({ position, children, id = `overlay-${uuidv4()}`, className, style }: OverlayProps) {
const [container, setContainer] = useState
(null);
- const [map, setMap] = useState