Closed cormac-doyle closed 2 years ago
I never tested this plugin with React-Leaflet, but as longer as global Leaflet variable L is available, it must be fine.
It is, but you need to access map from a child component in \
Such as a custom made \
// ref for controller
const mapController = useRef();
// render
<MapContainer>
{other stuff...}
<MapController ref={mapController }/>
<MapController/>
// use
mapController.current.bounceMarker(latLng)
You can access mapController with a forwardRef.
const MapController = forwardRef((props, ref) => {
const map = useMap();
const bounceMarker = (latLng) => {
map.eachLayer((layer) => {
if (layer instanceof L.Marker) {
if (layer.getLatLng() == latLng ) {
layer.bounce();
} else {
layer.stopBouncing();
}
}
});
}
useImperativeHandle(ref, () => ({
bounceMarker(latLng) {
bounceMarker(latLng);
},
}));
};
This example iterates through the map layers and just compares position, you can do it with other properties too.
It is, but you need to access map from a child component in
. Such as a custom made
// ref for controller const mapController = useRef(); // render <MapContainer> {other stuff...} <MapController ref={mapController }/> <MapController/> // use mapController.current.bounceMarker(latLng)
You can access mapController with a forwardRef.
const MapController = forwardRef((props, ref) => { const map = useMap(); const bounceMarker = (latLng) => { map.eachLayer((layer) => { if (layer instanceof L.Marker) { if (layer.getLatLng() == latLng ) { layer.bounce(); } else { layer.stopBouncing(); } } }); } useImperativeHandle(ref, () => ({ bounceMarker(latLng) { bounceMarker(latLng); }, })); };
This example iterates through the map layers and just compares position, you can do it with other properties too.
Hi Jakob,
Thank you for sharing. I read your blog on Medium regarding this topic and incorporated it into my project. It has been very helpful.
However, I encountered an issue while attempting to add a bounce effect. I received the error message layer.bounce is not a function
. I initially thought that I might be missing an import, but I am unsure of which one and where to include it. Could you please provide some guidance? Thank you.
Edit: Finally found a working solution:
// init Leaflet
import 'leaflet/dist/leaflet.css'
import 'leaflet/dist/leaflet-src.js'
import 'leaflet.smooth_marker_bouncing/dist/bundle.js'
Is this compatible with react-leaflet