react leaflet mouseover / hover popup

Question

Hej!

I want my popup to open via a hover/mouseover.

I tried the recommended but it still only opens on click. Does anyone have an idea what is missing?

Any help is appreciated!

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import L from 'leaflet';

const Map = () => {
    const renderIcons = () => {
    return(
        <Marker
         position = {[latitude, longitude]}
         icon     = {getIcon(markerType)}
         onMouseOver = {event => event.target.openPopup()}
        >
            <Popup>
             Hello 
            </Popup>
        </Marker>
     );
});
return(
    <MapContainer ...>
       <TileLayer .../>
       {renderIcons()}
    </MapContainer>
 );
}

Viewfinder

Answer 1

It can be done without useMemo and useRef however still using eventHandlers:

<Marker
  position={[latitude, longitude]}
  icon={getIcon(markerType)}
  eventHandlers={{
    mouseover: (event) => event.target.openPopup(),
  }}
>
  <Popup>Hello</Popup>
</Marker>;

Scowl

Answer 2

You need to create a custom component and then one way would be to use eventHandlers to handle mouseover and mouseout events in combination with the marker ref to call leaflet's native openPopup and closePopup methods respectively.

const RenderIcons = () => {
  const markerRef = useRef();

  const eventHandlers = useMemo(
    () => ({
      mouseover() {
        if (markerRef) markerRef.current.openPopup();
      },
      mouseout() {
        if (markerRef) markerRef.current.closePopup();
      }
    }),
    []
  );

  return (
    <Marker
      ref={markerRef}
      position={position}
      icon={icon}
      eventHandlers={eventHandlers}
    >
      <Popup>Hello</Popup>
    </Marker>
  );
}; 

Demo

Isosteric

unfortunately this is not working. I get the error 'useMemo' and 'useRef' cannot be called inside callback. – Viewfinder

Did you check the demo? It has no errors and works as expected. If you get an error then you should modify your code accordingly to check what the issue is. <RenderIcons /> component should be outside the Map component and should not be a callback function like you have it right now. – Isosteric

Answer 3

In most cases, you can use tooltip instead of popup to get the same result with fewer issues.

For instance, this can help you avoid issues with jitter.

See the answer of Fully Stuck Developer under https://gis.stackexchange.com/questions/31951/showing-popup-on-mouse-over-not-on-click-using-leaflet

You can also read documentations/example at:

1. Pure leaflet: http://leafletjs.com/reference-1.3.0.html#tooltip
2. React leaflet: https://react-leaflet.js.org/docs/example-tooltips/

---

In your case, just replace Popup with Tooltip and remove the handlers:

import React from "react";
import { MapContainer, TileLayer, Marker, Tooltip } from "react-leaflet";
import L from 'leaflet';

const Map = () => {
    const renderIcons = () => {
        return (
            <Marker
                position={[latitude, longitude]}
                icon={getIcon(markerType)}
            >
                <Tooltip>
                    Hello
                </Tooltip>
            </Marker>
        );
    });
    return (
        <MapContainer ...>
            <TileLayer .../>
            {renderIcons()}
        </MapContainer>
    );
}

Modica