maps-offline-test/App.js

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, downloadTile} from './app/functions';

import NetInfo from "@react-native-community/netinfo";

const tilesBaseURL = 'https://maps.nomadmania.com/tiles_osm';
const localTileDir = `${FileSystem.cacheDirectory}tiles`;

export default function App() {
  const [isConnected, setIsConnected] = useState(null);
  const [geoJSON, setGeoJSON] = useState(null);
  const [markers, setMarkers] = useState(null);
  const region = 226;

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener(state => {
      setIsConnected(state.isConnected);
    });
  
    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) {
        console.log("Connected: ", isConnected);
        if (isConnected) {
          await fetchRegion(region);
          await getForRegion(region);
        }
        
        await loadMarkersData().then(data => {
          setMarkers(data);
        }).catch(error => {
          console.error("Error loading markers data: ", error);
        })
        
        await loadGeoJSONData(region).then(data => {
          setGeoJSON({
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                properties: {
                },
                geometry: {
                  type: data?.type,
                  coordinates: data?.coordinates,
                }
              }
            ]
          });
        }).catch(error => {
          console.error("Error loading GeoJSON data: ", error);
        });
      }
    }

    initDB();
    prepare();
  }, [isConnected]);

  const renderLocalTiles = () => {
    return (
      <UrlTile
        urlTemplate={`${tilesBaseURL}/{z}/{x}/{y}`}
        maximumZ={15}
        maximumNativeZ={13}
        tileCachePath={`${localTileDir}`}
        shouldReplaceMapContent
        minimumZ={0}
        offlineMode={!isConnected}
        opacity={1}
        zIndex={1}
      />
    );
  };

  function renderGeoJSON() {
    if (!geoJSON) return null;
  
    return (
      <Geojson
        geojson={geoJSON}
        strokeColor="#3973ac"
        fillColor="rgba(57, 115, 172, 0.2)"
        strokeWidth={3}
        zIndex={2}
        fiilRule="evenodd"
      />
    );
  };

  const renderMarkers = () => {
    if (!markers) return null;

    return markers?.map((marker, idx) => (
      <Marker
        key={(idx)}
        coordinate={{ latitude: parseFloat(marker.l), longitude: parseFloat(marker.g) }}
        title={marker.n}
        description={marker.d}
        image={{uri: `https://nomadmania.com/static/img/series/${marker.i}`}}
      />
    ));
  };

  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        mapType={Platform.OS == 'android' ? 'none' : 'standard'}
        zoomControlEnabled
        offlineMode={!isConnected}
        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>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
  btn: {
    marginBottom: 5,
  }
});