Leaflet.PolylineMeasure
Leaflet.PolylineMeasure copied to clipboard
Cannot set properties of null (setting '_source')
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;