/
VVRONGG
/
backside
Обзор
Документация
Войти
/
VVRONGG
/
backside
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
1
CI/CD
Аналитика
Безопасность
master
admin/src/components/MapPicker.tsx
50 строк
1 KB
VVrongg
feat(admin): React/Vite SPA for managing objectives and routes
22 май 2026, 21:13
22 май 2026, 21:13
dca9b47
Код
Авторство
О чём код?
import { useEffect } from 'react'; import { MapContainer, Marker, TileLayer, useMap, useMapEvents } from 'react-leaflet'; import '../leaflet-setup'; interface Props { lat: number; lon: number; onChange: (lat: number, lon: number) => void; } const hasPos = (lat: number, lon: number) => lat !== 0 || lon !== 0; /** Drop/move the marker wherever the admin clicks. */ function ClickHandler({ onChange }: { onChange: Props['onChange'] }) { useMapEvents({ click(e) { onChange(Number(e.latlng.lat.toFixed(6)), Number(e.latlng.lng.toFixed(6))); }, }); return null; } /** Keep the view centred on the current coordinates as they change. */ function Recenter({ lat, lon }: { lat: number; lon: number }) { const map = useMap(); useEffect(() => { if (hasPos(lat, lon)) map.setView([lat, lon], map.getZoom()); }, [lat, lon, map]); return null; } export default function MapPicker({ lat, lon, onChange }: Props) { const positioned = hasPos(lat, lon); return ( <MapContainer className="map" center={positioned ? [lat, lon] : [20, 0]} zoom={positioned ? 13 : 2} scrollWheelZoom > <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <ClickHandler onChange={onChange} /> <Recenter lat={lat} lon={lon} /> {positioned && <Marker position={[lat, lon]} />} </MapContainer> ); }