Mapbox – A walk through guide for React native

Blog Author - Arunkumar M G

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 initialise a map

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

MapBox 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 (
<View style={{flex:1}>
<Mapbox.MapView
styleURL={Mapbox.StyleURL.Street}
zoomLevel={15}
centerCoordinate={[11.256, 43.770]}
style={styles.container}>
</Mapbox.MapView>
</View>
);
}}

Parameters for MapBox

Display Users Location

renderAnnotations () {
return (
<Mapbox.PointAnnotation
key='pointAnnotation'
id='pointAnnotation'
coordinate={[11.254, 43.772]}>

<View style={styles.annotationContainer}>
<View style={styles.annotationFill} />
</View>
</Mapbox.PointAnnotation>
)
}

render() {
return (
<View style={{flex:1}>
<Mapbox.MapView
styleURL={Mapbox.StyleURL.Street}
zoomLevel={15}
centerCoordinate={[11.256, 43.770]}
style={styles.container}>

{this.renderAnnotations()}
</Mapbox.MapView>
</View>
);
}

Setting Bounds for map-view

Set up one reference variable for your mapview

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

this.map.fitBounds(

NE,

SW

);

MapBox Resources

You’ll also need these Mapbox-specific resources before you start developing:

  • A Mapbox account and access token. Sign up for an account at com/signup. 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.

Get a Free Consultation