Mapbox’s react-native-mapbox-gl module simplifies the process of generating a map in your React Native application.
At first, I was a bit hesitant to embrace Mapbox because I have always been so impressed with Google Maps. Until recently, I’d had virtually no motivation to look elsewhere. After all, Google had made rendering and manipulating maps so effortless. But, now that I’ve spent some time with it, I must admit that Mapbox is a formidable competitor to Google Maps. Now, I would like to see a more robust API, especially when it comes to map event handlers. But, the more time I spend with Mapbox, the more knocked-out I am with it. So, something for you to think about: if you’re building a React Native application that leverages maps, the react-native-mapbox-gl module is quite a life saver.
For one thing, when it takes less than a few minutes to get a module working in an app, I pay attention. And that was exactly what happened with react-native-mapbox-gl. After an initial npm install –save, I was up-and-running. I will note, however, that the documentation is a bit of a disappointment, as it is minimal, fairly dry and lacking in working example code. That said, though, it was at least up to date and, for the most part, the various properties and methods worked as advertised. In fact, once you get the map to render in your React Native application for the first time, it kind of feels like magic. The map renders so smoothly and it’s almost embarrassing how little code you need to write, in order to spin-up a pretty slick-looking map-based application.
Above, we have our package.json file. Nothing too special going on here; we just need react, react-native and @mapbox/react-native-mapbox-gl. You should be able to copy and paste this into your application, then fire up your emulator.
Example # 1 – MapboxGL.MapView
In Example # 1 we start out by importing our dependencies. After that, we need to set the access token for the application. That’s done by calling the setAccessToken method of the MapboxGL module. Then, in our class, we render a MapboxGL.MapView, nested inside of a React Native View. There is a slight problem, though; we don’t see too much after the map is rendered. So let’s fix this by setting the zoomLevel property.
Example # 2 – Setting the zoomLevel property
In Example # 2, we add zoomLevel as a property of the MapboxGL.MapView, and set it to “1”. Now we see a map in our emulator. Unfortunately, though, we are in the middle of the Atlantic Ocean, which is probably not where we want to be. Okay, so let’s take care of that by setting the centerCoordinate property.
Example # 3 – Setting the centerCoordinate property
In Example # 3, we set the centerCoordinate of the MapboxGL.MapView, to the const “columbusCircleCoordinates“. This is an array that contains the latitude and longitude of Columbus Circle in New York City. So this has forced the map to render a specific location on earth, ensuring that everyone sees the same thing when they start the application.
So, MapBox clearly wants you to use to their product, as evidenced by how easy they make it to spin-up a map in your application. Their react-native-mapbox-gl module extends this facility to React Native applications. Now the key to rendering a map is the MapboxGL.MapView. So just be sure to set the centerCoordinate property to valid coordinates in an array (i.e. a set of latitude and longitude values for some place on earth).
Now, as you can well imagine, this article merely scratches the surface of what’s possible. My goal here was to simply provide a very high-level explanation of how to render a MapBox map in your React Native application. I recommend this SDK. There is a fairly robust set of properties and methods here that really makes your maps come alive.