"use client"
import { useEffect, useRef } from "react"
import { useRouter } from "next/navigation"
import "leaflet/dist/leaflet.css"
import "leaflet.markercluster/dist/MarkerCluster.css"
import "leaflet.markercluster/dist/MarkerCluster.Default.css"
import { communityToSlug, stateToSlug, type WaltonwoodCity, type WaltonwoodStateLocation } from "@/lib/waltonwood-locations"
type Props = {
locations: WaltonwoodStateLocation[]
activeState: string
activeCommunity: string | null
onSelectPin: (state: string, community: string) => void
}
const RED_PIN_ICON_HTML = `
`
export default function WaltonwoodLeafletMap({ locations, activeState, activeCommunity, onSelectPin }: Props) {
const router = useRouter()
const containerRef = useRef(null)
const mapRef = useRef(null)
const markersRef = useRef>({})
const onSelectPinRef = useRef(onSelectPin)
onSelectPinRef.current = onSelectPin
const wheelCleanupRef = useRef<(() => void) | null>(null)
useEffect(() => {
let cancelled = false
async function init() {
const L = (await import("leaflet")).default
await import("leaflet.markercluster")
if (cancelled || !containerRef.current || mapRef.current) return
const redIcon = L.divIcon({
html: RED_PIN_ICON_HTML,
className: "waltonwood-red-pin",
iconSize: [34, 46],
iconAnchor: [17, 44],
popupAnchor: [0, -40],
})
const map = L.map(containerRef.current, {
scrollWheelZoom: true,
}).setView([38.5, -87], 5)
mapRef.current = map
const hintEl = document.createElement("div")
hintEl.className = "waltonwood-scroll-hint"
hintEl.textContent = "Use Ctrl + scroll to zoom the map"
containerRef.current.appendChild(hintEl)
let hintTimeout: ReturnType | undefined
const wheelHandler = (e: WheelEvent) => {
if (e.ctrlKey || e.metaKey) {
e.preventDefault()
hintEl.classList.remove("is-visible")
return
}
e.stopPropagation()
hintEl.classList.add("is-visible")
if (hintTimeout) clearTimeout(hintTimeout)
hintTimeout = setTimeout(() => hintEl.classList.remove("is-visible"), 1200)
}
containerRef.current.addEventListener("wheel", wheelHandler, {
passive: false,
capture: true,
})
wheelCleanupRef.current = () => {
containerRef.current?.removeEventListener("wheel", wheelHandler, { capture: true } as any)
hintEl.remove()
if (hintTimeout) clearTimeout(hintTimeout)
}
const maptilerKey = process.env.NEXT_PUBLIC_MAPTILER_KEY
L.tileLayer(
`https://api.maptiler.com/maps/streets-v2/{z}/{x}/{y}.png?key=${maptilerKey}`,
{
attribution:
'© MapTiler © OpenStreetMap contributors',
maxZoom: 19,
tileSize: 512,
zoomOffset: -1,
}
).addTo(map)
const clusterGroup = (L as any).markerClusterGroup({
spiderfyOnMaxZoom: true,
showCoverageOnHover: false,
maxClusterRadius: 2,
disableClusteringAtZoom: 9,
iconCreateFunction: (cluster: any) => {
const count = cluster.getChildCount()
return L.divIcon({
html: `${count}
`,
className: "waltonwood-cluster-icon",
iconSize: [40, 40],
})
},
})
const allLatLngs: [number, number][] = []
let activePopupMarker: any = null
let closeTimeout: ReturnType | undefined
const closeActivePopup = () => {
if (activePopupMarker) {
activePopupMarker.closePopup()
activePopupMarker = null
}
}
locations.forEach((loc) => {
loc.cities.forEach((city: WaltonwoodCity) => {
const marker = L.marker([city.lat, city.lng], { icon: redIcon })
marker.bindPopup(
``,
{ closeButton: false, offset: [0, -6], autoPan: true, autoPanPadding: [20, 20] }
)
marker.on("mouseover", () => {
if (closeTimeout) clearTimeout(closeTimeout)
if (activePopupMarker && activePopupMarker !== marker) {
activePopupMarker.closePopup()
}
activePopupMarker = marker
marker.openPopup()
})
marker.on("mouseout", () => {
closeTimeout = setTimeout(() => {
closeActivePopup()
}, 200)
})
marker.getPopup()?.on("add", () => {
const popupEl = marker.getPopup()?.getElement()
popupEl?.addEventListener("mouseenter", () => {
if (closeTimeout) clearTimeout(closeTimeout)
})
popupEl?.addEventListener("mouseleave", () => {
closeTimeout = setTimeout(() => {
closeActivePopup()
}, 200)
})
})
marker.on("click", () => {
onSelectPinRef.current(loc.state, city.community)
})
markersRef.current[city.community] = marker
clusterGroup.addLayer(marker)
allLatLngs.push([city.lat, city.lng])
})
})
map.addLayer(clusterGroup)
const initialStateLoc = locations.find((loc) => loc.state === activeState)
const initialBounds =
initialStateLoc && initialStateLoc.cities.length > 0
? initialStateLoc.cities.map((city) => [city.lat, city.lng] as [number, number])
: allLatLngs
if (initialBounds.length > 0) {
map.fitBounds(initialBounds as any, { padding: [50, 50], maxZoom: 12 })
}
}
init()
return () => {
cancelled = true
if (wheelCleanupRef.current) {
wheelCleanupRef.current()
wheelCleanupRef.current = null
}
if (mapRef.current) {
mapRef.current.remove()
mapRef.current = null
markersRef.current = {}
}
}
}, [locations])
useEffect(() => {
if (activeCommunity) return
const map = mapRef.current
if (!map) return
const stateLoc = locations.find((loc) => loc.state === activeState)
if (!stateLoc || stateLoc.cities.length === 0) return
const bounds = stateLoc.cities.map((city) => [city.lat, city.lng]) as [number, number][]
map.flyToBounds(bounds, { padding: [50, 50], maxZoom: 12 })
}, [activeState, locations, activeCommunity])
useEffect(() => {
if (!activeCommunity) return
const marker = markersRef.current[activeCommunity]
const map = mapRef.current
if (!marker || !map) return
map.setView(marker.getLatLng(), Math.max(map.getZoom(), 12), { animate: true })
marker.openPopup()
}, [activeCommunity])
return (
<>
)
}