fix: disable map hover popups on mobile devices and when globally disabled
This commit is contained in:
@@ -42,7 +42,11 @@ export function useMapHoverPopup({
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const map = mapRef.current;
|
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({
|
const popup = new maplibregl.Popup({
|
||||||
closeButton: false,
|
closeButton: false,
|
||||||
@@ -312,7 +316,7 @@ export function useMapHoverPopup({
|
|||||||
window.removeEventListener("keyup", onKeyUp, { capture: true });
|
window.removeEventListener("keyup", onKeyUp, { capture: true });
|
||||||
popup.remove();
|
popup.remove();
|
||||||
};
|
};
|
||||||
}, [getContentRef, mapRef, onHoverFeatureChangeRef, renderDraftRef]);
|
}, [enabled, getContentRef, mapRef, onHoverFeatureChangeRef, renderDraftRef]);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getHoverLayerIds(map: maplibregl.Map): string[] {
|
function getHoverLayerIds(map: maplibregl.Map): string[] {
|
||||||
|
|||||||
@@ -173,7 +173,7 @@ export default function PreviewMapShell({
|
|||||||
applyGeometryBindingFilter
|
applyGeometryBindingFilter
|
||||||
isPreviewMode
|
isPreviewMode
|
||||||
onFeatureClick={onFeatureClick}
|
onFeatureClick={onFeatureClick}
|
||||||
hoverPopupEnabled={hoverPopupEnabled}
|
hoverPopupEnabled={hoverPopupEnabled && !isMobileOrTablet}
|
||||||
getHoverPopupContent={getHoverPopupContent}
|
getHoverPopupContent={getHoverPopupContent}
|
||||||
onHoverFeatureChange={onHoverFeatureChange}
|
onHoverFeatureChange={onHoverFeatureChange}
|
||||||
onPlayPreviewReplay={onPlayPreviewReplay}
|
onPlayPreviewReplay={onPlayPreviewReplay}
|
||||||
|
|||||||
Reference in New Issue
Block a user