Skip to content

MapmyIndia's Latest Vector Maps Web SDK for rendering beautifully interactive, fluid maps that are powered by browser based WebGL.

License

Notifications You must be signed in to change notification settings

mappls-api/mapmyindia-vector-maps-js-web-SDK

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 

Repository files navigation

DEPRECATED

This repository is no longer in active development & use.

Mappls APIs

MapmyIndia Interactive Vector Maps JS SDK for Web !

Explore the largest directory of APIs & SDKs for maps, routes and search.

Our APIs, SDKs, and live updating map data available for 238 nations give developers tools to build better mapping, navigation, and search experiences across platforms.

This page will be continually enhanced to offer more insights and reference material on how to best utilize our Vector Maps JS SDK for Web.

You can get your api key to be used in this document here: https://apis.mappls.com/console/

Documentation History

Version Remarks Author
3.0 Initial Commit Mappls API Team (MS)

Introduction

The Interactive Maps JavaScript SDK for Web helps render and display map tiles while customizing the map's look and feel on mobile or web browser. Mappls (MapmyIndia) is India's leading Map provider, and produces various SDKs, including Web SDKs (JavaScript libraries) for mobile-friendly interactive maps which are easy to use & high on performance. This SDK is a collection of classes and functions that can be used to implement a host of map features.

Features:

  • Zoom: Pan-able map of India with 19 zoom levels, 22 being the highest (most detailed) and 4 being the lowest (country level) map display.

  • Overlays: The map is the key for any sort of business and understanding this, we at Mappls provide quick default overlays to reduce the boiler plate code for your code base.

    • Map Markers (Pushpins): Point to any location using default pushpin behaviors and provide it your own style to make it look more tailored for your application. Note: Have a look at the Plug-ins section to find out what makes it cooler.
    • Info Windows (Pop-ups): On a Map Clicking is a native behavior understanding this, we provide out of the box info windows such that if a pushpin is clicked an info window pops up open and you can show your content related to that location there. You can style it to make it behave as required for your UI to be magnificent.
    • Polylines: Connect any two points or even more with out of the box Mappls polylines dedicated to high customizability and performance to suit your use cases. Note: Have a look at the plug-ins we provide to make your polylines have an edge up and suit your use cases in a more integrated manner.
    • Polygons: Show a region in a spotlight with a polygon and show various localized data based on it.
    • Circles: Circles are way of marking a territory without too much interaction by the user.You can draw a circle around a given location.
  • Controls: because we understand the use cases with a map we provide the below out of the box controls that can be turned off or on based on your requirement and because we care, we provide you to override our controls outlook by providing your own styles or CSS so that you can move them or customize them completely. Controls include:

    • Zoom Bar: (appears by default at the centre on the right side). Helps to provide zoom in and zoom out functionality to the map by default.
    • Map Layer Control: Allows to change the map view from basic to hybrid and regional. Also allows to show traffic layer on map.
  • Fullscreen Control: Allows to view a full screen map.

  • Current Location Control: Scopes the Map to the viewer’s current location.**

    Note:** The location settings must be turned on and must allow the site to fetch the location for this control to work.

Please Note: Mappls(MapmyIndia) may extend and enhance functionality for its interactive map API in future, which will be clearly documented in this section, and which will be available through the Mappls.Map class and Mappls.* set of classes generally.

Getting Started

Now that you’re all caught up with the features let’s get down right to them and look at how can you integrate our Interactive Map to your Website from scratch.

Initializing The Map

Live Demo

The easiest way to start loading maps in a web page is with a “Hello World” sample code, you can download or view a working “Hello World” sample from the links for adding your first marker below.

Adding the Map Script to your web page

Follow the below steps to integrate MapmyIndia interactive Maps into your existing code base or even a File -> New Project.

  • Declare application as HTML5: Define <!DOCTYPE html> on top of your HTML.
  • Integrate Interactive maps from Mappls into your browser application by simply including Mappls's interactive map API in your script source in the head section.
    <script src="https://apis.mappls.com/advancedmaps/api/<key or token>/map_sdk?v=3.0&layer=vector"></script>

