_An unofficial React Native component for building maps with the [Mapbox Maps SDK for iOS](https://www.mapbox.com/ios-sdk/) and [Mapbox Maps SDK for Android](https://www.mapbox.com/android-sdk/)_
# CedarMasp SDK for React Native
## What is CedarMaps?
CedarMaps is the location data platform for mobile and web applications. We provide [building blocks](https://www.cedarmaps.com) 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](https://www.cedarmaps.com/#demo). 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](#installation)
-[Platform Specific Guides](#platform-specific-installation-guides)
-[MapView](#initializing-a-map)
-[Documentation](#documentation)
-[Components](#components)
-[Sources](#sources)
-[Layers](#layers)
## Installation
...
...
@@ -10,59 +35,51 @@ _An unofficial React Native component for building maps with the [Mapbox Maps SD
*[npm](https://www.npmjs.com/)
*[React Native](https://facebook.github.io/react-native/) recommended version 0.50 or greater
*[Mapbox Example](https://github.com/mapbox/react-native-mapbox-gl/blob/master/example)(Not using CedarMaps; for demonstration purposes)
*[iOS](ios-install.md)
## Initializing a Map
Once you’ve set up your development environment, created a new React Native project, and installed the Mapbox Maps SDK for React Native, you’re ready to initialize a map in your App.js file.
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 Mapbox. To display a map you’ll need a CedarMaps access token. CedarMaps uses access tokens to associate requests to API resources with your account. As soon as you have imported Mapbox, you should set your CedarMaps access token using Mapbox.setAccessToken().
First, you’ll import the components that you will need. This includes components from React, React Native, and CedarMaps.
Then, use the Mapbox.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.
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.
CedarMaps SDK is based on [Mapbox Maps SDK for React Native v6.1.3](https://github.com/mapbox/react-native-mapbox-gl) 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](https://www.mapbox.com/help/first-steps-react-native-sdk/).
Add Mapbox Native Maps SDK project under `dependencies`. Due to an issue on Mapbox side, make sure to force this dependency to use ```okhttp v3.6.0```.
Update Android SDK version if you did `react-native init`, we want to be on `26` or higher.
*`compileSdkVersion 26`
*`buildToolsVersion "26.0.1"`
*`buildToolsVersion "26.0.3"`
*`targetSdkVersion 26`
### settings.gradle
...
...
@@ -45,8 +45,8 @@ Update Android SDK version if you did `react-native init`, we want to be on `26`
Include project, so gradle knows where to find the project
```
include ':mapbox-react-native-mapbox-gl'
project(':mapbox-react-native-mapbox-gl').projectDir = new File(rootProject.projectDir, '../node_modules/@mapbox/react-native-mapbox-gl/android/rctmgl')
include ':react-native-mapbox-gl'
project(':react-native-mapbox-gl').projectDir = new File(rootProject.projectDir, '../node_modules/@cedarstudios/react-native-mapbox-gl/android/rctmgl')
```
### MainApplication.java
...
...
@@ -57,7 +57,8 @@ Add `import com.mapbox.rctmgl.RCTMGLPackage;` as an import statement and
`new RCTMGLPackage()` in `getPackages()`
Here is an example
```
```java
packagecom.rngltest;
importandroid.app.Application;
...
...
@@ -101,4 +102,3 @@ public class MainApplication extends Application implements ReactApplication {
}
}
```
\ No newline at end of file
Checkout the [example application](../example/README.md) to see how it's configured for an example.