CODEWITHSUNDEEP
javascriptreact-nativeopenstreetmapmapbox-gl-jsmaplibre-gl
Emmanuel
Emmanuel

Reputation: 151

How to use MapLibre GL Js in react native

I am looking for a mean to use OpenStreetMap data in my react native application. During my last reasearches, I found MapLibre, which is free option based on MapBox GL old versions. The matter I am facing is that I am not able to find any plugin to use it in React Native, apart from @react-native-mapbox-gl/maps. Therefore, in their documentation it is said: "We also support MapLibre flavors of Mapbox SDKs now", but the example they proposed is the following:

import { StyleSheet, View } from "react-native";
import MapboxGL from "@react-native-mapbox-gl/maps";

MapboxGL.setAccessToken("<YOUR_ACCESSTOKEN>");

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  container: {
    height: 300,
    width: 300,
    backgroundColor: "tomato"
  },
  map: {
    flex: 1
  }
});

export default class App extends Component {
  render() {
    return (
      <View style={styles.page}>
        <View style={styles.container}>
          <MapboxGL.MapView style={styles.map} />
        </View>
      </View>
    );
  }
}

It is required to have an access token for MapBox GL and there is not a description for MapLibre Otherwise, if there is a free tile provider you can advise me, it will be welcome.

Upvotes: 6

Views: 5566

Answers (2)

ianthetechie
ianthetechie

Reputation: 670

Quick update for 2023. rnmapbox is dropping support for MapLibre in the next major release. MapLibre development has progressed in a slightly different direction than Mapbox, and the maintainer said it doesn't make sense for him try to maintain both anymore since most of the users are using Mapbox.

MapLibre recently forked rnmapbox to ensure that MapLibre is properly supported on React Native, and it has been updated with the latest MapLibre GL Native libraries for iOS and Android: https://github.com/maplibre/maplibre-react-native.

A Mapbox access token is not required, but for the moment you still need to put something (an empty string) or Android will crash due to how it's implemented (should be fixed at some point).

But you can use it with just about any other tile provider. For example, Stadia Maps (full disclosure: I'm a cofounder) has a tutorial showing how to use it with one of their API keys.

All other non-Mapbox providers I'm aware of are similar, with an API key going on your query string. If you are using a custom map style, then you would need to ensure the API key ends up in your source URL in the style. Check the docs or contact support for your tile provider if you have any specific questions about how they work.

Upvotes: 5

iGroza
iGroza

Reputation: 919

iOS guide here

android guide here

Upvotes: 4

Related Questions