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 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.setAccessToken().

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

Display Users Location open source mapping

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

);

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.

Get a Free Consultation