title: react-native-maps local tiles/offline on iOS
body: <p>I have been trying to get offline leaflet/openStreetMap tiles rendering in the react native maps view with both the <code>&lt;LocalTile/&gt;</code> and <code>&lt;UrlTile/&gt;</code> components.</p>
  
  <p>I can render the map  on android and iOS and can see the standard map for each platform with <code>PROVIDER_DEFAULT</code> (Apple's MapKit and Google Maps, respectively). </p>
  
  <p>I download the tiles as a zip file, and unzip them into the appropriate document storage path on each type of device. </p>
  
  <p>I verify that the paths are working and that the map can access these images with the following code: </p>
  
  <pre><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 (
    &lt;View style={styles.container}&gt;
      &lt;MapView
        provider={PROVIDER_DEFAULT}
        mapType={MAP_TYPES.STANDARD}
        style={styles.map}
        initialRegion={region}
      &gt;
  
        &lt;LocalTile pathTemplate={tilesPath} tileSize={512} zIndex={-1} /&gt;
      &lt;/MapView&gt;
      &lt;View style={styles.buttonContainer}&gt;
        //button code removed for brevity
      &lt;/View&gt;
    &lt;/View&gt;
  );
  </code></pre>
  
  <p>}</p>
  
  <p>Referring to my comments within my code snippet above:</p>
  
  <p>1) the tiles path is formatted in (0,1,2,3) folder formats, with the numbers corresponding to the appropriate zoom levels.</p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/o4JSY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o4JSY.png" alt="oneTile"></a></p>
  
  <p>I have left a comment on <a href="https://github.com/react-native-community/react-native-maps/pull/1876#issuecomment-453087696" rel="nofollow noreferrer">this thread on github</a>, 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.</p>
  
  <p>I tried to follow  <a href="https://medium.com/@mellet/adding-offline-capabilities-for-mapview-in-expo-dd9c1b1ab732" rel="nofollow noreferrer">this article</a> 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. </p>
  
  <p>I've seen the  <a href="https://github.com/react-native-community/react-native-maps/tree/master/example/examples" rel="nofollow noreferrer">examples</a> 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. </p>