Place Picker 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 token from your API keys available in the dashboard in the sample code for interactive map development.
- This APIs follow OAuth2 based security.
- Access Token can 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 token is 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 Picker 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 pick places from the map. This SDK also has integrated Place Picker Plugin as optional component that enables one to narrow down to picked place by searching for it first and then changing the position of the resulting point on map to fine-tune the results.

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 pick or search places directly with or without Mappls Maps visual interface. 2. A mappls.placePicker() method to initiate the plugin and pick places from Mappls Maps. 3. Ability to get information from Mappls Place Picker plugin through a callback. 4. Include the Place Picker 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 Picker plugin¶

React¶

import { mappls, mappls_plugin } from "mappls-web-maps";
import { useEffect, useRef, useState } from "react";

const mapplsClassObject = new mappls();
const mapplsPluginObject = new mappls_plugin();

const PlacePickerPlugin = ({ map }) => {
  const placePickerRef = useRef(null);

  useEffect(() => {
    if (map && placePickerRef.current) {
      placePickerRef.current.remove();
      mapplsClassObject.removeLayer({ map, layer: placePickerRef.current });
    }
    var options = {
      map: map,
      location: { lat: 28.8787, lng: 77.08888 },
      search: true,
    };
    placePickerRef.current = mapplsPluginObject.placePicker(
      options,
      callback_method
    );

    function callback_method(e) {
      if (e.data) console.log(e.data);
      else console.log(e);
    }

    return () => {
      if (map && placePickerRef.current) {
        mapplsClassObject.removeLayer({ map, layer: placePickerRef.current });
      }
    };
  }, [map]);
};

const App = () => {
  const mapRef = useRef(null);
  const [isMapLoaded, setIsMapLoaded] = useState(false);

  const loadObject = { map: true, plugins: ["pickerPicker", "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" }}
    >
      {isMapLoaded && <PlacePickerPlugin 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: '<div  id="map"  style="width: 99%; height: 99vh; background-color: white;"></div>',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  mapObject: any;
  mapplsClassObject = new mappls();
  mapplsPluginObject = new mappls_plugin();

  mapProps = { center: [28.6330, 77.2194], traffic: false, zoom: 4, geolocation: false, clickableIcons: false }

  ngOnInit() {

    const loadObject = {
      map: true,
      plugins: ["placePicker"],
    };

    this.mapplsClassObject.initialize("<----- Add your token here ------>", loadObject, () => {
      this.mapObject = this.mapplsClassObject.Map({ id: "map", properties: this.mapProps });

      this.mapObject.on("load", () => {

           var options = {
           map: this.mapObject,
           location: { lat: 28.8787, lng: 77.08888 },
           search: true,
           };
          var picker = this.mapplsPluginObject.placePicker(options, callback_method);

          function callback_method(e: any) {
           if (e.data)  console.log(e.data);
           else console.log(e);
         }

        });

    });

  }
}

Mandatory Parameters¶

Place Options: any object containing any of the two following mandatory configurations values.
- map: object > vector map or raster map object from respective Mappls Map JS
OR¶
- location: (lat,lng) object // to get data without map.
callback: (method): to get data after location selection . If no callback method is specified, UI GET button will be hidden. In this case, the consuming app can get data by calling method getData().

Optional Parameters¶

Place Options: any object containing 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]
- geolocation: boolean value used to enable or disable current location selection . Default is true.
- closeBtn: (boolean): to give the option to close Place Picker (including hiding the top bar that has search & lower bar area that has the 'Done' button and related sub-text). Default is true.
- closeBtn_callback: A callback method that is called when user clicks on the close button at the top left. To provide a call to action upon user closing the Place Picker plugin and thus providing the ability to continue towards further action by the consuming app.
- search: (boolean): To enable / disable the integrated Place Search plugin. Default is true.
- topText: The banner text to show at the top as title of the Place Picker plugin. Default is Place Picker.
- pinImage: (URL) The PIN icon on the map.
- pinHeight: (number). To adjust the placement of the PIN icon on the map.

2. Calling Mappls Place Picker for programmatically fixed text¶

Following is an example of calling Mappls.placePicker() method programmatically for a fixed pair of coordinates rather than depending on a UI driven approach:

/*CALL for coordinates - LIKE THIS*/
this.mapplsPluginObject.placePicker({location:{lat:28.9898,lng:77.9898}},callback);

3. Method for removing place picker plugin with callback from map¶

Method¶

remove()

picker.remove();

4. Method for programmatically setting location within callback on map.¶

Method¶

setLocation()

picker.setLocation({lat:28.42424,lng:77.232323});

5. Method for getting location data from Place Picker plugin.¶

Description¶

This method is especially useful if no callback is given in options. As per the current status of the Place Picker plugin's UI (map view and placement of PIN on map), the location data is returned.

Method¶

getLocation()

picker.getLocation();

Response Structure of Place Picker Data¶

{   
        area: "India", //country information
    city: "New Delhi", // city of the pinned place.
    district: "South East Delhi District", // district of the pinned place.
    formatted_address: "Industrial Estate Phase 1, New Delhi, Delhi, India", // complete formatted address of the pinned place.
        houseName: "Equalisatcon Pump House", // house name of the pinned place.
        houseNumber: "", // house number of the pinned place.
    lat: "28.5237002235929", // latitude of the pinned place as per input coordinates.
    lng: "77.28024601936342", // longitude of the pinned place as per input coordinates.
    locality: "Okhla Industrial Estate Phase 1", // locality number of the pinned place.
    pincode: "110020", // PIN of the pinned place.
    poi: "BSES", // POI reference for the pinned place.
    poi_dist: "78", // Referenced POI's distance from the pinned place.
    responsecode: 200, // Response code of the Place Plugin
    state: "Delhi", // state of the pinned place.
    street: "Unnamed Road", // Street reference for the pinned place.
    street_dist: "16", // Referenced street's distance from the pinned place.
    subDistrict: "Kalkaji", // subdistrict of the pinned place.
    subLocality: "Block C", // sublocality of the pinned place.
    subSubLocality: "", // subsublocality of the pinned place.
    village: "" // village of the pinned place.
}

That's All !

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!