React-native-maps: Offline maps support

[bunnakal]

Dear all creators,

Are there any possible ways to use offline maps data (both maps and satellite) with your third-party library?

Kind regards,

[vessp]

I would also like to know if map tiles can be downloaded/cached and used while offline.

[jayfunk]

Honestly, this is my only reason for not using this lib. I have been using React Native MapBox because it has offline support for downloading tiles. I saw that you do have snapshot support. When performing a snapshot would react native annotations still be usable while using a snapshot?

[allthetime]

I'm also curious about this. I'm wondering how trivial it would be to implement...

After searching around a bit, it looks like google at least doesn't support offline for apps, it is against the TOS, presumably because they are constantly updating and they don't want people displaying stale data with their name on it.

[allthetime]

@jayfunk btw, how is react-native mapbox? I have a pretty simple implementation and would really like to have offline capabilities. I don't see it in the docs, do you know if there is a way to draw paths?

[churcho]

This would really come in handy for me as well. Any feedback on road map?

[marvinernst]

+1

[hernanmateo]

+1

[alzalabany]

+1

[kazak1377]

+1

[ammichael]

+1

[Unforgiven-wanda]

+1
This is absolutely essential for a project of mine. The minute is it implemented I will use this module again.

[jlyman]

I also need offline support. Looking briefly at the implementations of AirMapUrlTile, would it be possible to pass in a local-referencing URL? For example, similar to what's being done here on iOS:

//Get the URL template to the map tiles
let baseURL = NSBundle.mainBundle().bundleURL.absoluteString
let urlTemplate = baseURL?.stringByAppendingString("/Map1880/{z}/{x}/{y}.png/")

(Disclaimer, I haven't used the native implementations of either platforms, just done Leaflet.js locally using similar approaches.)

In other words, is there a little magic we can do with the urlTemplate passed to <MapView.UrlTile> mentioned in the docs that would allow us to bundle in pre-rendered and locally stored tiles?

[benvium]

@jlyman We looked into this a couple on months ago - yes, it's possible to get offline locally-stored tiles displaying using this kind of technique.

However the android version required an internet connection before the map would appear the first time. This was so that Google could verify your API key. On subsequent launches it'd be ok. This is the main reason we're currently using react-native-mapbox-gl in several projects.

@jayfunk react-native-mapbox-gl is very good. You can draw polygons and lines and serve map tiles from the app bundle fine for 100% offline access. It is a pretty large framework though, and adds 10-15mb (I forget the exact figure) to your ipa / apk.

[jayfunk]

@benvium After a few more version bumps, you are right, there react-native-mapbox-gl didn't give me. After a few more releases they were able to smooth out most of the rough edges.

[amaurymartiny]

There are apparently many requests for this. Are offline maps planned in the roadmap?

[leontalbot]

+1 for offline maps support

[timfpark]

I'm working on this in a fork of the code. Basically, it would function as such:

1. The app can set aside a cache of a maximum size.
2. As the app requests tiles, these are cached to local storage.
3. There is an interface on the map object that enables you to cache a particular tile in the map at a particular zoom level.
4. The app periodically scans the cache and deletes items in LRU order until it gets under the maximum cache size.

Let me know if the maintainers would accept a pull request like this and I can work on it.

[ghost]

@timfpark I would be wiling to help out with and android side of that fork (as that is what i know best), but overall I will be need this soon in a production app of mine.

[Spacelapp]

@timfpark any news on this? I also need this soon in a production app.

[Unforgiven-wanda]

@timfpark Waiting to hear from you.

[wasa4587]

@timfpark count on me if you need help

[timfpark]

Hi All: Sorry for the delay in answering - I have been super busy at work. I will not likely have time to work on this until the summer, so let me do this - I have a quick and dirty prototype of this. I will create a repo with the changed files and link to it here if someone wants to take it up and make it a more PR ready commit.

[timfpark]

Here are the modifications that I made:

https://github.com/timfpark/airmap-offline

This is on top of 0.12.4 (because the React Native project is still on an older RN version 0.39.2).

[dsc-cloyd]

any updates on offline maps support? 👍

[j05u3]

I would be a really big plus on my project too.

[ghost]

+1. This would be awesome for a project I'm working on.

[freshnewegg]

I have a working work-around for offline support but it's awfully inefficient. I made enough raster tiles to cover like 1/4 of Washington and its like 800mb(optimized!). The problem I see with the offline isn't whether we can render tiles, it's how can we store them efficiently and where do we get this tiles...

Does anyone know if how this lib could support vector tiles? /client side rendering?

[lucasbento]

@timfpark: awesome work, would you be able to update it to the latest react-native-maps version?

[ghost]

@timfpark Nice! Do you have any estimates on map tile storage sizes?

[timfpark]

Hi @lucasbento: Yes - I have it running with master - I have shared my branch here:

https://github.com/timfpark/react-native-maps/tree/cached

[lucasbento]

@timfpark: awesome, do you plan to support Android?

[Stophface]

I am working on offline support (iOS/Android) as well. My solution goes in the direction @benvium and @jlyman suggested. I might be able to get around the "API login problem" on Android. As soon as I have a solution, I will post it here.

[markmssd]

Go @Stophface Go! 🎉

[zavadpe]

Hey guys,
I was working on offline tiles support (locally stored in device) few days ago and I ended up with simple solution of adding LocalTile component for both platforms. Basically, one just adds LocalTile overlay into the map similarly as UrlTile:
<MapView>
<LocalTile
pathTemplate="/path/to/localy/stored/tiles/{z}/{x}/{y}.png"
tileSize={256}
/>
</MapView>

You can check my branch (rebased on the latest master) here: https://github.com/zavadpe/react-native-maps/tree/feature/local-tile
I can also create PR if this solution suit more people, not just me.

[raihanrazi]

Working on a project that could really use this feature. Really hoping that your PR gets approved soon @zavadpe!

[alvelig]

@zavadpe PR's are welcome. Please also create an example project to test your .
Any ideas on how to have a package to download? Maybe there are some GIS projects that share their tiles (without license issues of course)?

I'll then try to arrange more people for QA. @raihanrazi you are first in the list :)

[zavadpe]

@alvelig @raihanrazi I created PR. For testing I used directly example app in react-native-maps repository.
Tiles packages can be downloaded for example using jTileDownloader or Mobile Atlas Creator. I already had tiles package to use which I just copied to my devices.

[alvelig]

As Google Maps SDK does not have this implemented, the only offline possibility is to use custom tiles. Added in #1876 (0.19.0). Credits @zavadpe

[Buthrakaur]

@zavadpe does LocalTile support also vector tiles format?

[zavadpe]

@Buthrakaur No, it's pretty the same as UrlTile and it supports xyz tiles (png, jpeg) scheme stored locally.

[amirmatin]

@benvium Hi .. I have recently started looking at Mapbox-gl as well and I was able to download offline tiles etc and draw a route on it but have you tried navigation (like turn-by-turn nav) using offline maps ? is it possible at all ?
Thanks..

[Stophface]

@amirmatin That has nothing to do with offline maps. Offline maps are rastered data - for navigation you need a routable network. Which is somthing completely different. The visualization of the result may be done on a raster (offline) map, but calculating the route is a very different story.

[amirmatin]

@Stophface Thanks for the Thumbs down. I understand offline mapping and well aware of the fact that navigation and offline tiling are two separate things HOWEVER that does not mean if turn-by-turn navigation is supported in an online version of maps (such as mapbox) then it also supports offline packets.
I will gladly take your suggestion / recommendation of how to achieve turn by turn navigation for offline maps if you have any solution ...

[Unforgiven-wanda]

I believe this is the oldest issue I'm subscribed to on Github, from 2016, good God...
The author should just put an end to this by saying offline functionality is not happening, period.
I for one have lost hope.

[Stophface]

@Unforgiven-wanda its implemented ;)

