fix: disable map hover popups on mobile devices and when globally disabled

This commit is contained in:
taDuc
2026-06-10 13:00:01 +07:00
parent 7a335f9415
commit 82eca6ee1a
2 changed files with 7 additions and 3 deletions
+6 -2
View File
@@ -42,7 +42,11 @@ export function useMapHoverPopup({
useEffect(() => {
const map = mapRef.current;
if (!map) return;
if (!map || !enabled) return;
// Disable hover popup if the device has no hover capability (mobile/tablet)
const hasHoverSupport = window.matchMedia("(hover: hover)").matches;
if (!hasHoverSupport) return;
const popup = new maplibregl.Popup({
closeButton: false,
@@ -312,7 +316,7 @@ export function useMapHoverPopup({
window.removeEventListener("keyup", onKeyUp, { capture: true });
popup.remove();
};
}, [getContentRef, mapRef, onHoverFeatureChangeRef, renderDraftRef]);
}, [enabled, getContentRef, mapRef, onHoverFeatureChangeRef, renderDraftRef]);
}
function getHoverLayerIds(map: maplibregl.Map): string[] {
@@ -173,7 +173,7 @@ export default function PreviewMapShell({
applyGeometryBindingFilter
isPreviewMode
onFeatureClick={onFeatureClick}
hoverPopupEnabled={hoverPopupEnabled}
hoverPopupEnabled={hoverPopupEnabled && !isMobileOrTablet}
getHoverPopupContent={getHoverPopupContent}
onHoverFeatureChange={onHoverFeatureChange}
onPlayPreviewReplay={onPlayPreviewReplay}