CedarMasp SDK for React Native
What is CedarMaps?
CedarMaps is the location data platform for mobile and web applications. We provide building blocks to add location features like maps, search, and navigation into any experience you create. Use our simple and powerful APIs & SDKs and our open source libraries for interactivity and control.
Sign up for CedarMaps
Not a CedarMaps user yet? Sign up for an account here. Once you’re signed in, all you need to start building is a CedarMaps access token.
This guide will take you through the process of integrating CedarMaps into your React Native application.
All the mentioned methods and tools in this document are tested on Android Studio v3.2.1 and Xcode 10.1.
Table of Contents
Installation
Dependencies
- node
- npm
- React Native recommended version 0.50 or greater
Npm
npm install @cedarstudios/react-native-cedarmaps --save
Platform Specific Installation Guides
Initializing a Map
Once you’ve set up your development environment, created a new React Native project, and installed the CedarMaps SDK for React Native, you’re ready to initialize a map in your App.js file.
First, you’ll import the components that you will need. This includes components from React, React Native, and CedarMaps.
To display a map you’ll need CedarMaps credentials (clientID and clientSecret). CedarMaps uses an access token generated from these to associate requests to API resources with your account.
Use the CedarMaps.MapView component to initialize your map. The MapView component will add a map to the view, and you can add props to specify some parameters for the map including the map style, zoom level, and center of the map.
Here’s the complete code to display a map:
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import CedarMaps from '@cedarstudios/react-native-cedarmaps';
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<CedarMaps
clientId={"YOUR_CLIENT_ID"}
clientSecret={"YOUR_CLIENT_SECRET"}
mapStyle={"style://streets-light"}
mapBaseUrl={"YOUR_BASE_URL"} //If you have received an API Base URL. (Optional)
zoomLevel={15}
centerCoordinate={[51.4093, 35.7546]}
style={styles.container}>
</CedarMaps>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
});Other possible values for mapStyle are:
Vector Tiles (Recommended)
style://streets-lightstyle://streets-dark
Raster Tiles
style://streets-light-raster
Documentation
CedarMaps SDK is based on Mapbox Maps SDK for React Native v6.1.3 and provides extra API methods over Mapbox. For more information about how to use MapView and other components such as Adding Markers, Showing Current Location, etc., please see Mapbox for React Native First Steps.
Functions
- getMapbox():
You can get main mapbox object (react-native-mapbox-gl) via
getMapbox()functions attached to CedarMaps