MapmyIndia Map SDK for Cordova/Ionic - Beta 1

For full documentation contact MapmyIndia here: MapmyIndia: apisupport@mapmyindia.com. You can get your api key to be used in this document here: https://www.mapmyindia.com/api/signup

This is a NPM based packaged SDK which can be installed directly through NPM.

Create your own Cordova Based native app powered by MapmyIndia Maps and deploy them to various native mobile platforms.

Package name: mapmyindia-map-cordova-ionic-beta

Node.js, Javascript,React JS, Cordova, Ionic, leaflet

• ##### Add this plugin to your app's module(app.module.ts) and also include as a provider if you are using IONIC V>1 ie. below

loadmap method needs two parameters to initialize a map in SDK 1) Map div #id // with proper css width & height 2) Map parameters - Key : your api map key from Mapmyindia (mandatory) - Zoomcontrol - Search control - center centre map to a geoposition e.g. center:[25.5454,77.54545] - Location control - For better GPS location add cordova geolocation plugin: cordova plugin add cordova-plugin-geolocation

Zoom control can be controlled by using the following parameter:

• zoom number between 4 to 18 //To show initial map zoom e.g. zoom:15 - control //To show or hide the zoom control; takes boolean values e.g. control:true - position:[topPosition,leftPosition] To change the position of the control The topPosition or leftPosition can be absolute values in pixels or relative values in percentage e.g. position:['150px','200px'] OR position:['10%','20%']

A location control provides a button that uses the GPS geolocation API to locate the user on the map.

• control //To show or hide the zoom control; takes boolean values. e.g. control:true - initial default false; to call location on map load; takes boolean values. e.g. initial:true - zoom set any any initial zoom on location; takes integer zoom levels from 4 to 17. - bounds set location bound with center to default level zoom 16. - html icon (html) for showing location on map. - position:[topPosition,leftPosition] To change the position of the control The topPosition or leftPosition can be absolute values in pixels or relative values in percentage e.g. position:['150px','200px'] OR position:['10%','20%']

##### Example of using location location:{control:true, initial:true, zoom:12}

Tip: For better GPS location use cordova geolocation plugin cordova plugin add cordova-plugin-geolocation

A map scale represented as a unitless factor (e.g. 1:50000) means that a single map unit represents X real world units (e.g. a meter in the map = 50 km in reality). To show scale on the maps, scale control can be used; which has the following parameters:

• scaledefault false; to show scale; takes boolean values. e.g. initial:true - position:[topPosition,leftPosition] To change the position of the control The topPosition or leftPosition can be absolute values in pixels or relative values in percentage e.g. position:['150px','200px'] OR position:['10%','20%']#### 4. Map Layers

##### 1. Hybrid Hybrid maps can be shown or hidden with the help of a method call. Hybrid maps are satellite maps overlayed with MapmyIndia Map labels and transportation network.

• Hide hybrid maps

##### 2. Traffic Traffic layer can be shown or hidden with the help of a method call. Traffic layer is the traffic flow overlay within MapmyIndia Maps that shows the flow of traffic on road segments. This overlay is available only for paid customers.

• Show traffic layer

We support leaflet marker method for adding markers in app.

##### Adding markers via Custom marker method

1. Marker Object: (mandatory) it can be single array with lat, long;

Other Optional Parameters within array for single & group markers:

• tooltip - popup - divicon - events

With multiple markers array

MapmyIndia Hybrid SDK offers a class for drawing polyline overlays on a map. Leaflet Properties & Events are also supported in our Hybrid SDK as illustrated in the following code snippet.

##### Using Custom method for Polylines

This has some additional parameters to manage:

1. Points: it can be simple points array or geoJSON array. 2. Options: All Leaflet options with additional parameters. - fitbounds:true/false (can take either boolean value) - tooltip:text (replace 'text' with whatever tooltip you wish to use. - popup:text/html (Use a simple text or HTML as popup) - openpopup:true/false (control the behaviour of pop when HTML onload event is fired) - decorator

##### Events on Polylines

All Leaflet Events supported.

MapmyIndia Hybrid SDK offers a class for drawing circle overlays on a map.

##### Addition of Circles

Leaflet Properties & Events related to circles are also supported in our Hybrid SDK.

MapmyIndia Hybrid SDK offers a class for drawing polygon overlays on a map.

##### Addition of Polygons

Leaflet Properties & Events for polygons thus added are also supported in our Hybrid SDK.

##### Adding tooltips to Polygons

• Marker Plugin - Markers based on eloc only getEloc Plugin Search Plugin Nearby Plugin PlacePicker Plugin getDistance Plugin

Documention Link: https://github.com/MapmyIndia/mapmyindia-places-n-directions-web-sdk

For any queries and support, please contact:

Email us at apisupport@mapmyindia.com

Stack Overflow Ask a question under the mapmyindia-api

Support Need support? contact us!

Blog Read about the latest updates & customer stories

� Copyright 2022. CE Info Systems Ltd. All Rights Reserved. | Terms & Conditions > Written with StackEdit by MapmyIndia.