I am attempting to display a popup when hovering over a layer in react leaflet. Utilizing GeoJson to render all layers on the map and onEachFeature() to trigger the popup on hover, I encountered an issue where the popup only appeared upon click, not hover. Below is the code snippet along with my map showing layers 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 '../common/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='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<GeoJSON
data={polygonData.features}
onEachFeature={onEachContry}
/>
</MapContainer>
</>