Mappls Web Maps JS

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

Our APIs, SDKs, and live updating map data available for 200+ countries & territories to give developer's tool to build better mapping, navigation, and search experiences across different platforms.

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

You can get your api key to be used for access here: https://apis.mappls.com/console/

Table Of Content

Mappls Web Maps JS
Documentation History

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

Introduction

The Mappls Web Maps JavaScript SDK is a tool that 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 SDK 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.

Web Map Features

Zoom: A map of India that can be panned or scrolled, allowing users to explore it in various levels of detail. The highest level of detail is achieved at a zoom level of 22, while the lowest level provides a global view at zoom level 1.
Overlays: We recognize the significance of maps in businesses, and that's why, at Mappls, we offer pre-made overlays that can be easily integrated into your code, streamlining the process and reducing the need for repetitive code.
Map Markers (Pushpins): You can pinpoint any location using the default map markers (pushpin) feature, and then you have the flexibility to customize its appearance to align with the unique style of your application. Check out the Plug-ins section for additional enhancements that can elevate your customization options.
Info Windows (Pop-ups): When a user clicks on a pushpin, an information window automatically appears, allowing user to display location-specific content. You have the flexibility to customize its appearance and behavior to perfectly match your UI and enhance its appeal.
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 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: We understand the different use cases a user can come accross with a map, so we provide the flexibility of control that can be turned off or on based on your requirement and 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 documented in this section, and which will be available through the Mappls.

Getting Started

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

Understanding Map Methods, Events & Properties

Mappls Live Demo | CodePen Implementation

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 Mappls 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/<token>/map_sdk?v=3.0&layer=vector"></script>
```
Important:
- Please ensure that you insert your bearer token in place of <token>
- v: This is the version. Please keep as the latest version: 3.0.
- layer: The type of map applicable for the project. The default is vector. Alternate value is raster.
Please discuss with [email protected] for futher clarification and support.
Define style in the head section to load your CSS. CSS can be defined as per the developers requirement (Extenal, Internal and inline)
```
    <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} });
```

Map Methods, Events & Properties

Markers

Utilizing markers to pinpoint locations is a hassle-free approach. You have the option to use the markers we provide as the default choice, and if you wish to use your own custom markers, we've got that aspect covered as well.

Types of Markers

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: In case you want to add 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

Marker Implementation

Mappls Live Demo | Code Pen Implementation

The easiest way to start loading maps with simple markers in a web page is with sample code given on the link above, you can download or view a working sample with your authorized access keys.

Method to add marker on map

mappls.Marker

var marker = new mappls.Marker({
    map: map,
    position: {"lat": 28.519467,"lng":77.223150}
	});

Marker Methods,Events & Properties

You can fine-tune the map methods, events and properties we offer to align with your unique requirements and amplify the level of customization for your map layer. These functions serve as a handy resource for promptly addressing specific events or scenarios.

Markers Quick Reference:

View Sample Codes for Quick Reference

Heat Map Overlays

For details , please read article in Heatmap Overlays

Mappls Live Demo | Code Pen Implementation

HeatMap Quick Reference

Add Geojson layer

For details, please read article in GeoJSON

Mappls Live Demo | Code Pen Implementation

GeoJSON Supports marker, polyline and polygon addition and Style properties

Marker Property support in geojson

description
icon
icon-size
icon-offset
text
text-size
text-offset

Polyline Property support in geojson:

stroke
stroke-opacity
stroke-width

Polygon Property support in geojson:

stroke
fill color
fill opacity

    new mappls.addGeoJson({map:map,data:geoData,fitbounds:true,cType:0});

Geojson Quick Reference

Remove Layer Method

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

KML Overlay

KML: Keyhole Markup Language is a file format employed to showcase geographical data on maps. With this plugin, you have the capability to superimpose KML data onto Mappls Maps for web applications.

Mappls Live Demo | Code Pen Implementation

Important Notes to remember

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

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}});

KML Properties: #KML-Properties

For details, please read article in KML Overlay

Info Windows

Mappls Live Demo | Code Pen Implementation

Info Windows provide a user-friendly method for displaying information related to a marker, essentially explaining the purpose of that marker. When users encounter a marker, their natural instinct is to click on it to discover more details, and presenting an info window is the ideal approach to fulfill this expectation.

Please Note: Our JS 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 by manipulating the CSS.

For a quick sample or a demo you can follow up with the links on live Demo

For more details , please read article in Info Windows

Types of Information windows

Info Window Quick Reference

Feature Classes

Polylines

Mappls Live Demo | Code Pen Implementation

Polylines are a means of visualizing movement or routes on a map, and at Mappls, we recognize the various ways you can make use of a map's capabilities, with Polylines being one of them.

Polylines are essentially uninterrupted lines formed by one or more line segments, preferably represented as a geopath. To include a polyline, follow the initial map setup as described in the earlier sections, and then establish a dataset. What exactly is a dataset? It's the assembly of points (latitude and longitude coordinates) that defines the path along which you wish the polyline to be depicted.

For details , please read article in Polylines

Polyline Quick Reference - Check out our vast list of sample codes for different polylines styles.

Remove Polyline Method in JS

    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

Polygon Quick Reference - Check out our vast list of sample codes for polygons.

Circles

Mappls Live Demo | Code Pen Implementation

Circles are a method for designating an area on a map with minimal user interaction. A circle is characterized by just two key attributes:

The central point of the circle, specified by its latitude and longitude coordinates.
The radius of the circle.

With these two values, you can effortlessly outline a specific region of interest on a map.

For more details , please read article in Circle

    mappls.Circle()

Circle Quick Reference

Set mappls style

Mappls provides various pre-defined map styles for rendering purposes. Users can access a list of styles associated with their particular account. The listing API allows for both displaying a specific style and enabling the switching of style themes. For more comprehensive information, please refer to doc for MapStyles

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: