Mapbox – A walk through guide for React native

by Arun Kumar

on June 22, 2018

Introduction

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.

 

Subscribe to our Newsletter

 

  • Share this Article

GET IN TOUCH WITH iLEAF

  • We can initiate development process at the hour of your convenience
  • Discussion on the projects can be held for a stipulated duration
  • We will sign NDA and the talks will be secured
  • We’ll show you around our cherished designs
  • Briefing on technology
  • Guaranteed source code delivery
  • Option to re-start a closed venture

See how we can unwrap your app idea and proceed towards success