mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 21:46:49 +00:00
Maurice
16 lines
855 B
TypeScript
16 lines
855 B
TypeScript
import { GeoJSON } from 'react-leaflet'
|
|
import type { RoadtripHazard } from '@trek/shared'
|
|
import L from 'leaflet'
|
|
import { useTranslation } from '../../i18n/TranslationContext'
|
|
|
|
import { hazardPopup, hazardFeature } from './hazardPopup'
|
|
|
|
export default function HazardLayers({ hazards }: { hazards: RoadtripHazard[] }) {
|
|
const { t } = useTranslation()
|
|
return <>{hazards.map(hazard => <GeoJSON key={`${hazard.id}-${hazard.updatedAt}`} data={hazardFeature(hazard)}
|
|
style={{ color: 'var(--warning)', weight: 2, fillOpacity: 0.16 }}
|
|
pointToLayer={(_, point) => L.circleMarker(point, { radius: 7, color: 'var(--warning)', fillOpacity: 0.65 })}
|
|
onEachFeature={(_, layer) => layer.bindPopup(hazardPopup(hazard, t('roadtrip.hazards.note'), t('roadtrip.hazards.point')), { className: 'map-tooltip trek-hazard-popup', maxWidth: 320 })}
|
|
/>)}</>
|
|
}
|