Important:

  • bearer token in place of <key>

  • layer: Vector/raster default vector

  • Define a style in the head section to load in your CSS.

    <style> html, body, #map1 {margin: 0;padding: 0;width: 100%;height: 100%;} </style>
  • Define a div object in the body tag of the HTML where you want the Mappls Map to show up.
    <div id="map"></div>;
  • Initialize a Mappls Map by simply calling new Mappls.Map() in the JavaScript and passing it at the minimum, the div object in which you want the map populated. (All other parameters are optional.)
    map = new Mappls.Map('map', {center:{lat:28.612964,lng:77.229463} });
  • Hello World
  <html>
      <head>
      <title>Hello, World</title>
      <meta name="viewport" content="initial-scale=1.0">
      <meta charset="utf-8">
      <style>
          html,
          body,
          #map {
              margin: 0;
              padding: 0;
              width: 100%;
              height: 100vh;
              }
      </style>
      <script src="https://apis.mappls.com/advancedmaps/api/<key>/map_sdk?layer=vector&v=3.0&callback=loadMap" defer async></script>
      </head>
      <body>
          <div id="map"></div>
          <script>
              var map;
              function loadMap()
              { 
                  map = new Mappls.Map('map', {center: [28.544,77.5454]});
              } 
          </script>
      </body>
  </html>   

Map Quick Reference:

Markers

Markers are effortless way of pointing to a location, so getting right to it, you can go ahead and add markers that we provide out of the box but just in case you want to add your own, we’ve got that covered for you as well. There are 3 main categories of markers that you can add namely,

  • Stock Markers: The one you get out of the box using our Interactive Vector Maps SDK and you can select from a lot of choices.
  • Custom Marker: Just in case you want to provide your own markers, we’ve handled that for you as well.
  • HTML Marker: In case you don’t want to add in an image you can use HTML to create a marker and then plot it on the map as well.

For more details, please read article in Markers

Now, that you have a basic understanding of Markers, Functions and Events let’s talk about Info Windows or Pop-Ups.

Adding Your First Marker

LIVE DEMO

The easiest way to start loading maps with simple markers in a web page is with a “Hello World” sample code, you can download or view a working “Hello World” sample from the links above.

In the sample, we have a case of a map scenario where objective is plotting a pushpin that says hello world on click.

Method to add marker on map

new Mappls.Marker

Code to add marker on Map
var marker = new Mappls.Marker({
    map: map,
    position: {"lat": 28.519467,"lng":77.223150}
	});

Example

<html>
    <head>
    <title>First Marker</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        html,
        body,
        #map {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
            }
    </style>
    <script src="https://apis.mappls.com/advancedmaps/api/<key or token>/map_sdk?layer=vector&v=3.0&callback=loadMap" defer async></script>
    </head>
    <body>
        <div id="map"></div>
        <script>
            var map;
            function loadMap()
            { 
                map = new Mappls.Map('map', {center: [28.544,77.5454]});
                map.addListener('load', function () {
                    var marker= new Mappls.Marker({
                    map: map,
                    position: {"lat": 28.544,"lng":77.5454}
                    });
                }); 
            }
            </script>
        </body>
    </html>

Knowing Properties And Methods

You can interact with properties of the Map we provide to suite your use case and add additional customizability to your Map layer using the features it has to offer. These functions are a quick go to in case of an event.

For details, please read article in Marker Methods

Marker Quick Reference:

    var geoData={
                "type": "FeatureCollection",
                "features": [{
                "type": "Feature",
                "properties": {"htmlPopup":"noida"},
                "geometry": {"type": "Point",
                "coordinates": [28.544,77.5454]}
                },{
                "type": "Feature",
                "properties": {"htmlPopup":"faridabad"},
                "geometry": {"type": "Point",
                "coordinates": [28.27189158,77.2158203125]}
                },{
                "type": "Feature",
                "properties": {"htmlPopup":"delhi"},
                "geometry": {"type": "Point",
                "coordinates": [28.549511,77.2678250]}
                }]
            };
    var marker=Mappls.Marker({map:map,position:geoData,icon_url:'https://apis.mappls.com/map_v3/1.png',clusters:true,fitbounds:true,fitboundOptions:{padding: 120,duration:1000},popupOptions:{offset: {'bottom': [0, -20]}}});

Info Windows

LIVE DEMO

Info Windows are a convenient way of showing data about a marker or in simple words: what that marker stands for. The Native behaviour of a user to know about any marker is to try and click on it to know what it’s all about and showing an info window would be the way to go about it:

Please Note: MapmyIndia interactive map SDK supports a default info window that you can leverage but we want you to have an option to customize your info window to fit in with your UI and you can do so in the CSS.

For a quick sample or a demo you can follow up with the links on top.

You can declare an info window in your CSS and write up a quick function to generate data in that info window and on marker click event simple open that info window.

For details , please read article in Info Windows

Example

    <html>
        <head>
        <title>Infowindow</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            html,
            body,
            #map {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100vh;
                }
        </style>
        <script src="https://apis.mappls.com/advancedmaps/api/<key or token>/map_sdk?layer=vector&v=3.0&callback=loadMap" defer async></script>
        </head>
        <body>
            <div id="map"></div>
            <script>
                var map;
                function loadMap()
                { 
                    map = new Mappls.Map('map', {center: [28.544,77.5454]});
                    map.addListener('load', function () {
                        var window=new Mappls.InfoWindow({map:map,content:"MyMapContent",position:{lat: 28.529467 ,lng: 77.223150}});
                    }); 
                }
            </script>
        </body>
    </html>

Info Window Quick Reference

Polylines

LIVE DEMO

Polylines are a way of showing movement or transit on a map. We at Mappls understand the ways you can leverage the features offered by a map and one among them is a Polyline.

Polylines are continuous lines consisting of one or more line segments (preferably a geopath). To add a polyline, initialize map as shown in the previous sections and then create a data set. What is a data set? The Data set is the collection of points (latitude and longitude) over which you want the polyline to be drawn.

For details , please read article in Polylines

Polyline Quick Reference

Example:

   <html>
   <head>
   <title>Polyline</title>
   <meta name="viewport" content="initial-scale=1.0">
   <meta charset="utf-8">
   <style>
       html,
       body,
       #map {
           margin: 0;
           padding: 0;
           width: 100%;
           height: 100vh;
           }
   </style>
   <script src="https://apis.mappls.com/advancedmaps/api/<key or token>/map_sdk?layer=vector&v=3.0&callback=loadMap" defer async></script>
   </head>
   <body>
       <div id="map"></div>
       <script>
           var map;
           function loadMap()
           { 
               map = new Mappls.Map('map', {center: [28.544,77.5454]});
               map.addListener('load', function () {
                   
                   var pts=[{lat:28.55108, lng:77.26913},{lat:28.55106,lng: 77.26906},{lat:28.55105,lng: 77.26897},{lat:28.55101,lng:77.26872},{lat:28.55099, lng:77.26849},{lat:28.55097, lng:77.26831},{lat:28.55093, lng:77.26794},{lat:28.55089, lng:77.2676},{lat:28.55123, lng:77.26756},{lat:28.55145, lng:77.26758},{lat:28.55168, lng:77.26758},{lat:28.55175, lng:77.26759},{lat:28.55177, lng:77.26755},{lat:28.55179, lng:77.26753}];
                   var polyline = new Mappls.Polyline({
                       map:map,
                       paths: pts,
                       strokeColor: '#333',
                       strokeOpacity: 1.0,
                       strokeWeight: 5,
                       fitbounds:true
   		        });
               }); 
           }
       </script>
   </body>
</html>

Drag polyline from anywhere & get callback polyline data. By default the value is false.

    editable: true 

