Place Search Plugin for Mappls Web Maps¶
Easy To Integrate Maps & Location APIs & SDKs For Web & Mobile Applications
Powered with India's most comprehensive and robust mapping functionalities. Now Available for 200+ nations and territories accross the world.
Getting Access¶
Before using the Plugin in the your solution, please ensure that the related access is enabled in the Mappls Console, in the same project you set up for the Maps SDK.
- Copy and paste the generated
access tokenfrom your API keys available in the dashboard in the sample code for interactive map development.- This APIs follow OAuth2 based security.
Access Tokencan be generated using Token Generation API.- To know more on how to create your access tokens, please use our authorization API URL. More details available here
- The
access tokenis a valid by default for 24 hours from the time of generation. This can be configured by you in the API console.
- The sample codes are provided on our domain to help you understand the very basic functionality of Mappls Place Search Plugin. See Sample Codes here
Document Version History¶
| Version | Remarks | Author |
|---|---|---|
| 3.0 | Document Added | Mappls API Team (MS) |
| 3.0 | Document Update | SDK Product Team (PK) |
Introduction¶
A simple plugin / widget to search for places powered by the best online maps from Mappls. The Place Search plugin for Mappls Web Map JS library is provided as a means to enable searching of Places on Mappls Maps.
The plugin can be used in combination with our Interactive Map JS library but it also possesses the adaptability to be used as an independent plugin within any web app implementation. Thus it enables developers to include Mappls Places JS in their own customized solutions easily.
The SDK offers the following basic functionalities: 1. Ability to search for places directly with or without Mappls Maps visual interface. 2. A mappls.search() method to initiate search across all types places available on Mappls. 3. Ability to get information from Mappls Place Search plugin through a callback 4. Include the Place Search Plugin with or without an interactive Map component.
Live Demo¶
Visit the following link for visiting the live demo:
Web sdk implementation : Mappls Live Demo
React JS Implementation Live Video : CodeSandbox
Add the Place Search plugin¶
Implementation¶
React¶
import { mappls, mappls_plugin } from "mappls-web-maps";
import { useEffect, useRef, useState } from "react";
const mapplsClassObject = new mappls();
const mapplsPluginObject = new mappls_plugin();
var callback;
const PlaceSearchPlugin = ({ map }) => {
const placeSearchRef = useRef(null);
useEffect(() => {
if (map && placeSearchRef.current) {
mapplsClassObject.removeLayer({ map, layer: placeSearchRef.current });
}
var optional_config = {
location: [28.61, 77.23],
region: "IND",
height: 300,
};
placeSearchRef.current = mapplsPluginObject.search(
document.getElementById("auto"),
optional_config,
callback
);
callback = (data) => {
console.log(data); /* get search data in console */
};
return () => {
if (map && placeSearchRef.current) {
mapplsClassObject.removeLayer({ map, layer: placeSearchRef.current });
}
};
}, [map]);
};
const App = () => {
const mapRef = useRef(null);
const [isMapLoaded, setIsMapLoaded] = useState(false);
const auto = {
width: "300px",
position: "absolute",
zIndex: 999,
fontSize: "15px",
padding: "10px",
border: "1px solid #ddd",
outline: "none !important",
};
const loadObject = { map: true, plugins: ["search"] };
useEffect(() => {
mapplsClassObject.initialize("<Add your Token>", loadObject, () => {
const newMap = mapplsClassObject.Map({
id: "map",
properties: {
center: [28.633, 77.2194],
zoom: 4,
},
});
newMap.on("load", () => {
setIsMapLoaded(true);
});
mapRef.current = newMap;
});
return () => {
if (mapRef.current) {
mapRef.current.remove();
}
};
}, []);
return (
<div
id="map"
style={{ width: "100%", height: "99vh", display: "inline-block" }}
>
<input
style={auto}
type="text"
id="auto"
name="auto"
className="search-outer form-control as-input"
placeholder="Search places or eLoc's..."
required=""
spellCheck="false"
/>
{isMapLoaded && <PlaceSearchPlugin map={mapRef.current} />}
</div>
);
};
export default App;
Angular¶
import { Component, OnInit } from '@angular/core';
import { mappls, mappls_plugin } from 'mappls-web-maps';
@Component({
selector: 'app-root',
template: `
<style>
#auto { color: #000; max-width: 99%; width: 300px; position: absolute; z-index: 999; font-size: 15px; padding: 10px; border: 1px solid #ddd; outline: none !important; top: 5px; border-radius: 10px; margin: 4px; }
</style>
<div
id="map"
style="width: 99%; height: 99vh; background-color: white;"
></div>
<input
type="text"
id="auto"
name="auto"
class="search-outer form-control as-input"
placeholder="Search places or eLoc's..."
required=""
spellcheck="false"
/>
`,
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
mapObject: any;
marker: any;
callback: any;
data: any;
mapplsClassObject = new mappls();
mapplsPluginObject = new mappls_plugin();
ngOnInit() {
const loadObject = {
map: false,
plugins: ['search'],
};
this.mapplsClassObject.initialize(
'<----- Add your token here ------>',
loadObject,
() => {
//
var optional_config = {
location: [28.61, 77.23],
region: 'IND',
height: 300,
};
this.mapplsPluginObject.search(
document.getElementById('auto'),
optional_config,
this.callback
);
}
);
this.callback = (data: any) => {
console.log(data);
};
}
}
Mandatory Parameters¶
inputQuery: The string which will be passed as input query to the search engine.
Optional Parameters¶
Place Options: Optional configurations for modifying the search request.location: location coordinates which will be used as radial bias (not restriction; only BIAS). e.g.location:[28.61, 77.23]pod: Place type which you want to restrict the results by. e.g.pod:'city'. Valid values are:- SLC (sub locality)
- LC (locality)
- CITY
- VLG (village)
- SDIST (sub district)
- DIST (district)
- STATE
- SSLC (sub sub locality)
filter: a parameter to restrict results by. e.g.filter:'cop:9qgxam'- Can be used to filter results by PIN code. e.g.
pin:110055 - Can be used to filter results by eLoc. e.g.
cop:9qgxam - Can be used to filter results by view bound. e.g.
filter=bounds:28.598882,77.212407;28.467375,77.353513
- Can be used to filter results by PIN code. e.g.
bridge: initiates a bridge to be created to provide applicable nearby API searches. Involves using Nearby Search Plugin in conjunction with Place Search Plugin.hyperLocal: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 higher ranking than results far from the reference location. Highly prominent results will still appear in the search results, however theu will be lower in the list of results. This parameter will work ONLY in conjunction with the location parameter.tokenizeAddress: boolean value used to return address tokens from the searched places from Mappls Search APIs. e.g.tokenizeAddress:truedistance: boolean value used to show aerial distance from location passed inlocation. of the searched place in results listing e.g.distance:truegeolocation: boolean value used to enable or disable current location selection . Default is true.width: width of the suggested div. e.g.width:300height: height of the suggested div. e.gheight:300clearButton: clear the value of input box. Default is true.
callback: callback to get results/error after call or selection.blank_callback: callback when user clicks the cross button or erase the value of input box.
2. Calling Mappls Place Search for programmatically fixed text¶
Following is an example of calling Mappls.search() method programmatically for a fixed text rather than depending on a UI driven approach:
/*CALL for fix text - LIKE THIS*/
var search = this.mapplsPluginObject.search("agra",placeOptions,callback);
That's All !
For any queries and support, please contact:
Email us at apisupport@mappls.com
Support
Need support? contact us!
