map zoom fix

src/constants/constants.ts

@@ -3,3 +3,5 @@ import { Platform, StatusBar } from 'react-native';
 const NOTCH_HEIGHT = 44;
 export const statusBarHeight =
   Platform.OS === 'ios' ? StatusBar.currentHeight || NOTCH_HEIGHT : StatusBar.currentHeight || 0;
+
+export const openstreetmapUrl = 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png';

src/screens/InAppScreens/MapScreen/index.tsx

@@ -25,7 +25,7 @@ import regions from '../../../../assets/geojson/nm2022.json';
 import jsonData, { fetchJsonData } from '../../../database/geojsonService';
 
 import { getFirstDatabase, getSecondDatabase, refreshDatabases } from '../../../db';
-import { LocationPopup, WarningModal, EditNmModal, Button } from '../../../components';
+import { LocationPopup, WarningModal, EditNmModal } from '../../../components';
 
 import { styles } from './style';
 import {
@@ -45,8 +45,6 @@ import { useConnection } from 'src/contexts/ConnectionContext';
 import ClusteredMapView from 'react-native-map-clustering';
 import { fetchUserData, fetchUserDataDare } from '@api/regions';
 import RegionPopup from 'src/components/RegionPopup';
-import { usePostSetNmRegionMutation } from '@api/myRegions';
-import { usePostSetDareRegionMutation } from '@api/myDARE';
 import moment from 'moment';
 import { qualityOptions } from '../TravelsScreen/utils/constants';
 import Animated, { Easing } from 'react-native-reanimated';
@@ -59,6 +57,7 @@ import InfoIcon from 'assets/icons/info-solid.svg';
 import { NAVIGATION_PAGES } from 'src/types';
 import { useRegion } from 'src/contexts/RegionContext';
 import { useFocusEffect } from '@react-navigation/native';
+import { openstreetmapUrl } from 'src/constants/constants';
 
 const localTileDir = `${FileSystem.cacheDirectory}tiles/background`;
 const localGridDir = `${FileSystem.cacheDirectory}tiles/grid`;
@@ -535,10 +534,10 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
   const renderMapTiles = (url: string, cacheDir: string, zIndex: number, opacity = 1) => (
     <UrlTile
       key={`${url}-${cacheDir}`}
-      urlTemplate={`${url}/{z}/{x}/{y}`}
-      maximumZ={15}
-      maximumNativeZ={13}
-      tileCachePath={cacheDir !== localVisitedDir ? `${cacheDir}` : undefined}
+      urlTemplate={url === tilesBaseURL && zoomLevel > 13 ? openstreetmapUrl : `${url}/{z}/{x}/{y}`}
+      maximumZ={18}
+      maximumNativeZ={url === tilesBaseURL ? 18 : 13}
+      tileCachePath={cacheDir !== localVisitedDir && zoomLevel < 8 ? `${cacheDir}` : undefined}
       shouldReplaceMapContent
       minimumZ={0}
       offlineMode={!isConnected}
@@ -682,7 +681,7 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
         onPress={handleMapPress}
         style={styles.map}
         mapType={Platform.OS == 'android' ? 'none' : 'standard'}
-        maxZoomLevel={15}
+        maxZoomLevel={17}
         minZoomLevel={0}
         onRegionChangeComplete={findFeaturesInVisibleMapArea}
         minPoints={zoomLevel < 7 ? 0 : 12}