offline mode

%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver

@@ -1 +0,0 @@
-1023.910.1172.0

App.js

@@ -1,16 +1,16 @@
-import { StyleSheet, View, Platform } from 'react-native';
+import { StyleSheet, View, Platform, Button } from 'react-native';
 import * as FileSystem from 'expo-file-system';
 import { useEffect, useState } from 'react';
 import MapView, { UrlTile, Geojson, Marker } from 'react-native-maps';
 
 import initDB from './app/database/db';
 import {fetchRegion, getForRegion} from './app/api/api';
-import {loadGeoJSONData, loadMarkersData} from './app/functions';
+import {loadGeoJSONData, loadMarkersData, downloadTile} from './app/functions';
 
 import NetInfo from "@react-native-community/netinfo";
 
 const tilesBaseURL = 'https://maps.nomadmania.com/tiles_osm';
-const localTileDir = `${FileSystem.documentDirectory}tiles`;
+const localTileDir = `${FileSystem.cacheDirectory}tiles`;
 
 export default function App() {
   const [isConnected, setIsConnected] = useState(null);
@@ -26,6 +26,17 @@ export default function App() {
     return () => unsubscribe();
   }, []);
 
+  const downloadTiles = async () => {
+    for (let z = 0; z <= 6; z++) {
+      const numTiles = Math.pow(2, z);
+      for (let x = 0; x < numTiles; x++) {
+        for (let y = 0; y < numTiles; y++) {
+          await downloadTile(`${tilesBaseURL}/${z}/${x}/${y}`, z, x, y);
+        }
+      }
+    }
+  };
+
   useEffect(() => {
     async function prepare() {
       if (isConnected !== null) {
@@ -70,9 +81,10 @@ export default function App() {
     return (
       <UrlTile
         urlTemplate={`${tilesBaseURL}/{z}/{x}/{y}`}
-        maximumZ={8}
-        tileCachePath={`${localTileDir}/{z}/{x}/{y}`}
-        shouldReplaceMapContent={true}
+        maximumZ={15}
+        maximumNativeZ={13}
+        tileCachePath={`${localTileDir}`}
+        shouldReplaceMapContent
         minimumZ={0}
         offlineMode={!isConnected}
         opacity={1}
@@ -115,15 +127,23 @@ export default function App() {
       <MapView
         style={styles.map}
         mapType={Platform.OS == 'android' ? 'none' : 'standard'}
-        zoomControlEnabled={true}
+        zoomControlEnabled
         offlineMode={!isConnected}
-        maxZoomLevel={8}
+        maxZoomLevel={15}
         minZoomLevel={0}
       >
         {renderLocalTiles()}
         {renderGeoJSON()}
         {renderMarkers()}
       </MapView>
+      {isConnected && (
+        <View style={styles.btn}>
+          <Button title={`Cache all tiles for zoom levels 0 - 6`} onPress={downloadTiles}></Button>
+        </View>
+      )}
+      <View>
+        <Button title={isConnected ? "Enable offline mode" : "Disable offline mode"} onPress={() => setIsConnected(!isConnected)} />
+      </View>
     </View>
   );
 }
@@ -135,4 +155,7 @@ const styles = StyleSheet.create({
   map: {
     flex: 1,
   },
+  btn: {
+    marginBottom: 5,
+  }
 });

app.json

@@ -21,10 +21,26 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
+      },
+      "package": "com.victory123.mapsofflinetest",
+      "config": {
+        "googleMaps": {
+          "apiKey": "AIzaSyDgHZ50wb4u3cN-4OZPopvb82Xrfln-TYU"
+        }
       }
     },
     "web": {
       "favicon": "./assets/favicon.png"
+    },
+    "extra": {
+      "eas": {
+        "projectId": "3c26a938-76a1-4f84-98b5-6d95b24e8697"
+      },
+      "config": {
+        "googleMaps": {
+          "apiKey": "AIzaSyDgHZ50wb4u3cN-4OZPopvb82Xrfln-TYU"
+        }
+      }
     }
   }
 }

app/database/db.js

@@ -35,5 +35,3 @@ export default function initDB() {
     });
   });
 }
-
-initDB();

app/functions.js

@@ -1,4 +1,25 @@
 import { db } from "./database/db";
