Use something else than Google Maps for maps

[amaury1093]

We plan to launch the app in China (where pollution is serious). However, we're using google maps, which is blocked.

An alternative would be mapbox, but we need to make sure it's not blocked in China. Or better: open street map.

Also, this might require ejecting from Expo. If possible, let's not eject from Expo.

[amaury1093]

To make it work with Expo, we could use a 100% JS solution: https://github.com/reggie3/react-native-webview-leaflet or https://github.com/allenhwkim/react-openlayers

Performance is not an issue here (the map is mostly decorative), so we don't need a native component

[theaupoulat]

Still open ?

[amaury1093]

Yes! It'd be good to see what's out there, and with what we can replace it. The requirements are:

• works behind the the great firewall
• doesn't require to eject expo
• no loss of functionality compared to now (which is not much: select a bounding box to show, add 2 markers with custom image, popups on markers).

@theaupoulat would you like to work on this?

[theaupoulat]

I have similar requirements for a project so I'll gladly help! My first intuition is leaflet too.

[theaupoulat]

@amaurymartiny Having problems with algolia API, keep getting 403 errors on each search (I put algolia keys). Is it a known issue when setting development env ?

[amaury1093]

Hmm, I'm not sure, is there an error message with the 403?

Alternatively, try setting null and null (without quotes) to the 2 algolia fields in app.json, they have a generous free tier.

[theaupoulat]

It was a version problem with react-native-reanimated and expo. Solved it ! thanks !

[amaury1093]

Hi @theaupoulat! Any progress on your side? Are you still interested in working on this?

[LuKenneth]

I can give this a shot if you guys don't mind!

[amaury1093]

Sure 🚀! @theaupoulat hasn't been answering, so go ahead @LuKenneth, I just assigned you.

[LuKenneth]

So I started taking a look at this tonight, I got the app running on my iPhone with no problems. Then I began looking into replacing the map provider with open street maps. What I successfully did was add a 'UrlTile' on the map to use open street maps, but I believe that's just an overlay over the existing map provider, which isn't what we're looking for. I decided I needed to make my attempts on an android device so that I could see the default Google Maps being replaced. I discovered this package (https://www.npmjs.com/package/react-native-maps-osmdroid) which seems to seamlessly replace google maps with open street maps on android. I yarn removed react-native-maps in favor of react-native-maps-osmdroid which I hoped would magically make everything work (so it seemed would be the case in the readme of the npm package site). But after running yarn start and launching it in my android emulator it fails on start up. Any idea what could be wrong here? Heading to bed for the night, but will look into it later. And I may shift to leaflet/whatever you linked above.

[amaury1093]

Hey @LuKenneth, yeah that happens when you have an incorrect sentry DSN. Try to put null (without quotes) in the app.json field

Note: I updated the README too, you're not the first one to ask this

[amaury1093]

Hey @LuKenneth, are you still working on this? Do you need any help?

[LuKenneth]

@amaurymartiny Sorry, I've been busy/traveling lately. Using null like you said fixed my issue above, thanks for that. I still plan on completing this - I can't remember where I last left off. I'll jump back in later tonight after work, and I'll update you!

[LuKenneth]

@amaurymartiny I remember where i was now... I tried to use https://github.com/allenhwkim/react-openlayers and https://github.com/allenhwkim/react-openlayers, but for each - I had trouble importing it because they don't have typed equivalents. Is my only option to created the typed module myself? That would be something brand new to me. Any advice?

[amaury1093]

is my only option to created the typed module myself?

No, you have several options:

1. you can just put inside App/ambient.d.ts the following line

declare module 'react-openlayers';

(read: https://stackoverflow.com/questions/48224858/import-require-nodejs-modules-without-types-in-typescript-in-2018)

And everything in react-openlayers will have the any type.

2. You can just put

// eslint-disable-next-line
// @ts-ignore
import openLayers from 'react-openlayers';

If react-openlayers is used in several places, I'd prefer solution 1. Or else solution 2 is fine for me too.