Using images from FileSystem in MapView.LocalTile


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.


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

  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:

    * 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
    * The size of provided local tiles (usually 256 or 512).

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.


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.


Thanks for sharing :raised_hands:

closed #4

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