+import * as FileSystem from 'expo-file-system';
+
+export async function downloadTile(url, z, x, y) {
+  try {
+    const fileUri = FileSystem.cacheDirectory + `tiles/${z}/${x}/${y}.png`;
+    if (!FileSystem.getInfoAsync(FileSystem.cacheDirectory + `tiles/${z}/${x}`).exists) {
+      await FileSystem.makeDirectoryAsync(FileSystem.cacheDirectory + `tiles/${z}/${x}`, { intermediates: true });
+    }
+    if (FileSystem.getInfoAsync(FileSystem.cacheDirectory + `tiles/${z}/${x}/${y}.png`).exists) {
+      console.log('File already exists');
+    } else {
+      const downloadResult = await FileSystem.downloadAsync(url, fileUri);
+
+      if (downloadResult.status !== 200) {
+        throw new Error('Failed to download the tile');
+      }
+    }
+  } catch (error) {
+    console.error("Error downloading tile:", error);
+  }
+}
 
 export async function loadGeoJSONData(region) {
   const selectQuery = `SELECT data FROM regions WHERE region_id = ${region};`;
@@ -44,4 +65,4 @@ export async function loadMarkersData() {
       );
     });
   });
-}
+}

eas.json

@@ -0,0 +1,18 @@
+{
+  "cli": {
+    "version": ">= 5.7.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}

metro.config.js

@@ -2,6 +2,6 @@ const { getDefaultConfig } = require('expo/metro-config');
 
 const defaultConfig = getDefaultConfig(__dirname);
 
-defaultConfig.resolver.assetExts.push('db');
+defaultConfig.resolver.assetExts.push('db', 'sq3');
 
 module.exports = defaultConfig;

package-lock.json

@@ -10,8 +10,10 @@
       "dependencies": {
         "@react-native-community/netinfo": "^11.1.0",
         "axios": "^1.6.1",
+        "buffer": "^6.0.3",
         "expo": "~49.0.15",
         "expo-asset": "^8.10.1",
+        "expo-dev-client": "~2.4.12",
         "expo-file-system": "^15.6.0",
         "expo-sqlite": "^11.6.0",
         "expo-status-bar": "~1.6.0",
@@ -2123,6 +2125,19 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/@expo/cli/node_modules/form-data": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/@expo/cli/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -6181,19 +6196,6 @@
         "proxy-from-env": "^1.1.0"
       }
     },
-    "node_modules/axios/node_modules/form-data": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/babel-core": {
       "version": "7.0.0-bridge.0",
       "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
@@ -6413,6 +6415,29 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "node_modules/bl/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/bl/node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -6546,9 +6571,9 @@
       }
     },
     "node_modules/buffer": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
       "funding": [
         {
           "type": "github",
@@ -6565,7 +6590,7 @@
       ],
       "dependencies": {
         "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
+        "ieee754": "^1.2.1"
       }
     },
     "node_modules/buffer-alloc": {
@@ -6729,9 +6754,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001561",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001561.tgz",
-      "integrity": "sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==",
+      "version": "1.0.30001562",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001562.tgz",
+      "integrity": "sha512-kfte3Hym//51EdX4239i+Rmp20EsLIYGdPkERegTgU19hQWCRhsRFGKHTliUlsry53tv17K7n077Kqa0WJU4ng==",
       "funding": [
         {
           "type": "opencollective",
@@ -7315,9 +7340,9 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.581",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.581.tgz",
-      "integrity": "sha512-6uhqWBIapTJUxgPTCHH9sqdbxIMPt7oXl0VcAL1kOtlU6aECdcMncCrX5Z7sHQ/invtrC9jUQUef7+HhO8vVFw=="
+      "version": "1.4.582",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.582.tgz",
+      "integrity": "sha512-89o0MGoocwYbzqUUjc+VNpeOFSOK9nIdC5wY4N+PVUarUK0MtjyTjks75AZS2bW4Kl8MdewdFsWaH0jLy+JNoA=="
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -7546,6 +7571,114 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-dev-client": {
+      "version": "2.4.12",
+      "resolved": "https://registry.npmjs.org/expo-dev-client/-/expo-dev-client-2.4.12.tgz",
+      "integrity": "sha512-3+xg0yb/0g6+JQaWq5+xn2uHoOXP4oSX33aWkaZPSNJLoyzfRaHNDF5MLcrMBbEHCw5T5qZRU291K+uQeMMC0g==",
+      "dependencies": {
+        "expo-dev-launcher": "2.4.14",
+        "expo-dev-menu": "3.2.2",
+        "expo-dev-menu-interface": "1.3.0",
+        "expo-manifests": "~0.7.0",
+        "expo-updates-interface": "~0.10.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-dev-launcher": {
+      "version": "2.4.14",
+      "resolved": "https://registry.npmjs.org/expo-dev-launcher/-/expo-dev-launcher-2.4.14.tgz",
+      "integrity": "sha512-SlUf+fEX9sKzDzY1Ui8j5775eLKpO0xPVoI89G7CRsrpUv6ZRvRF836cMFesxkU5d+3bXHpKzDQiEPDSI1G/WQ==",
+      "dependencies": {
+        "expo-dev-menu": "3.2.2",
+        "resolve-from": "^5.0.0",
+        "semver": "^7.5.3"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-dev-launcher/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/expo-dev-launcher/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/expo-dev-launcher/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "node_modules/expo-dev-menu": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/expo-dev-menu/-/expo-dev-menu-3.2.2.tgz",
+      "integrity": "sha512-q0IDlCGkZMsDIFV+Mgnz0Q3u/bcnrF8IFMglJ0onF09e5csLk5Ts7hKoQyervOJeThyI402r9OQsFNaru2tgtg==",
+      "dependencies": {
+        "expo-dev-menu-interface": "1.3.0",
+        "semver": "^7.5.3"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-dev-menu-interface": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expo-dev-menu-interface/-/expo-dev-menu-interface-1.3.0.tgz",
+      "integrity": "sha512-WtRP7trQ2lizJJTTFXUSGGn1deIeHaYej0sUynvu/uC69VrSP4EeSnYOxbmEO29kuT/MsQBMGu0P/AkMQOqCOg==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-dev-menu/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/expo-dev-menu/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/expo-dev-menu/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
     "node_modules/expo-file-system": {
       "version": "15.6.0",
       "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.6.0.tgz",
@@ -7568,6 +7701,11 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-json-utils": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/expo-json-utils/-/expo-json-utils-0.7.1.tgz",
+      "integrity": "sha512-L0lyH8diXQtV0q5BLbFlcoxTqPF5im79xDHPhybB0j36xYdm65hjwRJ4yMrPIN5lR18hj48FUZeONiDHRyEvIg=="
+    },
     "node_modules/expo-keep-awake": {
       "version": "12.3.0",
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-12.3.0.tgz",
@@ -7576,6 +7714,14 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-manifests": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/expo-manifests/-/expo-manifests-0.7.2.tgz",
+      "integrity": "sha512-xlhL0XI2zw3foJ0q2Ra4ieBhU0V2yz+Rv6GpVEaaIHFlIC/Dbx+mKrX5dgenZEMERr/MG7sRJaRbAVB2PaAYhA==",
+      "dependencies": {
+        "expo-json-utils": "~0.7.0"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.5.1.tgz",
@@ -7714,6 +7860,14 @@
       "resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.6.0.tgz",
       "integrity": "sha512-e//Oi2WPdomMlMDD3skE4+1ZarKCJ/suvcB4Jo/nO427niKug5oppcPNYO+csR6y3ZglGuypS+3pp/hJ+Xp6fQ=="
     },
+    "node_modules/expo-updates-interface": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/expo-updates-interface/-/expo-updates-interface-0.10.1.tgz",
+      "integrity": "sha512-I6JMR7EgjXwckrydDmrkBEX/iw750dcqpzQVsjznYWfi0HTEOxajLHB90fBFqQkUV5i5s4Fd3hYQ1Cn0oMzUbA==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo/node_modules/expo-file-system": {
       "version": "15.4.4",
       "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.4.4.tgz",
@@ -7947,9 +8101,9 @@
       "integrity": "sha512-6FPvD/IVyT4ZlNe7Wcn5Fb/4ChigpucKYSvD6a+0iMoLn2inpo711eyIcKjmDtE5XNcgAkSH9uN/nfAeZzHEfg=="
     },
     "node_modules/form-data": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
-      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",

package.json

@@ -11,8 +11,10 @@
   "dependencies": {
     "@react-native-community/netinfo": "^11.1.0",
     "axios": "^1.6.1",
+    "buffer": "^6.0.3",
     "expo": "~49.0.15",
     "expo-asset": "^8.10.1",
+    "expo-dev-client": "~2.4.12",
     "expo-file-system": "^15.6.0",
     "expo-sqlite": "^11.6.0",
     "expo-status-bar": "~1.6.0",