How to Show Points on a Mapbox Map With React Native

React Native

JavaScript LogoThe key to rendering MapBox markers in your React Native application is implementing the MapboxGL.PointAnnotation component.

In the article: “Getting Started with the Mapbox Maps SDK for React Native,” I covered the absolute basics needed to get a MapBox map to render in your React Native application. The level of effort was low, and the scope of the article was minimal, but that was the whole idea. We wanted to stick to the basics and we did, by rendering a map and setting the center coordinates to Columbus Circle in New York City. In this article, however, our goal is to set a number of markers on a map.

So, markers, what are they? Well, they’re the common features of map applications that allow us to provide a visual cue that refers to a location on earth. And depending on your business requirement, your markers can often extend the richness of your application. For example, you can attach click or press event handlers and provide geo-specific information to the user. Or, you could customize the image that is used for the marker to further enhance the user experience. Now the key to rendering markers with MapBox is implementing the MapboxGL.PointAnnotation. According to the mapbox GitHub page, this component represents “…a one-dimensional shape located at a single geographical coordinate.”  While that definition may be a bit dry, it just means that it is the component that will become the marker on your map.

package.json

Above we have the contents of package.json. We have dependencies on react, react-native and @mapbox/react-native-mapbox-gl. Let’s take a look at an example:

Example # 1

Now there is a lot going on in Example # 1, but let’s break it down. As I mentioned in the previous article, we need to use the MapboxGL.setAccessToken method to let MapBox know what our access token is. So, just skip down to line # 64: the render() method. Here, we render the MapBox map via the MapboxGL.MapView component, which takes care of all the heavy lifting when it comes to rendering the map. The sole child element of MapboxGL.MapView is the return value of our renderAnnotations() method. So let’s go ahead and take a look at that method.

Look at the renderAnnotations method on line # 54. Here, we create a for-loop, which iterates over the state.coordinates array. And for each iteration, we call the renderAnnotation() method, passing the value of the “i” variable, which is just a counter. In this method, we are simply pushing elements into the items array, which is a private variable, and we return that array. So, now, back at line #74, it is this array of MapboxGL.PointAnnotation components. Let’s just go ahead and take a look at the renderAnnotation() method.

Take a close look at the renderAnnotation() method on line # 30. You’ll see that it takes counter as an argument, which we’ll need in order to understand the coordinates of the marker we create. This method returns a MapboxGL.PointAnnotation, which is constructed in this method. The constants id, coordinate and title are used to help make this MapboxGL.PointAnnotation unique. The sole child element is a react-native Image component instance. This image you use is arbitrary, so go ahead and use any image you want. We make reference to “../common/images/marker.png”, which is a relative path in our application. The most important part of this method is the coordinate constant. We use the counter variable to get a reference to one of the state.coordinates array elements, and it’s here that we are able to give this MapboxGL.PointAnnotation component a geographic presence on our map. Nice.

Summary

Overall, in this example we did three things. First, we rendered a MapboxGL.MapView. Second, we executed a method whose return value became the sole child element of the MapboxGL.MapView component. That method looped through all of the coordinates that we stored in state.coordinates. And third, we used a for-loop to iterate the state.coordinates array and render a MapboxGL.PointAnnotation for each coordinate in that array. So, on the whole, this approach requires relatively little code. If you’re new to React Native, however, it might take a little getting used to. But I think that you’ll find that outside of the React Native learning curve, rendering markers on the map is fairly simple, and once you do master it, you’ll find it to be a great addition to your tool belt.

Getting Started with the Mapbox Maps SDK for React Native

React Native

JavaScript LogoMapbox’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.

package.json

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.

Summary

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.