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.