Skip to content

Place Details 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.

  1. 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.
  2. The sample codes are provided on our domain to help you understand the very basic functionality of Mappls PIN (eLoc) 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 render details of a particular place. The Place Details plugin for MapmyIndia Web Map JS library is provided as a means to enable rendering of MapmyIndia Places on MapmyIndia 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 map implementation. Thus it enables developers to include MapmyIndia Places SDK in their own customized solutions easily.

The SDK offers the following basic functionalities: 1. Ability to render places directly on map with reference to the provided eLoc(s). 2. A getPinDetails() method to fetch the details of a place. 3. Customizable markers 4. Remove markers from map.

Live Demo

Visit the following link for visiting the live demo:

Web sdk implementation Mappls Live Demo

React JS Implementation Live Video : CodeSandbox

For detailed understanding, Let’s get started!

Add the Place Details plugin

Implementation

React JS

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

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

const PlacedetailsPlugin = ({ map }) => {
  const placedetailsRef = useRef(null);

  useEffect(() => {
    if (map && placedetailsRef.current) {
      placedetailsRef.current.remove();
      mapplsClassObject.removeLayer({ map, layer: placedetailsRef.current });
    }

    placedetailsRef.current = mapplsPluginObject.getPinDetails(
      { pin: "mmi000" },
      (e) => {
        console.log(e); /* get details in console */
      }
    );
    return () => {
      if (map && placedetailsRef.current) {
        mapplsClassObject.removeLayer({ map, layer: placedetailsRef.current });
      }
    };
  }, [map]);
};

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

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

  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 && <PlacedetailsPlugin 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:'',
    styleUrls: ['./app.component.css'],
  })
  export class AppComponent implements OnInit {
    mapplsClassObject = new mappls();
    mapplsPluginObject = new mappls_plugin();


    ngOnInit() {
      const loadObject = {
        map: false,
        plugins: ['getPinDetails'],
      };

      this.mapplsClassObject.initialize(
        '<----- Add your token here ------>',
        loadObject,
        () => {

            var elocObj = this.mapplsPluginObject.getPinDetails(
              { pin: 'mmi000' },
              (e: any) => {
                console.log(e);
              }
            );

        }
      );
    }
  }

Mandatory Parameters

  1. pin: The pin (Mappls Pin/Eloc) whose details are required.
  2. callback: to return data to a specified callback method.

Optional Parameters

  1. map: Map Object
  2. icon: custom icon url.
  3. divId: The div to put the result in.
  4. markerPopup (boolean): to show pop-ups on marker click. Default is true.(example: markerPopup:true)
  5. popupHtml: to show html pop up on marker click. User should define values to be shown while using this parameter.(example: obj.setPopup({content:"<h1>Hello MapmyIndia</h1>"}))
  6. fitbounds (boolean): To show all rendered eLoc(s) in a single view bound. (example: fitbounds:true)
  7. fitboundOptions : padding in fitbounds, if any. (Example: { padding:50,maxZoom:18})
  8. infoDiv (boolean): To render html div on map or not. Default is true. (example: infoDiv:true)
  9. click_callback: method to call on click of callback.

3. Method to remove the markers with callback populated by Place Details Plugin

getPinDetailsObj.remove();

4. Method to set up the div content for populating details from getPinDetails() plugin

getPinDetailsObj.setDivContent(“Div html);

5. Method to set up the pop up content on marker as html.

For Eg:

getPinDetailsObj.setPopup({content:"<h1>Hello Mappls</h1>"});

That's All !

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!



© Copyright 2023 CE Info Systems Ltd. All Rights Reserved.