I'm trying to show popup on hover a layer in react leaflet. I use GeoJson to render all layer on map, and use onEachFeature() to show popup on hover a layer. However, when I move my mouse into a layer, popup didn't show. It only showed on click. This is my code and my map ( layers are colored in blue).

import { MapContainer, TileLayer, Marker, Popup, GeoJSON } from 'react-leaflet';
import './index.css'
import React, { useEffect, useState } from 'react';
import "leaflet/dist/leaflet.css";
import Header from '../mon/header'
import { PixiOverlay } from 'react-leaflet-pixi-overlay';
import * as polygonData from '../../data/tinh.json';
import axios from 'axios'
import * as Request from '../../services';

export default function Home() {
  // const [display, setDisplay]=useState(false);
  // const [options, setOptions]=useState([]);
  // const [search, setSearch]= useState("");

  //function to show popup when hover
  const onEachContry = (feature, layer) =>{
    const contryName = feature.properties.NAME_1;   
    layer.on('mouseover', function (e) {
      layer.bindPopup(contryName)
    });
  }

  return (
    <>
      <Header />
      <MapContainer center={[10.7743, 106.6669]} zoom={5}>
        <TileLayer
          attribution='&copy; <a href=";>OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap/{z}/{x}/{y}.png"
        />
        <GeoJSON
          data={polygonData.features}
          onEachFeature={onEachContry}
       />
      </MapContainer>
</>

I'm trying to show popup on hover a layer in react leaflet. I use GeoJson to render all layer on map, and use onEachFeature() to show popup on hover a layer. However, when I move my mouse into a layer, popup didn't show. It only showed on click. This is my code and my map ( layers are colored in blue).

import { MapContainer, TileLayer, Marker, Popup, GeoJSON } from 'react-leaflet';
import './index.css'
import React, { useEffect, useState } from 'react';
import "leaflet/dist/leaflet.css";
import Header from '../mon/header'
import { PixiOverlay } from 'react-leaflet-pixi-overlay';
import * as polygonData from '../../data/tinh.json';
import axios from 'axios'
import * as Request from '../../services';

export default function Home() {
  // const [display, setDisplay]=useState(false);
  // const [options, setOptions]=useState([]);
  // const [search, setSearch]= useState("");

  //function to show popup when hover
  const onEachContry = (feature, layer) =>{
    const contryName = feature.properties.NAME_1;   
    layer.on('mouseover', function (e) {
      layer.bindPopup(contryName)
    });
  }

  return (
    <>
      <Header />
      <MapContainer center={[10.7743, 106.6669]} zoom={5}>
        <TileLayer
          attribution='&copy; <a href="http://osm/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap/{z}/{x}/{y}.png"
        />
        <GeoJSON
          data={polygonData.features}
          onEachFeature={onEachContry}
       />
      </MapContainer>
</>

• javascript
• css
• reactjs
• leaflet
• react-leaflet

1 Answer 1

You simply need to call openPopup() method so the popup opens when you hover.

//function to show popup when hover
const onEachContry = (feature, layer) =>{
  const contryName = feature.properties.NAME_1;   
  layer.on('mouseover', function (e) {
    layer.bindPopup(contryName).openPopup(); // here add openPopup()
  });
}