Mappls Search Widget¶

Version History ¶

Version	Last Updated	Author	Release Note
v2.0.0	29 Sep, 2025	Mappls API Team (MA) (ST)	- Authentication and authorization mechanisms have been revised. - Updated minimum Android version to 21. - Added Support for 16 KB Page Sizes - Added SPM(Swift Package Manager Support) for IOS.

Installation¶

First install mappls-search-widgets-react-native:

npm install mappls-search-widgets-react-native

Install peerDependencies

npm install mappls-map-react-native

Android Setup¶

Click Here for Android Setup

IOS Setup¶

Click Here for IOS Setup
On iOS it's necessary to add $MAPPLS_SEARCH_WIDGETS.post_install(installer) to the post_install block in the ios/Podfile is necessary:

     post_install do |installer|
     # Other post install hooks...
     + $MAPPLS_SEARCH_WIDGETS.post_install(installer)
     end

Usage¶

Import¶

import  MapplsUIWidgets  from  'mappls-search-widgets-react-native'
import  MapplsGL  from  'mappls-map-react-native-beta';

PlacePicker ¶

  <MapplsUIWidgets.PlacePicker
      center={plcePickerCenter}
      zoom={10}
      searchWidgetProps={{backgroundColor:'#F0FFF0'}}
      pickerImage={{uri:'http://maps.google.com/mapfiles/ms/micons/blue.png'}}
      resultCallback={(res) => 
      //Do something with result
         }
   />

Request Props¶

center :(number) place picker center coordinate(optional) note- if center is not provided map will zoom to current location of user.
zoom:(number) place picker map zoom level (optional)
pickerImage :place picker marker image. You can use static images or image urls.(optional)
searchWidgetProps :(object) custom configuration for search widget props inside place picker.(optional)
resultCallback:(function) returns result of place picker

try{
 const res = await MapplsUIWidgets.searchWidget({toolbarColor:'#F5F5F5'});
 //Do something with result
 }catch(e){
   //error logs
     console.log(e);
  }

location(Array): set location around which your search will appear. Ex. [77.56,28.34]
filter(String): this parameter helps you restrict the result either by mentioning a bounded area or to certain eloc (6 digit code to any poi, locality, city, etc.), below mentioned are the both types:
- filter = bounds: lat1, lng1; lat2, lng2 (latitude, longitude) {e.g. filter("bounds: 28.598882, 77.212407; 28.467375, 77.353513")
- filter = cop: {mapplsPin} (string) {e.g. filter("cop:YMCZ0J")
historyCount(number): Maximum number of history results appear. (Android )
zoom(number): takes the zoom level of the current scope of the map (min: 4, max: 18).
saveHistory(Boolean): If it sets to true it shows the history selected data. (Android )
pod(String): 1. it takes in the place type code which helps in restricting the results to certain chosen type.Below mentioned are the codes for the pod
- MapplsUIWidgets.POD_SUB_LOCALITY
- MapplsUIWidgets.POD_LOCALITY
- MapplsUIWidgets.POD_CITY
- MapplsUIWidgets.POD_VILLAGE
- MapplsUIWidgets.POD_SUB_DISTRICT
- MapplsUIWidgets.POD_DISTRICT
- MapplsUIWidgets.POD_STATE
- MapplsUIWidgets.POD_SUB_SUB_LOCALITY
- tokenizeAddress(Boolean): provides the different address attributes in a structured object.
backgroundColor(HexColor): to set the background color of the widget
toolbarColor(HexColor): to set the toolbar color of the widget.
hint(String): To set the hint on the Search view of the widget.
hyperLocal(Boolean): This parameter lets the search give results that are hyper-localized to the reference location passed in the location parameter. This means that nearby results are given a higher ranking than results far from the reference location. Highly prominent results will still appear in the search results, however they will be lower in the list of results. This parameter will work ONLY in conjunction with the location parameter.