react-native-maps local tiles/offline on iOS

Question

I have been trying to get offline leaflet/openStreetMap tiles rendering in the react native maps view with both the <LocalTile/> and <UrlTile/> components.

I can render the map on android and iOS and can see the standard map for each platform with PROVIDER_DEFAULT (Apple's MapKit and Google Maps, respectively).

I download the tiles as a zip file, and unzip them into the appropriate document storage path on each type of device.

I verify that the paths are working and that the map can access these images with the following code:

render() {
const { region } = this.state;
//gets the document directory based on platform(ios/android)
const docDir = BlobService.setDocDir();
const tilesPath = `${docDir}/projects/${this.props.projectId}/pdf/tiles/${
  this.props.floorData.id
}/{z}/tile_{x}_{y}.png`;
return (
  <View style={styles.container}>
    <MapView
      provider={PROVIDER_DEFAULT}
      mapType={MAP_TYPES.STANDARD}
      style={styles.map}
      initialRegion={region}
    >

      <LocalTile pathTemplate={tilesPath} tileSize={512} zIndex={-1} />
    </MapView>
    <View style={styles.buttonContainer}>
      //button code removed for brevity
    </View>
  </View>
);

}

Referring to my comments within my code snippet above:

1) the tiles path is formatted in (0,1,2,3) folder formats, with the numbers corresponding to the appropriate zoom levels.

2) The path to tiles seems to work, however it only seems to infinitely tile a single tile, and the zoom levels don't seem to match OSM/Leaflet zoom levels appropriately:

I have left a comment on this thread on github, which looked nearly identical to all the steps I have taken, except that I am ejected from expo in the app I am working with.

I tried to follow this article but I can't seem to understand how to map these tiles into the region appropriately. Using the formula he's provided doesn't seem to mimic the same zoom levels as in react-leaflet as it was previously implemented, and I always get an out of range error when trying to set the region parameters.

I've seen the examples provided and am simply at a loss for how to convert this mapping system to work with OSM tiles that work in a leaflet based map view.

user2882189 user2882189 · Accepted Answer · 2019-12-03T18:06:15

Hello are you still working on this? I read your question as I have issues with new react native, I use webview not the mapview, it worked fine until react 0.44 then latest versions block webview access to file system of app data files. Do you manage the unzipping and access to tiles within your app? I will probably try react-native-maps for offline times since I am stuck with using webview for the android app. About your question, you need some geographic systems (GIS) skills. If you georeference the building corners to latitude, longitude then you can relate it to the tiles scheme used in leaflet, I do this with quantumGIS (qGIS) and QmetaTiles plugin.

react-native-maps local tiles/offline on iOS

1 Answers