Mappls Web Maps - For Angular/ Ionic / Cordova

Map Component

The Mappls Web Maps enables the creation and customization of interactive maps for both India and the global context. Developed by Mappls (MapmyIndia) India's leading Map provider, this is designed to produce mobile-friendly maps with a user-friendly interface and excellent performance. It consists of a set of classes and functions that allow developers to incorporate a wide range of map features into their web and mobile applications.

React JS Implementation Live Video : CodeSandbox

1. Properties

map method - There are 4 mandatory parameters to use this method.

Map div #id // with proper css width & height`*
Token/Rest-Key to load the Map
Map Properties
Callback Function

Code Snippet for adding the map component

mapplsClassObject.map(
    { 
        id:  "map", 
        key:'token/rest-key',
        properties: 
        {
            center: [28.6330, 77.2194]
        }
    },
    // Callback Method : Load all other components inside this it initilizes after map load
    // it also returns map object
(data)=>{ mapObject = data }
);

Optional Parameters

There are several map parameters which can be used with map methods to meet any application requirements.

mapplsClassObject.map(
    { 
        id:  "map", 
        key:'token',
        properties: 
            { 
                //Properties Object
                center:  [28.544,77.5454], // the coordinates as [lat, lon]
                draggable:  true, // toggle draggable map
                zoom:  5, //the initial Map `zoom` level.
                minZoom:  8, //  minimum zoom level which will be displayed on the map
                maxZoom:  15, //  maximum zoom level which will be displayed on the map
                backgroundColor:  '#fff', // used for the background of the Map div.
                heading:  100, // The `heading` for aerial imagery in degrees
                traffic:  true, // To show traffic control on map.
                geolocation:  true, // to display the icon for current location
                // Controls
                disableDoubleClickZoom:  true, // enables/disables zoom and center on double click.
                fullscreenControl:  true, // It shows the icon of the full screen on the map
                scrollWheel:  true, // If false, disables zooming on the map using a mouse scroll
                scrollZoom:  true, // if `false` scroll to zoom interaction is disabled.
                rotateControl:  true. // enable/disable of the map.
                scaleControl:  true, // The initial enabled/disabled state of the Scale control.
                zoomControl:  true  // The enabled/disabled Zoom control at a fixed position
                zoomControlOptions: 
                    {
                        position:mappls.ControlPosition.RIGHT_CENTER
                    },
                //Possible Values : TOP_CENTER, `TOP_LEFT`, `TOP_RIGHT`, `LEFT_TOP`, `RIGHT_TOP`, `LEFT_CENTER`, `RIGHT_CENTER`, `LEFT_BOTTOM`, `RIGHT_BOTTOM`, `BOTTOM_CENTER`, `BOTTOM_LEFT`, `BOTTOM_RIGHT``
                clickableIcons:  true,  //to make the icons clickable
                indoor:  true, // To show indoor floor plans in MapmyIndia Vector SDK.
                indoor_position:  'bottom-left',
                //Possible Values : TOP_CENTER, `TOP_LEFT`, `TOP_RIGHT`, `LEFT_TOP`, `RIGHT_TOP`, `LEFT_CENTER`, `RIGHT_CENTER`, `LEFT_BOTTOM`, `RIGHT_BOTTOM`, `BOTTOM_CENTER`, `BOTTOM_LEFT`, `BOTTOM_RIGHT``
                tilt:  30,//tilt : Controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are 0 to 85.
            },
            (data)=>{ mapObject = data }

2. Map Methods

getBounds : Returns the lat/lng bounds of the current viewport.
Example Usage
- Angular / Cordova / Ionic
```
this.mapObject.getBounds();
```
- React js
```
mapObject.getBounds();
```
getCenter : Returns the position displayed at the center of the map in the form of coordinates. Example Usage
- Angular / Cordova / Ionic
```
this.mapObject.getCenter();
```
- React js
```
mapObject.getCenter();
```
setCenter : Sets the map’s geographical center point. Example Usage
- Angular / Cordova / Ionic
```
 this.mapObject.setCenter([77.2689,28.5507]);
```
- React js
```
mapObject.setCenter([77.2689,28.5507]);
```
getDiv : Returns the information of the div on which map is set. Example Usage
- Angular / Cordova / Ionic
```
this.mapObject.getDiv();
```
- React js
```
mapObject.getDiv();
```
getHeading : Returns the compass heading of aerial imagery. Example Usage
- Angular / Cordova / Ionic ``` this.mapObject.getHeading();
- React js
```
mapObject.getHeading();
```
getZoom : Returns the current zoom level. Example Usage
- Angular / Cordova / Ionic
```
this.mapObject.getZoom();
```
- React js
```
mapObject.getZoom();
```
panBy : Changes the center of the map by the given distance in pixels. If the distance is less than both the width and height of the map, the transition will be smoothly animated. Example Usage
- Angular / Cordova / Ionic
```
this.mapObject.panBy([77.2689,28.5507]);
```
- React js
```
mapObject.panBy([77.2689,28.5507]);
```
panTo : Changes the center of the map to the given geolocation. Example Usage
- Angular / Cordova / Ionic
```
this.mapObject.panTo([77.2689,28.5507]);
```
- React js
```
mapObject.panTo([77.2689,28.5507]);
```
setheading : Sets the compass heading for aerial imagery measured in degrees from cardinal direction North. Example Usage
- Angular / Cordova / Ionic
```
this.mapObject.setheading(60);
```
- React js
```
mapObject.setheading(60);
```
setZoom : Sets the Zoom level of the current Map. Example Usage
- Angular / Cordova / Ionic
```
    this.mapObject.setZoom(15);
```
- React js
```
mapObject.setheading(15);
```
setTilt : Controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are 0 to 85. Example Usage
- Angular / Cordova / Ionic
```
this.mapObject.setTilt(15);
```
- React js
```
mapObject.setTilt(15);
```
getTilt : Returns the current angle of incidence of the map, in degrees from the viewport plane to the map plane. Example Usage
- Angular / Cordova / Ionic
```
this.mapObject.getTilt();
```
- React js
```
mapObject.getTilt();
```
loaded : Returns a Boolean indicating whether the map is fully loaded. Returns false if the style is not yet fully loaded, or if there has been a change to the sources or style that has not yet fully loaded. Example Usage
- Angular / Cordova / Ionic
```
this.mapObject.loaded();
```
- React js
```
mapObject.loaded();
```
setToken : Returns a Boolean indicating whether the token set or not.
Returns false if the token is not valid else return true.

3. Map Events - Listening to Map Events

`Event Types`:

addListener : To pass Event & callback
clearListeners : Used to remove Event
addListenerOnce : Same as addListener but call once

Lets Learn how to use them.

1. addListener Event

load : Fired when map is loaded completely. Example Usage

Angular / Cordova / Ionic

this.mapObject.addListener('load', function () { console.log('load');});

React js

mapObject.addListener('load', function () { console.log('load');});

click : Fired when a pointing device (usually a mouse) is pressed and released at the same point on the map. Example Usage
- Angular / Cordova / Ionic
```
this.mapObject.addListener('click', function () { console.log('click');});
```
- React js
```
mapObject.addListener('click', function () { console.log('load');});
```

dblclick : Fired when a pointing device (usually a mouse) is clicked twice at the same point on the map. Example Usage

Angular / Cordova / Ionic

this.mapObject.addListener('dblclick', function () { console.log('dblclick');});

React js

mapObject.addListener('dblclick', function () { console.log('dblclick');});

drag : Fired repeatedly during a “drag to pan” interaction. Example Usage

Angular / Cordova / Ionic

this.mapObject.addListener('drag', function () { console.log('drag');});

React js

mapObject.addListener('drag', function () { console.log('drag');});

dragstart : Fired when a “drag to pan” interaction starts. Example Usage

Angular / Cordova / Ionic

this.mapObject.addListener('dragstart', function () { console.log('dragstart');});

React js

mapObject.addListener('dragstart', function () { console.log('dragstart');});

dragend : Fired when a “drag to pan” interaction ends. Example Usage

Angular / Cordova / Ionic

this.mapObject.addListener('dragend', function () { console.log('dragend');});

React js

mapObject.addListener('dragend', function () { console.log('dragend');});

idle : Fired after the last frame rendered before the map enters an “idle” state:
- No camera transitions are in progress
- All currently requested tiles have loaded
- All fade/transition animations have completed
Example Usage
- Angular / Cordova / Ionic
```
this.mapObject.addListener('idle', function () { console.log('idle');});
```
- React js
```
mapObject.addListener('idle', function () { console.log('idle');});
```

mousemove : Fired when a pointing device (usually a mouse) is moved within the map. Example Usage

Angular / Cordova / Ionic

this.mapObject.addListener('idle', function () { console.log('idle');});

React js

mapObject.addListener('idle', function () { console.log('idle');});

mouseout : Fired when a point device (usually a mouse) leaves the map’s canvas Example Usage

Angular / Cordova / Ionic

this.mapObject.addListener('idle', function () { console.log('idle');});

React js

mapObject.addListener('idle', function () { console.log('idle');});

mouseover : Fired when a pointing device (usually a mouse) is moved within the map. Example Usage

Angular / Cordova / Ionic

this.mapObject.addListener('mouseover', function () { console.log('mouseover');});

React js

mapObject.addListener('mouseover', function () { console.log('mouseover');});

contextmenu : Fired when the right button of the mouse is clicked or the context menu key is pressed within the map. Example Usage

Angular / Cordova / Ionic

this.mapObject.addListener('contextmenu', function () { console.log('contextmenu');});

React js

mapObject.addListener('contextmenu', function () { console.log('contextmenu');});

wheel : Fired when a wheel event occurs within the map. Example Usage

Angular / Cordova / Ionic

this.mapObject.addListener('wheel', function () { console.log('wheel');});

React js

mapObject.addListener('wheel', function () { console.log('wheel');});

touchend : Fired when a touchend event occurs within the map. Example Usage

Angular / Cordova / Ionic

this.mapObject.addListener('touchend', function () { console.log('touchend');});

React js

mapObject.addListener('touchend', function () { console.log('touchend');});

move : Fired repeatedly during an animated transition from one view to another. Example Usage

Angular / Cordova / Ionic

this.mapObject.addListener('move', function () { console.log('move');});

React js

mapObject.addListener('move', function () { console.log('move');});

moveend : Fired just after the map completes a transition from one view to another. Example Usage

Angular / Cordova / Ionic

this.mapObject.addListener('moveend', function () { console.log('moveend');});

React js

mapObject.addListener('moveend', function () { console.log('moveend');});

rotate : Fired repeatedly during a “drag to rotate” interaction. Example Usage

Angular / Cordova / Ionic

this.mapObject.addListener('rotate', function () { console.log('rotate');});

React js

mapObject.addListener('rotate', function () { console.log('rotate');});

pitchend : Fired immediately after the map’s pitch (tilt) finishes changing as the result of either user interaction or methods. Example Usage
- Angular / Cordova / Ionic
```
this.mapObject.addListener('pitchend', function () { console.log('pitchend');});
```
- React js
```
mapObject.addListener('pitchend', function () { console.log('pitchend');});
```

2. clearListeners Events

Example Usage

Angular / Cordova / Ionic

this.mapObject.clearListeners('loaded', function () { console.log('unloaded');});

React js

mapObject.removeListener('loaded', function () { console.log('unloaded');});

React JS Implementation

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

const mapplsClassObject = new mappls();

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

  useEffect(() => {
    mapplsClassObject.initialize("<Add your Token>", { map: true }, () => {
      if (map.current) {
        map.current.remove();
      }
      map.current = mapplsClassObject.Map({
        id: "map",
        properties: {
          //  //Properties Object
          center: [28.544, 77.5454], // the coordinates as [lat, lon]
          draggable: true, // toggle draggable map
          zoom: 5, //the initial Map `zoom` level.
          minZoom: 8, //  minimum zoom level which will be displayed on the map
          maxZoom: 15, //  maximum zoom level which will be displayed on the map
          backgroundColor: "#fff", // used for the background of the Map div.
          heading: 100, // The `heading` for aerial imagery in degrees
          traffic: true, // To show traffic control on map.
          geolocation: false, // to display the icon for current location
          // Controls
          disableDoubleClickZoom: true, // enables/disables zoom and center on double click.
          fullscreenControl: true, // It shows the icon of the full screen on the map
          scrollWheel: true, // If false, disables zooming on the map using a mouse scroll
          scrollZoom: true, // if `false` scroll to zoom interaction is disabled.
          rotateControl: true, // enable/disable of the map.
          scaleControl: true, // The initial enabled/disabled state of the Scale control.
          zoomControl: true, // The enabled/disabled Zoom control at a fixed position
          clickableIcons: true, //to make the icons clickable
          indoor: true, // To show indoor floor plans in MapmyIndia Vector SDK.
          indoor_position: "bottom-left",
          //Possible Values : TOP_CENTER, `TOP_LEFT`, `TOP_RIGHT`, `LEFT_TOP`, `RIGHT_TOP`, `LEFT_CENTER`, `RIGHT_CENTER`, `LEFT_BOTTOM`, `RIGHT_BOTTOM`, `BOTTOM_CENTER`, `BOTTOM_LEFT`, `BOTTOM_RIGHT``
          tilt: 30, //tilt : Controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are 0 to 85.
        },
      });
      map.current.on("load", () => {
        setIsMapLoaded(true);
      });
    });
  }, []);

  return (
    <div
      id="map"
      style={{ width: "100%", height: "99vh", display: "inline-block" }}
    >
      {isMapLoaded}
    </div>
  );
};

export default App;

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!

Terms & Conditions | Privacy Policy | Supplier Sustainability Policy | Health & Safety Policy | Environmental Policy & CSR Report

Customer Care: +91-9999333223

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

map.md

map.md

Mappls Web Maps - For Angular/ Ionic / Cordova

Map Component

1. Properties

Code Snippet for adding the map component

Optional Parameters

2. Map Methods

3. Map Events - Listening to Map Events

`Event Types`:

1. addListener Event

2. clearListeners Events

Files

map.md

Latest commit

History

map.md

File metadata and controls

Mappls Web Maps - For Angular/ Ionic / Cordova

Map Component

1. Properties

Code Snippet for adding the map component

Optional Parameters

2. Map Methods

3. Map Events - Listening to Map Events

Event Types:

1. addListener Event

2. clearListeners Events

`Event Types`: