react-leaflet의 마커 회전

react-leaflet의 Marker를 회전시키는 방법을 조사해, 조금 무리한 느낌이 되고 있습니다만 일단 할 수 있던 정리입니다.

RotableMarker.tsx

import { useEffect, useRef } from "react"; import L from "leaflet"; import { Marker, MarkerProps } from "react-leaflet"; type RotableMarkerProps = MarkerProps & { rotationAngle: number; rotationOrigin: string; }; export const RotableMarker: React.FC<RotableMarkerProps> = (props) => { const markerRef = useRef<any>(); useEffect(() => { const marker = markerRef.current; if (marker) { const proto_setPos = marker._setPos; marker._setPos = (pos: any) => { proto_setPos.call(marker, pos); if (props.rotationAngle) { marker._icon.style[L.DomUtil.TRANSFORM + "Origin"] = props.rotationOrigin; marker._icon.style[L.DomUtil.TRANSFORM] += " rotateZ(" + props.rotationAngle + "deg)"; } }; marker.update(); } }, [props.rotationAngle, props.rotationOrigin]); return ( <Marker ref={markerRef} {...props}> {props.children} </Marker>  ); }; 

사용법으로는 다음이 예입니다.
rotationAngle에서 회전 각도를 45도, rotationOrigin에서 CSS의 transform-origin을 지정합니다.

App.tsx

import L, { LatLngExpression } from "leaflet"; import "leaflet/dist/leaflet.css"; import { MapContainer, TileLayer } from "react-leaflet"; import { RotableMarker } from "./RotableMarker"; L.Icon.Default.imagePath = "//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/images/"; const App = () => { const position: LatLngExpression = [51.505, -0.09]; return ( <MapContainer center={position} zoom={13} scrollWheelZoom={false}> <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <RotableMarker position={position} rotationAngle={45} rotationOrigin="center" /> </MapContainer>  ); }; export default App; 

결과는 다음과 같이 회전합니다.

참고

How to dynamically move and rotate marker in react-leaflet?

Leaflet Rotated Marker