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.

You can get your api key to be used in this document here: https://about.mappls.com/api/signup
The sample code is provided to help you understand the basic functionality of Mappls maps & REST APIs working on Android native development platform.
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>
 );
 }
}