Polyline draw point by point with speed

    animate: {path:true/false,speed:5}
    animate: { 
        speed:5 
        icon_width: 35 / “35”,
        icon_height: 15 / “15”,,
        icon_url: (icon_url),
        repeat: true/false,
    },

Remove Polyline

    Mappls.remove({map: map, layer: polyline);

In real case scenarios, you’ll need to get the data set on the fly or from a service and then you can leverage the events and functions we’ve learnt about how to plot the polyline. You also might need to beautify your polyline or add transitions for your UI to look marvelous.

The polyline is just the beginning, but sometimes you’ll need to mark a territory to properly showcase your information. In such cases a polyline might not be the perfect fit but Polygons and Circles may be the apt choice.

Polygons

Polygons are a way of showing a territory. In cases where you want to showcase data over an area, polygons are your best pick. You can use them to show Geozones as well.

It’s very like generating a polyline, the basic steps remain the same, create a Data set, generate a polygon and add it to the map.

For details , please read article in Polygon

Simple Polygon

LIVE DEMO

Example

    <html>
        <head>
        <title>Polygon</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            html,
            body,
            #map {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100vh;
                }
        </style>
        <script src="https://apis.mappls.com/advancedmaps/api/<key or token>/map_sdk?layer=vector&v=3.0&callback=loadMap" defer async></script>
        </head>
        <body>
            <div id="map"></div>
            <script>
                var map;
                function loadMap()
                { 
                    map = new Mappls.Map('map', {center: [28.544,77.5454]});
                    map.addListener('load', function () {
                        var pts=[{lat: 28.774, lng: 80.190},{lat: 28.466, lng: 76.118},{lat: 27.321, lng: 77.757},{lat: 27.771, lng: 80.757}];
                        new Mappls.Polygon({map:map,paths: pts,fillColor:"blue"});
                    }); 
                }
            </script>
        </body>
    </html>

Draw Polyline/Polygons

This method can draw polyline or polygon directly from map with click event with callback methods.

Double Click to finish draw event.

//Polyline

    var polylineoptions={strokeColor: "blue",strokeOpacity:1.0,strokeWeight: 9,lineGap:0,popupHtml:'Route 1',popupOptions:{offset: {'bottom': [0, -20]}}} 

    Mappls.draw({map:map,type:'polyline',callback:draw_callback,options:polylineoptions});

//Polygon
var polygonoptions={fillColor:'#333'}
Mappls.draw({map:map,type:'polygon',callback:draw_callback,options:polygonoptions});

function draw_callback(data)
{
 console.log(data);
}

Now that we’ve covered polygons let’s have a look at Circles which provide another way of showcasing territory.

Circles

Circles are way of marking a territory without too much interaction by the user. A circle only has two important values:

  • The Centre point of the circle (in this case it’ll be a latitude with a longitude).
  • The Radius of the circle.

With the two values, you can easily define a quick area of interest on a map.

For details , please read article in Circle

    Mappls.Circle()

LIVE DEMO

Example

	<html>
    <head>
    <title>Circle</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        html,
        body,
        #map {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
            }
    </style>
    <script src="https://apis.mappls.com/advancedmaps/api/<key or token>/map_sdk?layer=vector&v=3.0&callback=loadMap" defer async></script>
    </head>
    <body>
        <div id="map"></div>
        <script>
            var map;
            function loadMap()
            { 
                map = new Mappls.Map('map', {center: [28.544,77.5454]});
                map.addListener('load', function () {
                    var mappls_circle = new Mappls.Circle({
                    map: map,
                    center: {"lat": 28.544 ,"lng": 77.5454},
                    radius: 1000});
                }); 
            }
        </script>
    </body>
</html>

Heatmap Overlays

For details , please read article in Heatmap Overlays

    var pts=[ {lat: 28.774, lng: 80.190}, {lat: 28.466, lng: 76.118}, {lat: 27.321, lng: 77.757}, {lat: 27.774, lng: 80.190} ];

    var heat_map=new Mappls.HeatmapLayer({map:map,data:pts,fitbounds:true});

LIVE DEMO

Example

    <html>
        <head>
        <title>Heatmap</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            html,
            body,
            #map {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100vh;
                }
        </style>
        <script src="https://apis.mappls.com/advancedmaps/api/<key or token>/map_sdk?layer=vector&v=3.0&callback=loadMap" defer async></script>
        </head>
        <body>
            <div id="map"></div>
            <script>
                var map;
                function loadMap()
                { 
                    map = new Mappls.Map('map', {center: [28.544,77.5454]});
                    map.addListener('load', function () {
                        var pts=[{lat:28.55108, lng:77.26913},{lat:28.55106,lng: 77.26906},{lat:28.55105,lng: 77.26897},{lat:28.55101,lng:77.26872},{lat:28.55099, lng:77.26849},{lat:28.55097, lng:77.26831},{lat:28.55093, lng:77.26794},{lat:28.55089, lng:77.2676},{lat:28.55123, lng:77.26756},{lat:28.55145, lng:77.26758},{lat:28.55168, lng:77.26758},{lat:28.55175, lng:77.26759},{lat:28.55177, lng:77.26755},{lat:28.55179, lng:77.26753}];

                        var gradient = [ 'rgba(0, 255, 255, 0)', 'rgba(0, 255, 255, 1)', 'rgba(0, 191, 255, 1)', 'rgba(0, 127, 255, 1)', 'rgba(0, 63, 255, 1)', 'rgba(0, 0, 255, 1)', 'rgba(0, 0, 223, 1)', 'rgba(0, 0, 191, 1)', 'rgba(0, 0, 159, 1)', 'rgba(0, 0, 127, 1)', 'rgba(63, 0, 91, 1)', 'rgba(127, 0, 63, 1)', 'rgba(191, 0, 31, 1)', 'brown' ]; 

                        var heat_map=new Mappls.HeatmapLayer({map:map,data:pts,gradient:gradient,fitbounds:true});
                    }); 
                }
            </script>
        </body>
    </html>

Add geojson layer

For details, please read article in GeoJSON

Live Demo

GeoJSON Supports marker, polyline and polygon

Marker Property support in geojson

  1. description
  2. icon
  3. icon-size
  4. icon-offset
  5. text
  6. text-size
  7. text-offset

polyline Property support in geojson:

  1. stroke
  2. stroke-opacity
  3. stroke-width

polygon Property support in geojson:

  1. stroke
  2. fill color
  3. fill opacity
    new Mappls.addGeoJson({map:map,data:geoData,fitbounds:true,cType:0});

