React Native: Maps with Direction From Current Location

Princess Janf
Dec 4, 2017 · 4 min read

To be able to create Maps with direction to particular destination from current location, I used Airbnb’s react-native-maps, React Native’s Geolocation and Google Directions API. We are going to use the react-native-maps for displaying Maps. Google Directions API for getting the routes to the destination. Finally, the React Native’s Geolocation to get device’s current location. There are a lot of ways to do this, this is just one of them.

For the full code, go to the end of this post. 😁

First, ensure that your React Native projects were made with react-native init or made with Create React Native App which have since ejected. To see more information about ejecting, you can see this guide.

React Native Geolocation

Installation

In iOS, include NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation in app. However Geolocation is enabled by default when creating a project with react-native init. To enable geolocation in background, see this guide.

In Android, to enable geolocation, add the following line to AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

As a browser polyfill, the API is available through navigator.geolocation global, therefore there’s no need to import it on top of the file.

API Overview

There are several methods available on navigator.geolocation — getCurrentPosition, watchPosition, clearWatch, and stopObserving. However in this post, I am going to only use getCurrentPosition. For the rest of the API, you can read the documentation below.

getCurrentPosition is used to request a user’s location. The success callback of the API would be:

The error callback would pass a standard error message. As for the config object, there are:

  • enableHighAccuracy (boolean) — enable true to get the most accurate location.
  • timeout (milliseconds) — shows time allowed to get device’s position, otherwise throw an error.
  • maximumAge (milliseconds)—shows time device’s position is stored in device cache, if exists.

Code

React Native Maps

Installation

  • Go to your project folder, and install react-native-maps
npm install react-native-maps --save 
OR
yarn add react-native-maps --save
  • Link the dependencies
react-native link react-native-maps
  • Import MapView from yout file
import MapView from 'react-native-maps';

Overview

React-native-maps has a complete set of features that you would need to display information on maps. You can check the complete set of features and documentation in their GitHub Repository.

Code

For example, if we want to display our device’s current location that we have already retrieved from Geolocation on the maps. We can add below codes in the View.

Line 10 if this.state.latitude and this.state.longitude exists, then show Marker on Map.

Google Directions API

Google provides API that calculates directions between locations. You can even use the various transportation modes (public transportation, walking, or cycling, driving — this is the default mode).

Complete documentations can be found here.

First of all, the JSON returned by the API would look like this:

polyline: 
{ points: 'rsce@gvbkS~@BpDD|@@J?bA?h@?R@z@F|@Dz@DD?dADv@@FAR?XA`AI`@If@KhAUbAWx@UXAXGJAp@Gh@GNAhBObAOv@I\\ARCh@Cx@AnA@D?x@D^BlBRh@Ff@DP@l@@|@Bl@@H@j@?@?j@@H?pBAnBGv@GhACbAEl@CH?B?^ATEJATENEVGXM^OHCp@[`By@z@[jBy@x@]~AaALIdAs@BC`Ak@lAm@n@[XK`A[~@YXIXGh@Ij@I`AI|@ErAIbB?RAl@BjA@x@@L?~A?d@@b@@`@@J@L@bAJLBn@HzARtANlC^J@`Fn@j@H`@Fj@Hh@F`AN`@DrB^fC\\VBZDnBTbBP|@Fb@DdCVrEb@xFv@@?NBF@^DZDXBP@VDNBnFv@b@Hv@LdBXb@DJ?J?j@AD?@?B?NCH?H?F?D?H@F@RFr@V|Ab@nBp@r@NLDTFrCv@JDdBh@jAZfGpBpA\\hD~@n@L`AR~Cb@XBrCZt@HH@\\D@?^Bv@B|AF@?`@B`FJ~@?`AB|AJz@Fd@BhAFrAJrALv@JNBvAT' }

Therefore, we’re going to need something to decode this polyline to create route in our apps. That something is Polyline created by MapBox.

Installation

  • Inside your project folder, install @ mapbox/polyline
npm install @mapbox/polyline --save
OR
yarn add @mapbox/polyline --save
  • Link dependencies
react-native link @mapbox/polyline

Code

Add state “coords”

this.state = {
latitude: null,
longitude: null,
error:null,
coords: [],
};

This is the method needed to get direction from Google API.

Line 4 Fetch the routes from Google Directions API
Line 6 Decode the polyline
Line 13 Storing the routes to this.state.coords

And this is how you present it.

Pathing Current Location to Destination

Well, so that’s pretty much everything that we need to create pathing from our current location to a destination. How do we link the 3 parts above?

First, we need to create an additional state to contain the destination latitude and longitude. For this post, the state would be preset.

this.state = {
latitude: null,
longitude: null,
error: null,
coords:[],
x: 'false',
cordLatitude:"-6.23",
cordLongitude:"106.75",
};

Then, let’s create an additional method to convert the current latitude and longitude into a format that the Google Directions API receive.

Then, create a condition in view to show route (using driving mode) if there’s any, and to just show straight line if there’s no route.

if x == true then there is indeed a route from location to destination.

That’s pretty much it! Here is the full code:

Change Line 20-21 and Line 51 to try out different destination’s latitude and longitude.

Notes

I made this post because I found difficulties in finding resources regarding this particular problem. After reading some resources, this is the solution I came up with. I want to say thanks to Spencer Carli (React Native Basics: Geolocation) and Ali Oğuzhan Yıldız (React Native Maps with Google Directions API) for making great tutorials. Some resources from this post are also from them. Thanks!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade