Using images from FileSystem in MapView.LocalTile

Expo SDK
1

I have managed to download some map tiles locally on the device using the FileSystem api.

I am storing them under FileSystem.documentDirectory + 'tiles/{z}/{x}/{y}.png'.
Here is a example of the local file uri after it has been downloaded.

"file:///var/mobile/Containers/Data/Application/C9D688C4-9D29-45AA-A71A-0BDCB9150170/Documents/ExponentExperienceData/%2540myname%252Freact-map-test/tiles/1/1/0.png"

After some testing I used the React Native Image component to see if the images are saved in the local filesystem.

<Image
  style={{height: 50, width: 50, borderColor: 'red', borderWidth: 1}}
  source={{uri: "file:///var/mobile/Containers/Data/Application/C9D688C4-9D29-45AA-A71A-0BDCB9150170/Documents/ExponentExperienceData/%2540myname%252Freact-map-test/tiles/1/1/0.png"}}
/>}

The expected tile is showing so my FileSystem api logic is working as expected.
Now I’m trying to pass in this filepath to the MapView.LocalTile as per documentation:

<MapView
  region={this.state.region}
  onRegionChange={this.onRegionChange}
>
  <MapView.LocalTile
   /**
    * The path template of the locally stored tiles. The patterns {x} {y} {z} will be replaced at runtime
    * For example, /storage/emulated/0/mytiles/{z}/{x}/{y}.png
    */
   pathTemplate={this.state.pathTemplate}
   /**
    * The size of provided local tiles (usually 256 or 512).
    */
   tileSize={256}
  />
</MapView>

I am setting the pathTemplate to: FileSystem.documentDirectory + '/tiles/{z}/{x}/{y}' but no tiles are getting loaded.

Not sure if the LocalTile works with expos filesystem.

2

Figured it out.
Looks like the filesystem path has to be handled as if it is a url.
Si you actually pass it to the MapView.UrlTile instead of the LocalTile.

Wrote a article on how I solved it.

3

Thanks for sharing :raised_hands:

4

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.