Mapbox – A Walk Through Guide For React Native

An open-source mapping platform for custom-designed maps in any mobile or web app.

The Mapbox Maps SDK for React Native is a cross-platform solution for building mapping and location into Android and iOS apps. This guide will walk you through the basics of working with the Maps SDK for React Native, including how to customize your map, add annotations with callouts, and display a user’s location on a map.

How to initialize a map

To display a map you’ll need an access token. It uses access tokens to associate requests to API resources with your account. As soon as you have imported it, you should set your access token using open source mapping Mapbox. set access token().

Installation React native

npm install @mapbox/react-native-mapbox-gl –save

Map display code:

import React, { Component } from ‘react’; import { StyleSheet, View } from ‘react-native’; import Mapbox from ‘@mapbox/react-native-mapbox-gl’; Mapbox.setAccessToken(‘pk.eyJ1IjoiZ2FuZ2EwMTEwMTk5NCIsImEiOiJjamRmcGhqbGkwYXJ4MndwZ3pqNGk2NWxmIn0.y2JRSWrw2joNBB4i_tw2xg’);
export default class App extends Component<{}> { render() { return (     ); }}

Parameters

Display Users Location open source mapping

renderAnnotations () { return ( 

    ) }

render() { return (  

{this.renderAnnotations()}   ); }

Setting Bounds for map-view

Set up one reference variable for your mapview

ref={c => (this.map = c)}

this.map.fitBounds(

NE,

SW

);

Resources

You’ll also need these specific resources before you start developing open source mapping:

• A Mapbox account and access token. Sign up for an account at com/signup for open source mapping. You can find your access tokens on your Account page.
• Mapbox Maps SDK for React Native. Install the Maps SDK for React Native using these installation instructions.