diyoanggara
/
MIF_E31221222
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor map layer animations to use BASE_DURATION and introduce new constants for 3D view settings 

- Updated DistrictFillLineLayer to use BASE_DURATION for animation duration instead of a hardcoded value.
- Commented out the flyTo animation in DistrictFillLineLayer for potential future use.
- Modified Layers component to utilize ZOOM_3D and PITCH_3D constants for flyTo animations, enhancing readability and maintainability.
This commit is contained in:
vergiLgood1 2025-05-14 12:11:34 +07:00
parent 8a1582c994
commit 5808758855
4 changed files with 1201 additions and 1200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
sigap-website/app/_components/map/crime-map.tsx
View File

@ -22,12 +22,13 @@ import { ITooltipsControl } from "./controls/top/tooltips"
import CrimeSidebar from "./controls/left/sidebar/map-sidebar"
import Tooltips from "./controls/top/tooltips"
import Layers from "./layers/layers"
import DistrictLayer, { DistrictFeature } from "./layers/district-layer-old"
import { useGetUnitsQuery } from "@/app/(pages)/(admin)/dashboard/crime-management/units/_queries/queries"
import { IDistrictFeature } from "@/app/_utils/types/map"
export default function CrimeMap() {
const [sidebarCollapsed, setSidebarCollapsed] = useState(true)
const [selectedDistrict, setSelectedDistrict] = useState<DistrictFeature | null>(null)
const [selectedDistrict, setSelectedDistrict] = useState<IDistrictFeature | null>(null)
const [showLegend, setShowLegend] = useState<boolean>(true)
const [activeControl, setActiveControl] = useState<ITooltipsControl>("clusters")
const [selectedSourceType, setSelectedSourceType] = useState<string>("cbu")

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

File diff suppressed because it is too large Load Diff

20
sigap-website/app/_components/map/layers/district-layer.tsx
View File

@ -1,6 +1,6 @@
"use client"
import { BASE_BEARING, BASE_PITCH, BASE_ZOOM } from "@/app/_utils/const/map"
import { BASE_BEARING, BASE_DURATION, BASE_PITCH, BASE_ZOOM } from "@/app/_utils/const/map"
import { createFillColorExpression, getFillOpacity, processDistrictFeature } from "@/app/_utils/map"
import type { IDistrictLayerProps } from "@/app/_utils/types/map"
import { useEffect } from "react"
@ -63,7 +63,7 @@ export default function DistrictFillLineLayer({
zoom: BASE_ZOOM,
pitch: BASE_PITCH,
bearing: BASE_BEARING,
duration: 1500,
duration: BASE_DURATION,
easing: (t) => t * (2 - t), // easeOutQuad
})
@ -137,14 +137,14 @@ export default function DistrictFillLineLayer({
}
// Animate to a pitched view focused on the district
map.flyTo({
center: [district.longitude, district.latitude],
zoom: 12.5,
pitch: 75,
bearing: 0,
duration: 1500,
easing: (t) => t * (2 - t), // easeOutQuad
})
// map.flyTo({
// center: [district.longitude, district.latitude],
// zoom: 12.5,
// pitch: 75,
// bearing: 0,
// duration: 1500,
// easing: (t) => t * (2 - t), // easeOutQuad
// })
// Use onDistrictClick if available, otherwise fall back to onClick
if (onDistrictClick) {

8
sigap-website/app/_components/map/layers/layers.tsx
View File

@ -2,7 +2,7 @@
import { useState, useRef, useEffect, useCallback } from "react"
import { useMap } from "react-map-gl/mapbox"
import { BASE_BEARING, BASE_DURATION, BASE_PITCH, BASE_ZOOM, MAPBOX_TILESET_ID } from "@/app/_utils/const/map"
import { BASE_BEARING, BASE_DURATION, BASE_PITCH, BASE_ZOOM, MAPBOX_TILESET_ID, PITCH_3D, ZOOM_3D } from "@/app/_utils/const/map"
import DistrictPopup from "../pop-up/district-popup"
import DistrictExtrusionLayer from "./district-extrusion-layer"
import ClusterLayer from "./cluster-layer"
@ -263,9 +263,9 @@ export default function Layers({
if (map && feature.longitude && feature.latitude) {
map.flyTo({
center: [feature.longitude, feature.latitude],
zoom: 12.5,
pitch: 60,
bearing: 0,
zoom: ZOOM_3D,
pitch: PITCH_3D,
bearing: BASE_BEARING,
duration: BASE_DURATION,
easing: (t) => t * (2 - t),
})