Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mouseover and mouseout events are switching continuously. #9337

Open
4 tasks done
pyprince opened this issue May 9, 2024 · 0 comments
Open
4 tasks done

mouseover and mouseout events are switching continuously. #9337

pyprince opened this issue May 9, 2024 · 0 comments
Labels
bug needs triage Triage pending

Comments

@pyprince
Copy link

pyprince commented May 9, 2024

Checklist

  • I've looked at the documentation to make sure the behavior isn't documented and expected.
  • I'm sure this is an issue with Leaflet, not with my app or other dependencies (Angular, Cordova, React, etc.).
  • I've searched through the current issues to make sure this hasn't been reported yet.
  • I agree to follow the Code of Conduct that this project adheres to.

Steps to reproduce

No response

Expected behavior

In my map there are sprinklers and when I hover them there supposed be a popup and circle.
Sprinklers are drawn as circle markers.

Current behavior

When I hover a sprinkler, mouseover and mouseout event are switching continuously and the popup and circle are blinking.
But when browser is focused out and I just hover on the marker it works really well.

let marker = L.circleMarker(coordinates, customMarkerStyle);
marker.addTo(map);

// Create HTML content for the popup.
const popupContent = get_popup_content(properties.SprnklrID, properties.moisture, properties.uniformity, properties.measurements, properties.throw_radius)
// Create a sprinkler popup for details.
let sprinkler_popup = L.popup()
.setLatLng(coordinates)
.setContent(popupContent);
marker.bindPopup(sprinkler_popup);

// Draw circle around the marker
let circle = undefined;
marker.on('mouseover', function (e) {
	map.getContainer().style.cursor = 'pointer';
	marker.openPopup();
	// Create a circle and specify its options (e.g., color, opacity, etc.)
	if(circle)
		circle.remove();
	circle = L.circle(coordinates, {
		color: '#fff',      // Stroke color
		fillColor: '#fff', // Fill color
		fillOpacity: 0.2,  // Fill opacity (0 to 1)
		radius: parseFloat(properties.throw_radius) * 0.3048  // Radius of the circle in meters
	}).addTo(map);
});
marker.on('mouseout', function(e) {
map.getContainer().style.cursor = 'grab';
marker.closePopup();
if(circle) circle.remove();
})

Minimal example reproducing the issue

No response

Environment

  • Leaflet version: 1.5.1
  • Browser (with version): 124.0
  • OS/Platform (with version): Windows 10
@pyprince pyprince added bug needs triage Triage pending labels May 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug needs triage Triage pending
Projects
None yet
Development

No branches or pull requests

1 participant