Skip to content

Latest commit

 

History

History
268 lines (191 loc) · 8.71 KB

Getting-Started.md

File metadata and controls

268 lines (191 loc) · 8.71 KB
Raw

Mappls React Native SDK

Easy To Integrate Maps & Location APIs & SDKs For Android Applications

Powered with India's most comprehensive and robust mapping functionalities.

  1. You can get your api key to be used in this document here: https://about.mappls.com/api/signup

  2. The sample code is provided to help you understand the basic functionality of Mappls maps & REST APIs working on Android native development platform.

  3. Explore through 200+ countries & territories with Global Search, Routing and Mapping APIs & SDKs by Mappls.

Getting Started

Installation

Dependencies

npm

npm install mappls-map-react-native --save

IOS Installation

React-Native >= 0.60.0

If you are using autolinking feature introduced in React-Native 0.60.0 you do not need any additional steps. Just run pod install and rebuild your project.

React-Native < 0.60.0

Using CocoaPods

To install with CocoaPods, add the following to your Podfile:

  # Mappls
  pod 'mappls-map-react-native', :path => '../node_modules/mappls-map-react-native'

  # Make also sure you have use_frameworks! enabled
  use_frameworks!

Then run pod install and rebuild your project.

If you cannot use use_frameworks! for some reason, please see our workaround - https://github.com/react-native-mapbox-gl/maps/pull/714

Android Installation

React-Native >= 0.60.0 If you are using autolinking feature introduced in React-Native 0.60.0 have to add only following lines in android/build.gradle file:-

  • We need to add an additional repository in order to get our dependencies.
allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven { url "https://jitpack.io" }
+       maven { url 'https://maven.mappls.com/repository/mappls/'}
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

React-Native < 0.60.0

react-native link should get you almost there,
however we need to add some additional lines to build.gradle.

1. android/build.gradle

We need to add an additional repository in order to get our dependencies.

  • https://jitpack.io
  • https://maven.mappls.com/repository/mappls/ 
allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
+       maven { url "https://jitpack.io" }
+       maven { url 'https://maven.mappls.com/repository/mappls/'}
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

Make sure that your buildscript > ext settings are correct. We want to be on 33 or higher:

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        compileSdkVersion = 33
        targetSdkVersion = 33
    }
}

Everything below should've been covered by react-native link,
however it never hurts to make sure it actually did what it was supposed to

2. android/app/build.gradle

Add project under dependencies

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
+   implementation project(':mappls-map-react-native')
}

You can set the Support Library version or the okhttp version if you use other modules that depend on them:

  • supportLibVersion "28.0.0"
  • okhttpVersion "3.12.1"

3. android/settings.gradle

Include project, so gradle knows where to find the project

rootProject.name = <YOUR_PROJECT_NAME>

+include ':mappls-map-react-native'
+project(':mappls-map-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/mappls-map-react-native/android/rctmgl')

include ':app'¬

4. android/app/src/main/java/com/PROJECT_NAME/MainApplication.java

We need to register our package

Add import com.mappls.sdk.maps.rctmgl.RCTMGLPackage;
as an import statement and
new RCTMGLPackage() within the getPackages() method

package <YOUR_PROJECT_NAME>;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
+import com.mappls.sdk.maps.rctmgl.RCTMGLPackage;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
+         new RCTMGLPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

Added Import

import MapplsGL from 'mappls-map-react-native';

Add your API keys to the SDK

Add your API keys to the SDK before using map

MapplsGL.setMapSDKKey(mapSDKKey); //place your mapsdkKey
MapplsGL.setRestAPIKey(restAPIKey); //your restApiKey
MapplsGL.setAtlasClientId(atlasClientId); //your atlasClientId key
MapplsGL.setAtlasClientSecret(atlasClientSecret); //your atlasClientSecret key

You cannot use the Mappls Map React Native SDK without these function calls. You will find your keys in your API Dashboard.

Add a Mappls Map to your application

<MapplsGL.MapView
  onMapError={error => console.log(error.code + ' ' + error.message)}
  style={{flex: 1}}>
    <MapplsGL.Camera
      zoomLevel={12}
      centerCoordinate={DEFAULT_CENTER_COORDINATE}
    />
</MapplsGL.MapView>




For any queries and support, please contact:

Email us at [email protected]

Support Need support? contact us!





@ Copyright 2022 CE Info Systems Ltd. All Rights Reserved.