How to Fly to a Location With the Mapbox Maps SDK for React Native

React Native

JavaScript LogoUsing the flyTo() method, you can zoom out, move to a target location, and then zoom back in. To do this, you only need to tell the MapBox api the coordinates of the target location and the animation duration.

Being able to move from one geo-specific location to another is a critical feature for any map application. At first, users may be happy just to know where they are. At some point, though, you’ll want to offer them the opportunity to go to another location. And you’ll be able to do this, since the react-native-mapbox-gl API has a flyTo() method which provides powerful animation for just this purpose!

At first glance, the moveTo() method may seem like a logical choice, but if you try to implement it, you’ll soon notice that it maintains the current zoom level, which is a major drawback. In some contexts, it may suffice, but for the most part, it is not the best solution for moving from one place to another when the distance is more than a few miles, and the zoom level is an issue. Take a look:

package.json

Above we have the contents of package.json, with dependencies on react, react-native and @mapbox/react-native-mapbox-gl. Now take a look at the examples below.

flyTo() method – Example # 1

We have the basic syntax for the flyTo() method in Example # 1, which belongs to the instance of the map. In our case, we have an instance property named “_map“. We’ll see how this instance property is declared in Example # 3. The flyTo() method takes two arguments: the target coordinates and animation duration. The target coordinates is an array and it should contain the longitude and latitude of an earth location to which you want to “fly” (and they must be in that order). The animation duration tells MapBox how long this “fly to” action should take, because the reality of calling the flyTo() method is that it animates the map. Now fortunately, MapBox takes care of the implementation details for this animation, and all we need to do is let MapBox know what the duration of this animation should be. The value you provide should be in milliseconds (i.e. a value of 1000 would equal one second).

Context for this._map.flyTo() – Example # 2

Putting a little context around the call to this._map.flyTo() in Example # 2, we’ve added a TouchableOpacity component to the application, which, in a nutshell, enables us to make something “touchable.” That is, it can react to a touch and we can add a handler for that touch event. We’ve assigned an anonymous function to the onPress method of the TouchableOpacity, and inside of that anonymous function, we call this._map.flyTo(), passing it the coordinates of the location on earth to which we’d like to “fly”. As a second argument, we provide the number 2500, which means that we want the “fyTo” animation to have a duration of 2.5 seconds. The coordinates that we have provided to this._map.flyTo() are for Columbus Circle in New York City, and the TouchableOpacity has a text component as a child, with the text: “NYC”. So, by pressing this button, the user “flies to” Columbus Circle in New York City.

Full Working App – Example # 3

The full code for our basic working app is in Example # 3. Everything we covered in Example # 2 is in play here, so I won’t take up time repeating that, but one thing to note is line # 13, where we take advantage of the MapboxGL.MapView ref” property. By assigning an anonymous function, we take the argument that is passed to that function (“c”), and assign it to the property: “this._map”. This provides a reference to the map instance. Let’s face it, we’d basically be stuck in the water without the MapboxGL.MapViewref” property, so I’m amazed that it’s not mentioned in the documentation (hint hint MapBox folks!).

TouchableOpacity – Example # 4

I’ve added three more instances of the TouchableOpacity component in Example # 4, giving us four “buttons”: we can fly to New York City, Boston, Paris or Rome. I’ve followed the exact same patterns in the code from Example # 3, so again, I won’t take up time going over all that. The main thing I do want to point out, though, is: instead of assigning an anonymous function to the onPress property of each TouchableOpacity, I’ve created methods for each (i.e. “flyToNyc”, “flyToBoston”, “flyToParis” and “flyToRome”). This makes for much cleaner code, especially for our render() method (lines 31 to 66). In each case, I’ve used this pattern: this.METHOD_NAME.bind(this). This allows us to bind each method to the class instance (i.e. this._map) so that we have access to the class’s this._map property.

styles.js

Above, I’ve included the styles for the working code, just in case you wanted to quickly do a copy-and-paste, and get this application up and running in your local environment.

Summary

So, it’s obvious that the folks at MapBox really had their thinking-caps on when they developed the .flyTo() method. It is essentially an animation method, but what is so impressive is the minimal level of effort required to leverage it. Overall, the animation is smooth and it really does provide a “fly to” feeling in that it first zooms out, then moves to the target destination, then zooms in. And you’re in control, since all of this is done in the amount of time you specify in the animation duration argument. And the performance is impressive.

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.

Why the create-react-app Node module is so awesome

React

angular2 KEYWORD

This tool is perfect for beginners as well as React experts

The JavaScript ecosystem is the wild wild west of the technology world. It seems like every year there is a new heavyweight champ. Right now, Angular and React are duking it out for the belt. They are both solid and enjoy tremendous corporate backing / community support. But they are as different as chalk and cheese. Learning new technologies can be painful. Chances are you got here because you have decided to take the dive into the world of React. Depending on your level of experience, this can be a challenge. The create-react-app Node module can definitely help.

Abstraction

The create-react-app Node module protects you from all of the pain involved with setting-up a React application. Granted, there are tons of JSFiddle links out there that show you how you can spin-up a React application simply by adding to script tags to your web page. Yes, but this kins of setup is not going to cut it in the real world. These are examples that help you get up-and-running and learn.

If you are going to build a real production-ready React application, even a small one, you need some kind of workflow. This is where the pain is: front-end tooling. The create-react-app Node module takes care of all of that for you, literally. Once you have cloned the github repo, you simply execute the following command: create-react-app YOUR_APP_NAME.

Yep, that’s it!

The create-react-app  module takes care of all your Webpack, Babel & ESLint configuration and setup. The funny thing is: you don’t see it. Under the hood there is one main dependency: the react-scripts Node module. This module is like your personal front-end engineer. It sets-up Webpack and Babel  and configures it. You never have to write one line of configuration code for any of this. After you run that create-react-app YOUR_APP_NAME command,  you cd YOUR_APP_NAME, and the npm install. After the npm install is complete, npm start is your last terminal command and your local instance is alive in the browser.

Why this is so amazing

The beauty of all this is: you can get a production-ready React application setup in about 3 minutes. Not only that, this setup was created by the Facebook React team and sanctioned by them. So, you have a great template to start with. The actual application itself is literally a static “Hello World” HTML page. Before you complain, keep in mind that if you are going to learn React, you have to actually write a little code! But the really amazing part is that the most painful aspect of setting up a React application is taken care of for you. You can clone, create, install in a couple of minutes and then start writing code.

Ejecting

Finally, there is the “Eject” command. When you run npm run eject, the create-react-app Node module will un-wrap all of the abstraction. What this means is: all of the front-end tooling remains in-tact and continues to work perfectly, but you are no longer protected from it. Tools such as Webpack and Babel are now available to you and completely customizable. The advantage to this approach is that you can customize your application however you like. It’s also a great way to learn about front-end tooling: you can really see the recommended ways that these tools are configured.

Down sides

There are a few downsides to the create-react-app Node module. The biggest one is that there is no consideration for CSS pre-processors such as LESS and SASS. Also, you cannot configure your application when creating it. You are stuck with the configuration and tooling that is provided. Of course you can use the eject command to reveal all of that detail and do as you wish, but that brings us to the final downside: when you eject, you can never go back.