fix: disable drag to pan interaction on mobiles

antoine-giret · Mar 17, 2024 · df9610f · df9610f
1 parent a63c5cd
commit df9610f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/components/map.tsx b/src/components/map.tsx
@@ -1,4 +1,4 @@
-import { Box, Text, useMediaQuery } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import { Map as MaplibreMap, NavigationControl } from 'maplibre-gl';
 import React, { useEffect, useState } from 'react';
 
@@ -8,7 +8,9 @@ const mapId = 'trips-map';
 
 export function TripsMap(): JSX.Element {
   const [initialized, setInitialized] = useState(false);
-  const [isDisplayingInBrowser] = useMediaQuery('(display-mode: browser)');
+  const isDisplayingInBrowser =
+    typeof navigator !== 'undefined' &&
+    /Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent);
 
   useEffect(() => {
     setInitialized(true);

diff --git a/src/templates/trip/map.tsx b/src/templates/trip/map.tsx
@@ -1,4 +1,4 @@
-import { Box, Text, useMediaQuery } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import { Map as MaplibreMap, NavigationControl } from 'maplibre-gl';
 import React, { useEffect, useState } from 'react';
 
@@ -8,7 +8,9 @@ const mapId = 'trip-map';
 
 function TripMap({ trip: { color, bounds, title, steps } }: { trip: Trip }): JSX.Element {
   const [initialized, setInitialized] = useState(false);
-  const [isDisplayingInBrowser] = useMediaQuery('(display-mode: browser)');
+  const isDisplayingInBrowser =
+    typeof navigator !== 'undefined' &&
+    /Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent);
 
   useEffect(() => {
     setInitialized(true);