Introducing directions to the React Native Store Locator Package

By: Nick Italiano

Nowadays, we’re releasing our React Native Store Locator Package, a plug-and-enjoy alternative that decreases the time it takes to established up and develop a beautiful retail store locator in your application. Use the kit to speedily generate performance like browsing quite a few places, interacting with each point to check out more facts, and previewing the distance and route to each retail store. To preview a route, we’re rendering Mapbox Directions on prime of our maps working with React Native.

How to increase Directions to your React Native app

The initially thing you’ll will need for adding directions to your application is mapbox-sdk-js, an open up supply JavaScript client to Mapbox solutions. Not only does mapbox-sdk-js get the job done effectively when bridging our APIs with our Maps SDK for React Native, it’s ideal for constructing cross-platform applications for web and cell.

To increase this to your task run this in your most loved command line:

npm i --help save url
npm i --help save mapbox

Considering the fact that React Native does not ship with the URL module that node will come with, you’ll will need to increase it as a polyfill, as effectively as involve the javascript SDK. Following you pull this into the task, it’s time to established your accessibility token, which is needed to use any of our applications, APIs, and SDKs.

const mapboxClient = new MapboxClient()

After the accessibility token is established, all the things is completely ready to make requests to our Directions API. In order to do this, you will have to know your commence coordinate and stop coordinate. We like to refer to these as origin and vacation spot.

If you would like to study much more about our request alternatives, see our documentation.

Now that you have directions in your application, it’s time to render them on to the map. In our kit, we designed a Directions React element that takes in origin, vacation spot, accessibility token, and callback for when directions are fetched. This element handles the total lifecycle of fetching information to rendering it on the map.

This is our render function inside of the element:

The directions item returns with a handy geometry property as a LineString, so we’re ready to right increase this item as the shape to our supply. Your route line will then be rendered on your map absolutely nothing else is expected.

Get started with the React Native Store Locator Kit

Look at out our Github repo for comprehensive guidelines on constructing with the kit. This is the initially of quite a few plug-and-enjoy “kits” we’re releasing for React Native so stay tuned. If you have thoughts or strategies, hit us up on Twitter or Github.

Mexico & Planet Map

Leave a Reply

Your email address will not be published.