Example

    <html>
        <head>
        <title>Geojson Layer</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            html,
            body,
            #map {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100vh;
                }
        </style>
        <script src="https://apis.mappls.com/advancedmaps/api/<key or token>/map_sdk?layer=vector&v=3.0&callback=loadMap" defer async></script>
        </head>
        <body>
            <div id="map"></div>
            <script>
                var map;
                function loadMap()
                { 
                    map = new Mappls.Map('map', {center: [28.544,77.5454]});
                    map.addListener('load', function () {
                        var mixjson={
                            "type": "FeatureCollection",
                            "features": [
                                {
                                    "type": "Feature",
                                    "geometry": {"type": "Point","coordinates": [28.54950,77.2678540]
                                    },
                                    "properties": {
                                        "name": "MapmyIndia old Office",
                                        "description": "Okhla delhi",
                                        "icon": "https://apis.mappls.com/map_v3/1.png",
                                        "icon-size":1,
                                        "text":"",
                                        "text-size":20,
                                        "text-offset":[0,0],
                                        "text-color":"red",
                                    }
                                },
                                {
                                    "type": "Feature",
                                    "geometry": {
                                        "type": "Point",
                                        "coordinates": [28.5510446,77.268952]
                                    },
                                    "properties": {
                                        "name": "<div onclick=\"function1()\">MapmyIndia New Office</div>",
                                        "description": "68,Okhla delhi",
                                        "icon": "https://apis.mappls.com/map_v3/1.png",
                                        "icon-size":0.55,
                                        "text":"1",
                                        "icon-offset":[0,-20],
                                    }
                                },
                                {
                                    "type": "Feature",
                                    "geometry": {
                                        "type": "LineString",
                                        "coordinates": [
                                            [28.551042,77.268953],
                                            [28.551005,77.268649],
                                            [28.550986,77.268392],
                                            [28.550967,77.268231],
                                            [28.550967,77.268177],
                                            [28.550958,77.268016],
                                            [28.55092,77.267587],
                                            [28.550722,77.267651],
                                            [28.55042,77.267823],
                                            [28.550128,77.267802],
                                            [28.549751,77.267995],
                                            [28.549652,77.268039]
                                        ]
                                    },
                                    "properties": {
                                        "name": "Direction1",
                                        "description": "Direction2",
                                        "stroke": "#33CC00",
                                        "stroke-opacity": 0.6509803921568628,
                                        "stroke-width": 10,
                                    }
                                },
                                {
                                    "type": "Feature",
                                    "geometry": {
                                        "type": "Polygon",
                                        "coordinates": [[
                                                [28.550868798522835,77.26878225803375],
                                                [28.550868798522835,77.26899683475493],
                                                [28.550383454405356,77.26903975009918],
                                                [28.550388166494926,77.26883590221404]
                                        ]]
                                    
                                    },
                                    "properties": {
                                        "name": "MapmyIndia Head Office",
                                        "stroke": "#33CC00",
                                        "stroke-opacity": 0.6509803921568628,
                                        "stroke-width": 3,
                                        "fill": "#33CC00",
                                        "fill-opacity": 0.6509803921568628
                                    }
                                }
                            ]
                        };
                    var jsonData=Mappls.addGeoJson({map:map,data:mixjson,fitbounds:true});
                    }); 
                }
            </script>
        </body>
    </html>

Remove Layer

    new Mappls.remove({map:map,layer:jsonData});

KML Overlay

KML: Keyhole Markup Language is a file format used to display geographic data on maps. Using this plugin, you can overlay KML data over Mappls Maps for web.

LIVE DEMO

Important Notes to remember

  1. Only KML data supported.
  2. KML file must have absolute path or raw KML string (in variable or in textbox)
  3. All internal URL's path must be absolute. (for icon path etc)
  4. File must not be password protected.
  5. File must be CORS enabled from the server where they are hosted.
  6. File must follow KML standard strictly.

How to allow add libraries=kml in initial load ie.

    <script src="https://apis.mappls.com/advancedmaps/api/<key or token>/map_sdk?v=3.0&layer=vector&libraries=kml"></script>
  • KML Method
    var url="https://www.mappls.com/api/advanced-maps/doc/sample/mmi.kml";
    Mappls.KmlLayer({map:map,url:url,cType:1,fitbounds:true,fitboundOptions:{padding:200}});
    <html>
        <head>
        <title>Geojson Layer</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            html,
            body,
            #map {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100vh;
                }
        </style>
        <script src="https://apis.mappls.com/advancedmaps/api/<key or token>/map_sdk?layer=vector&v=3.0&libraries=kml&callback=loadMap" defer async></script>
        </head>
        <body>
            <div id="map"></div>
            <script>
                var map;
                function loadMap()
                { 
                    map = new Mappls.Map('map', {center: [28.544,77.5454]});
                    map.addListener('load', function () {
                        var url="https://www.mappls.com/api/advanced-maps/doc/sample/mmi.kml";
                        Mappls.KmlLayer({map:map,url:url,fitbounds:true,fitboundOptions:{padding:200}});
                    }); 
                }
            </script>
        </body>
    </html>

Please Note: For a more detailed code snippet follow the links provided above to see the sample code or see a live demo.

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.

About

MapmyIndia's Latest Vector Maps Web SDK for rendering beautifully interactive, fluid maps that are powered by browser based WebGL.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published