Mappls Maps SDK for React Native

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.

Version History

| Version | Last Updated | Author | | ---- | ---- | ---- | | 1.0.5 | 02 May 2023 |Mappls API Team| | 1.0.4 | 12 April 2023 |Mappls API Team| | 1.0.3 | 24 November 2022 |Mappls API Team| | 1.0.2 | 19 October 2022 |Mappls API Team| | 1.0.1 | 08 September 2022 |Mappls API Team| | 1.0.0 | 24 August 2022 |Mappls API Team|

API Usage

Your Mappls Maps SDK usage needs a set of license keys (get them here) and is governed by the API terms and conditions. As part of the terms and conditions, you cannot remove or hide the Mappls logo and copyright information in your project.

The allowed SDK hits are described on the user dashboard page. Note that your usage is shared between platforms, so the API hits you make from a web application, Android app or an iOS app all add up to your allowed daily limit.

Installation

Dependencies

• node
• npm
• React Native: recommended version 0.60 or greater npm

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

How to Add a MapView

import React, { Component } from "react";
import {View } from "react-native";
import  MapplsGL  from  'mappls-map-react-native';
MapplsGL.setMapSDKKey("");//place your mapsdkKey
MapplsGL.setRestAPIKey("");//your restApiKey
MapplsGL.setAtlasClientId("");//your atlasClientId key
MapplsGL.setAtlasClientSecret(""); //your atlasClientSecret key
MapplsGL.setAtlasGrantType("");
export default class App extends Component {
 render() {
 return (
 <View style={{flex:1}}>
 <MapplsGL.MapView style={{flex:1}} >
	 <MapplsGL.Camera
		 ref={c  => (this.camera = c)}
		 zoomLevel={12}
		 minZoomLevel={4}
		 maxZoomLevel={22}
		 centerCoordinate={[77.231409,28.6162]}
	 />
 </MapplsGL.MapView>
 </View>
 );
 }
}

For any queries and support, please contact:

Email us at [email protected]

Support Need support? contact us!