Mappls-web-maps NPM

Introduction

Easy To Integrate Maps & Location APIs & SDKs For Web & Mobile Applications

Explore through 238 nations with Global Search, Routing and Mapping APIs & SDKs powered with India's most comprehensive and robust mapping functionalities.

Create your own Angular/React/Ionic/Cordova Based native app powered by Mappls Maps and deploy them to various platforms be it web or native mobile platforms.

Package name : mappls-web-maps

Sign up for Mappls

Not a mappls user yet? Sign up for an account here. Once you’re signed in, all you need to start building is a mappls key. You can create and manage your access tokens on your Mappls Account page.

API Usage

Your MapmyIndia 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 MapmyIndia logo and copyright information in your project. Please see branding guidelines on MapmyIndia website for more details. The allowed SDK hits are described on the plans 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.

Version History

Version	Last Updated	Author	Remarks
3.5.8	02 Sep. 2024	MapmyIndia API Team	Initial Commit

Supported Technologies

Node.js, Angular, React JS, Cordova, Ionic

Supported Platforms

Web
Android
iOS

Installation

npm  i  mappls-web-maps

Import Package

Angular : Import mappls class from "mappls-web-maps" package i.e. app.component.ts ( or other component of your use case ) .

import { mappls } from 'mappls-web-maps';

React JS : Import mappls class from "mappls-web-maps" package inside app.js ( or other component of your use case ) .

import { mappls } from  'mappls-web-maps'

Usage

Loading a Map

Angular / Cordova / Ionic

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { mappls, mappls_plugin } from 'mappls-web-maps';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
  <div id="map" style="width: 100%; height: 97vh;">
  </div>
`,
})
export class AppComponent implements OnInit {
  mapobject:any
  mapplsClassObject:any= new mappls()
  mapplsPluginObject:any= new mappls_plugin()
  title = 'Map_angular';


  ngOnInit() {
    const loadObject = {
      map: true,
      version: '3.0', 
      libraries: [''], // Optional for ie. Polydraw/mapSnapshot/airspaceLayers
      plugins: [''], // Optional for any plugins ie. direction

    };

  this.mapplsClassObject.initialize(
    '---------------Token------------------',
    loadObject,
    () => {
      this.mapobject = this.mapplsClassObject.Map({
        id: 'map',
        properties: {
          center: [28.61, 77.23],
          zoomControl: true,
          location: true,
        },
      });
    }
    
  );
  }
}

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 App = () => {
  const mapRef = useRef(null);
  const [isMapLoaded, setIsMapLoaded] = useState(false);

  const loadObject = { 
    map: true, 
    layer: 'raster', // Optional Default Vector
    version: '3.0', // // Optional, other version 3.5 also available with CSP headers
    libraries: ['polydraw'], //Optional for Polydraw and airspaceLayers
    plugins:['direction'] // Optional for All the plugins
};

  useEffect(() => {
    mapplsClassObject.initialize("--------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}
    </div>
  );
};

export default App;

Learn about Features

Components - Map - Properties - Methods - Events

	 - [Remove Layer]()
	 - [Markers](https://github.com/mappls-api/mappls-web-maps/blob/main/components/markers.md)
		 - [Adding a marker](https://github.com/mappls-api/mappls-web-maps/blob/main/components/markers.md#1--adding-a-marker)
		 - [Marker Methods](https://github.com/mappls-api/mappls-web-maps/blob/main/components/markers.md#2-marker-methods)
		 - [Marker Events](https://github.com/mappls-api/mappls-web-maps/blob/main/components/markers.md#3-marker-events)
		 - [Adding Multiple Markers](https://github.com/mappls-api/mappls-web-maps/blob/main/components/markers.md#iv-adding-multiple-markers)
	 - [InfoWindows](https://github.com/mappls-api/mappls-web-maps/blob/main/components/infowindow.md)
	 - [Polylines](https://github.com/mappls-api/mappls-web-maps/blob/main/components/polyline.md)
	 - [Polygons](https://github.com/mappls-api/mappls-web-maps/blob/main/components/polygons.md)
	 - [Circle](https://github.com/mappls-api/mappls-web-maps/blob/main/components/circle.md)
	 - [Overlay](https://github.com/mappls-api/mappls-web-maps/blob/main/components/polyline.md)
		 - [Geojson](https://github.com/mappls-api/mappls-web-maps/blob/main/components/polyline.md)
		 - [KML](https://github.com/mappls-api/mappls-web-maps/blob/main/components/overlays.md)
		 - [Heat Map](https://github.com/mappls-api/mappls-web-maps/blob/main/components/heatmap.md)