import './Markers.css'; import React, { useMemo } from 'react'; import ms from 'milsymbol'; import { Icon, Marker as CoreMarker, LeafletEvent, LatLng } from 'leaflet'; import { Marker, Popup, MarkerProps } from 'react-leaflet'; import { omit } from 'lodash'; import { AppStateContainer } from '../../../../models/appState'; export type SidcMarkerProps = MarkerProps & { sidc: string; label?: string; }; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types export function SidcMarkerNonMemo(props: SidcMarkerProps) { const { sidc, label } = props; const symbol = new ms.Symbol(sidc, { size: 20 }); const anchor = symbol.getAnchor(); const icon = new Icon({ iconUrl: symbol.toDataURL(), iconAnchor: [anchor.x, anchor.y] }); return ( <Marker {...omit(props, 'onadd', 'icon')} icon={icon}> {label && <Popup minWidth={100}>{label}</Popup>} </Marker> ); } // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types export function SidcMarker(props: SidcMarkerProps) { const { sidc, label, position } = props; const positionLatLng = position as LatLng; const { commanderMode } = AppStateContainer.useContainer(); // prettier-ignore const memorizedItem = useMemo(() => <SidcMarkerNonMemo {...props} />, [ sidc, label, positionLatLng.lat, positionLatLng.lng, commanderMode ]); return memorizedItem; }