Leaflet.PolylineMeasure icon indicating copy to clipboard operation
Leaflet.PolylineMeasure copied to clipboard

Cannot set properties of null (setting '_source')

Open VardgesHA777 opened this issue 1 year ago • 2 comments

I installed it in my react-leaflet version 4.2.0. I put starting and ending points. When I click one of dots on the map and removing finger from mouse and then click my desired place to be thestart/end poin, my application crashes.

Cannot set properties of null (setting '_source') TypeError: Cannot set properties of null (setting '_source')

import { useEffect } from 'react'; import { useMap } from 'react-leaflet'; import L from 'leaflet';

export default function LeafletRuler() { const map = useMap();

useEffect(() => { if (!map) return; const options = { position: 'topright', // Position to show the control. Values: 'topright', 'topleft', 'bottomright', 'bottomleft' };

setTimeout(() => {
  L.control.polylineMeasure(options).addTo(map);
}, 1000);

}, [map]);

return null; }

const Map = () => { useEffect(() => { const script = document.createElement('script'); script.src = 'https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js'; document.body.appendChild(script); }, []);

return ( <Box className='map-container'> <MapContainer style={{ height: '100%', width: '100%', zIndex: 1 }} zoom={10} maxZoom={22} center={[40.2, 45.7]} attributionControl={false} zoomAnimation={true} // @ts-ignore fullscreenControl={true} crs={CRS.EPSG4326} > <LeafletRuler /> </MapContainer> {/* <TimeSlider searchParams={searchParams} /> */} </Box> ); };

export default Map;

VardgesHA777 avatar Aug 08 '23 16:08 VardgesHA777