55

I am trying to integrate OpenStreetMap into a React Native project. But I can't find any library or anything related to React Native in their GitHub account.

The only thing I can find relating to these to topics is the link below, in which there is no proper answer.

https://www.reddit.com/r/reactnative/comments/5fi6bg/how_to_add_openstreetmap_to_a_react_native_project/

But I heard once that Mapbox uses OpenStreetMap as their source. Mapbox suggests a good way to integrate it into a React Native project:

https://github.com/mapbox/react-native-mapbox-gl

Is there a way to integrate OpenStreetMap into a React Native project or is it the case there's not proper support for it yet.

8
  • Did you get any clue or code how to integrate open maps in react native? Jul 24, 2018 at 15:38
  • Nope, I had to use mapbox instead. Because mapbox uses OpenStreetMap
    – Amal p
    Jul 27, 2018 at 5:18
  • Do you have to pay for mapbox? Are there any limits? Could it be used for businesses?
    – johnny
    Jan 9, 2019 at 14:11
  • 1
    yes, if you are planning to commercialise it you will have to pay for it.The packages are shown in their website.
    – Amal p
    Jan 10, 2019 at 5:17
  • 1
    I believe the standard react-native-maps package does the job you want done? May 27, 2019 at 16:37

2 Answers 2

14

Using Mapbox GL

⚠️ WARNING: the instructions below for Mapbox appear to no longer be free if you use SDK/library versions after 2.0.0, released around Dec 2020. See this SO answer for more details: https://gis.stackexchange.com/a/188241/55948

Old answer (pre-December 2020 - see above):

Another option is to use Mapbox GL, which is free as long as you don't use anything in the Mapbox platform. Unlike other options, this won't require an API key ([source 1] [source 2]).

There's often confusion about Mapbox, since the platform (global styles, tilesets, datasets, Mapbox Studio, etc) is paid, but Mapbox GL is a library which you may use to display content that is either self-hosted or hosted by the Mapbox platform.

Below is an snippet of an example using Stamen Watercolor tiles (which are also OSM-based):

render() {
  const rasterSourceProps = {
    id: 'stamenWatercolorSource',
    tileUrlTemplates: [
      'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',
    ],
    tileSize: 256,
  };

  return (
    <MapboxGL.MapView style={sheet.matchParent}>
      <MapboxGL.Camera
        zoomLevel={16}
      />

      <MapboxGL.RasterSource {...rasterSourceProps}>
        <MapboxGL.RasterLayer
          id="stamenWatercolorLayer"
          sourceID="stamenWatercolorSource"
          style={{rasterOpacity: this.state.opacity}}
        />
      </MapboxGL.RasterSource>
    </MapboxGL.MapView>
  );
}

Other options

As mentioned earlier, one other option for React Native (both Android and iOS) is react-native-maps.

It's at best unclear, though, if you must use a Google API key to use this lib if you don't display a Google map: Google says "To use the Maps SDK for Android you must have an API key", but react-native-maps appears to use a drop-in Maps SDK replacement called AirMapView, which supports other providers and claims you'd need to setup the native Maps SDK on Android only "to support native Google Maps". To be on the safe side, most people end up setting up a billing account with Google to generate an API key (even if you don't plan to ever count a single map view), something which Mapbox doesn't require.

1
11

You can use a custom Tile Overlay (OpenStreetMap too) in react-native-maps package: https://github.com/react-native-maps/react-native-maps

(scroll to Using a custom Tile Overlay section)

You need to add api key. You don't need to use Maps API at all and the key won't be used in that case.

12
  • 15
    I tried this library but why it needs google map API key? i'm using custom OSM tile server! Nov 13, 2019 at 8:10
  • 1
    So this is basically still using google map api key right?
    – sommesh
    Nov 27, 2019 at 12:15
  • @OliverD just set a google API key but don't let render google tiles. Also you can change canvas padding or margin to hide google logo. Dec 26, 2019 at 20:33
  • 2
    @VahidAlimohamadi sadly google does not accept my client visa card so I can't get the key :( and I don't know how can i handle it without the key or google maps services
    – Oliver D
    Dec 26, 2019 at 21:00
  • 1
    Not relevant anymore because of github.com/react-native-maps/react-native-maps/pull/…
    – rusakovic
    Aug 22, 2022 at 21:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.