import './Markers.css'; import React, { useMemo } from 'react'; import { Icon, LatLng } from 'leaflet'; import { Marker, MarkerProps } from 'react-leaflet'; import { omit } from 'lodash'; export function BullseyeMarkerNonMemo(props: MarkerProps) { const icon = new Icon({ iconUrl: 'bullseye.png', iconSize: [40, 40], iconAnchor: [20, 20] }); return <Marker {...omit(props, 'onadd', 'icon')} icon={icon} />; } export function BullseyeMarker(props: MarkerProps) { const { draggable } = props; const position = props.position as LatLng; const memorizedItem = useMemo(() => <BullseyeMarkerNonMemo {...props} />, [position.lat, position.lng, draggable]); return memorizedItem; }