[Stophface]

@amirmatin Your welcome ;-) I think you do not understand the difference though.

In order to do routing, you need a routable dataset which consists of nodes and graphs (and a bit more). On that dataset you run the routing algorithm. The result of the routing algorithm normally is a line. That line is what you want to overlay onto your offline map (as you call it, technically speaking its a collection of raster images).
Basically its only a polyline (vector) on top of the a rastered image (map) It does not matter whether the source of the map (the tiles, the raster images) are coming from an online source or an offline source. Simply overlay the result of the routing algorithm on top of the map.

Now, implementing a routing algorithm and keeping (or even creating) the routable network dataset all on the phone - that is something which requires deeper knowledge. Creating a routable network and running the routing algorithm is very ressource intensive. So you may want to perform the creation of the dataset as well as the calculation of the route on a server and then simply download the instructions and the route (polyline) onto the phone.

[demiurg]

For the project I'm working on, all but google satellite tiles are cloudy in my area of interest. Is there any way at all to have offline tiles with a Google layer?

[Stophface]

@demiurg Sure. Export your Google Satellite images to z/x/y.png then use the LocalTile implementation. Or create a MBTiles database from your images and wait till this PR gets merged.
However, I am pretty sure Google is not supplying the raw images from which you can create a z/x/y scheme/MBTiles database ;)

[demiurg]

Well... we did download 115GB of tiles for our area of interest using the URL scheme:
https://khms1.googleapis.com/kh?v=800&hl=en-US&x=208334&y=115705&z=18

But, it doesn't feel very optimal...

[ys-sherzad]

@demiurg can we place these tiles on our local server (for my use case of the app is to totally be offline connected to local server) and fetch them to the app, or is it a must that these tiles be placed as assets in the app/bundle itself?
Need feedback asap anyone, very much appreciated.

[demiurg]

@demiurg can we place these tiles on our local server (for my use case of the app is to totally be offline connected to local server) and fetch them to the app, or is it a must that these tiles be placed as assets in the app/bundle itself?

My understanding is that you can place them anywhere your phone can send a request to and get a response. Local server would have to be a routable ip or resolvable domain.