Compatibility with React-Leaflet

[cormac-doyle]

Is this compatible with react-leaflet

[hosuaby]

I never tested this plugin with React-Leaflet, but as longer as global Leaflet variable L is available, it must be fine.

[JLMadsen]

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.

[hldh214]

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'