MapmyIndia Interactive Map API

Introduction

The Interactive Maps JavaScript API based on Leaflet JS helps render interactive MapmyIndia Maps that you have used on MapmyIndia Maps on your desktop or mobile browser. Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 33 KB of JS, it has all the mapping features most developers ever need. Leaflet is designed with simplicity, performance and usability in mind. It is a collection of classes and functions that can be used to implement a host of map features, broadly described here under:

  • Interactive pan-able map of India with 14 zoom levels, 18 being the highest (most detailed) and 4 being the lowest (country level map display).
  • Map controls like zoom bar (appears by default at right center), mouse clicks and keyboard controls.
  • Overlays like map markers, info windows, polylines and polygons.
  • Adding text or images to map at given points.

Get Started

Hello World!

The easiest way to start loading maps in a web page is with a simple example code. The code shown below will display a map centered on New Delhi, India. You need to obtain an API key by signing up for API usage to use this sample code.

<!DOCTYPE html> <html> <head> <title>Mapmyindia Maps</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- Integrate Indias best interactive maps from MapmyIndia into your browser application by simply including MapmyIndia interactive map API in your script source as shown in next line --> <script src="https://apis.mapmyindia.com/advancedmaps/v1/<your map key>/map_load?v1.1"></script> <style> html, body, #map { margin: 0; padding: 0;width: 100%;height: 100%;} </style> </head> <body> <!-- Define a Div object in the body tag of the HTML where you want the MapmyIndia Map to show up --> <div id="map"></div> <script> /* Initialize a MapmyIndia Map by simply calling new MapmyIndia.Map() and passing it, at the minimum the div object in which you want the map populated. All others parameters are optional. Once you initialize a MapmyIndia Map, you can access all leaflet functionality through the global Leaflet singlet (class/object), "L" and by passing it the "map" variable we initialize the MapmyIndia Map into. MapmyIndia interactive map API is based on Leaflet, a popular and powerful open source interactive mapping API The interactive map provides out of the box leaflet controls of search,zoom in/out, map layers(hybrid,road) and current location use flags such as "zoomControl: true" or "search: true" to toggle visibility of the leaflet controls of zoomControl and Search respectively. The below code line initializes the map with all leaflet controls visible. change the respective flags to false to hide them. */ var map=new MapmyIndia.Map("map",{ center:[28.61, 77.23], zoomControl: true, hybrid:true, search:true, location:true}); /*map initialized*/ //Note: Consider editing the CSS style, to reposition these controls. You can do so by rewriting "..map-control css" // for example to add a marker to the map, simply add the line of code below. More documentation on Leaflet and plugins are available at leafletjs.org L.marker([28.61, 77.23]).addTo(map); // MapmyIndia may extend and enhance functionality for interactive mapping in future, which will be clearly documented in the MapmyIndia API documentation section, and which will be available through the MapmyIndia.Map class and MapmyIndia.* set of classes generally.... </script> </body> </html>


This simple example illustrates some steps that always have to be made:

  • Declare application as HTML5
  • Integrate India's best interactive maps from MapmyIndia into your browser application by simply including MapmyIndia's interactive map API in your script source.
  • Define a div object in the body tag of the HTML where you want the MapmyIndia Map to show up.
  • Initialize a MapmyIndia Map by simply calling new MapmyIndia.Map() and passing it, at the minimum, the div object in which you want the map populated. (All others parameters are optional.)
  • Load the map

Once you initialize a MapmyIndia Map, you can access all Leaflet functionality through the global Leaflet singleton (class/object), 'L' and by passing it the 'map' variable to initialize the MapmyIndia Map into. for example to add a marker to the map, simply add the line of code below:

L.marker([28.61, 77.23]).addTo(map);

More documentation on Leaflet and plugins are available at leafletjs.org. All Leaflet functionality will work with MapmyIndia Interactive Map API.

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 MapmyIndia.Map class and MapmyIndia.* set of classes generally.

Map Properties and Events

The following example explain about the map properties and its events.

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"lang="en" xml:lang="en"> <head> <title>MapmyIndia Maps API: Map properties and events</title> <link rel="icon" href="http://mapmyindia.com/images/favicon.ico" type="image/x-icon" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> html { height: 100%; } body { height: 100%;font-family:Verdana,sans-serif, Arial;color:#000;margin: 0; font-size:14px; padding: 0; } #map { position: absolute; left: 312px; top: 46px; right: 2px; bottom: 2px; border: 1px solid #cccccc; } #result { position: absolute; left: 2px; top: 46px; width: 306px; bottom: 2px; border: 1px solid #cccccc; background-color: #FAFAFA; overflow: auto; } button{ width: 220px;font-family:Verdana,sans-serif, Arial;font-size:12px;padding:2px 0;color:#333 } .top-div{ border-bottom: 1px solid #e9e9e9;padding:10px 12px;background:#fff; } .top-div-span1{ font-size: 20px; } .top-div-span2{ font-size:16px;color:#777 } .btn-div{ padding: 11px 12px 3px 38px; } .msg-cont{ padding:6px 12px 1px; border-bottom:1px solid #e9e9e9; } .msg-list{ line-height: 20px; font-size: 12px; color: #555; } .event-header{ padding:14px 12px 6px 38px;color: #666; } #event-log{ padding:6px 12px 6px 38px;color: #777; font-size: 12px; line-height: 22px; } </style> <!--put your map api javascript url with key here--> <script src="https://apis.mapmyindia.com/advancedmaps/v1/<js_license_key>/map_load?v1.1"></script> <script> var map = null; window.onload = function () { var centre = new L.LatLng(28.549948, 77.268241); map = new MapmyIndia.Map('map', {center: centre, zoomControl: true, hybrid: true}); /*** 1. Create a MapmyIndia Map by simply calling new MapmyIndia.Map() and passing it a html div id, all other parameters are optional... 2. All leaflet mapping functions can be called simply by using "L" object. 3. In future, MapmyIndia may extend the customised/forked Leaflet object to enhance mapping functionality for developers, which will be clearly documented in the MapmyIndia API documentation section. ***/ var event_div = document.getElementById("event-log"); /***map-events***/ map.on("dblclick", function (e) { var pt = e.latlng;/*event returns lat lng of clicked point*/ event_div.innerHTML = "dbclick:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>" + event_div.innerHTML; }); map.on("click", function (e) { var pt = e.latlng;/*event returns lat lng of clicked point*/ event_div.innerHTML = "click:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>" + event_div.innerHTML; }); map.on("resize", function (e) { event_div.innerHTML = "map resized</br>" + event_div.innerHTML; }); map.on("mouseup", function (e) { var pt = e.latlng;/*event returns lat lng of current point*/ event_div.innerHTML = "mouseup:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>" + event_div.innerHTML; }); map.on("mousedown", function (e) { var pt = e.latlng;/*event returns lat lng of current point*/ event_div.innerHTML = "mousedown:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>" + event_div.innerHTML; }); }; function mapmyindia_current_zoom_level() { var zoom = map.getZoom();/*returns the current zoom level*/ var event_div = document.getElementById("event-log"); event_div.innerHTML = ''; event_div.innerHTML = "Current zoom level:" + zoom + "</br>" + event_div.innerHTML; } function mapmyindia_current_center_location() { var pt = map.getCenter();/*returns the center of map*/ var event_div = document.getElementById("event-log"); event_div.innerHTML = ''; event_div.innerHTML = "Current Center:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>" + event_div.innerHTML; } function mapmyindia_current_bound() { var bounds = map.getBounds();/*Returns the rectangle in WGS coordinates that is currently displayed in the containing HTML element i.e Map.*/ var event_div = document.getElementById("event-log"); event_div.innerHTML = ''; event_div.innerHTML = "current bound:</br> north east lat:" + bounds.getNorthEast().lat + "</br> north east lng:" + bounds.getNorthEast().lng + "</br>south west lat:" + bounds.getSouthWest().lat + "</br>south west lng:" + bounds.getSouthWest().lng + "</br>" + event_div.innerHTML; } function mapmyindia_map_pan() { var pt = new L.LatLng(28.559835482012822, 77.28323936462401); var event_div = document.getElementById("event-log"); event_div.innerHTML = ''; event_div.innerHTML = "Map pan to:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>" + event_div.innerHTML; map.panTo(pt);/*Pans the map to a given lat long */ } function mapmyindia_set_center_and_zoom_level() { var pt = new L.LatLng(28.549948, 77.268241);/*WGS location object*/ map.setView(pt, 8);/*function that modifies both center map position and zoom leveL.*/ } function mapmyindia_array_of_location_fit_into_bound() { var latitudeArr = [28.549948, 28.552232, 28.551748, 28.551738, 28.548602, 28.554603, 28.545639, 28.544339, 28.553196, 28.545842]; var longitudeArr = [77.268241, 77.268941, 77.269022, 77.270164, 77.271546, 77.268305, 77.26480, 77.26424, 77.265407, 77.264195]; var maxlat = Math.max.apply(null, latitudeArr); var maxlon = Math.max.apply(null, longitudeArr); var minlat = Math.min.apply(null, latitudeArr); var minlon = Math.min.apply(null, longitudeArr); var southWest = L.latLng(maxlat, maxlon);/*south-west WGS location object*/ var northEast = L.latLng(minlat, minlon);/*north-east WGS location object*/ var bounds = L.latLngBounds(southWest, northEast);/*This class represents bounds on the Earth sphere, defined by south-west and north-east corners.i.e Creates a new WGS bounds.*/ map.fitBounds(bounds);/*Sets the center map position and level so that all markers is the area of the map that is displayed in the map area*/ } function mapmyindia_move_to_center() { var pt = new L.LatLng(28.549948, 77.268241);/*WGS location object*/ map.setView(pt);/* new map position to be in the middle of the HTML element where map is drawn.*/ var event_div = document.getElementById("event-log"); event_div.innerHTML = ''; event_div.innerHTML = "Map pan to:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>" + event_div.innerHTML; } function mapmyindia_zoom_in() { map.zoomIn();/*Zooms in one zoom step, unless current zoom level is the minimal zoom level. */ var zoom = map.getZoom();/*zoom must be number that is set as new zoom level between 1 and 16*/ var event_div = document.getElementById("event-log"); event_div.innerHTML = ''; event_div.innerHTML = "Zoom level set to: " + zoom + event_div.innerHTML; } function mapmyindia_zoom_out() { map.zoomOut();/*Zooms out one zoom step, unless current zoom level is the maximal zoom level. */ var zoom = map.getZoom();/*zoom must be number that is set as new zoom level between 1 and 16*/ var event_div = document.getElementById("event-log"); event_div.innerHTML = ''; event_div.innerHTML = "Zoom level set to: " + zoom + event_div.innerHTML; } function mapmyindia_set_zoom() { var zoom = 12; map.setZoom(zoom);/*zoom must be number that is set as new zoom level between 1 and 16*/ var event_div = document.getElementById("event-log"); event_div.innerHTML = ''; event_div.innerHTML = "Zoom level set to: " + zoom + event_div.innerHTML; } </script> </head> <body> <div class="top-div"> <span class="top-div-span1">MapmyIndia Maps API: </span> <span class="top-div-span2">Map Properties and Events</span> </div> <div id="result"> <div class="btn-div"><button onclick="mapmyindia_current_zoom_level()">Get Current Zoom Level</button></div> <div class="btn-div"><button onclick="mapmyindia_current_center_location()">Get Current Map Center</button></div> <div class="btn-div"><button onclick="mapmyindia_current_bound()">Get Current Map Bound</button></div> <div class="btn-div"><button onclick="mapmyindia_map_pan()">Map Pan</button></div> <div class="btn-div"><button onclick="mapmyindia_move_to_center()">Move to Center</button></div> <div class="btn-div"><button onclick="mapmyindia_set_zoom()">Set Zoom Level</button></div> <div class="btn-div"><button onclick="mapmyindia_set_center_and_zoom_level()" >Set Center And Zoom Level</button></div> <div class="btn-div"><button onclick="mapmyindia_array_of_location_fit_into_bound()">Array of Location Fit Into Bound</button></div> <div class="btn-div"><button onclick="mapmyindia_zoom_in()">Zoom In</button></div> <div class="btn-div"><button onclick="mapmyindia_zoom_out()">Zoom Out</button></div> <div class="msg-cont"> <ul class="msg-list"> <li>Click anywhere on the map.</li> <li>Double click anywhere on the map.</li> <li>Mouse up on the map anywhere.</li> <li>Mouse down on the map anywhere.</li> <li>Change the zoom level or pan the map.</li> </ul> </div> <div class="event-header">Event Logs</div> <div id="event-log"></div> </div> <div id="map"></div> </body> </html>

Map Overlays

Markers

Point locations on map are displayed using markers.

You can use custom markers if you don't wish to use the default marker set.

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"lang="en" xml:lang="en"> <head> <title>MapmyIndia Maps API: Map properties and events</title> <link rel="icon" href="http://mapmyindia.com/images/favicon.ico" type="image/x-icon" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> html { height: 100%; } body { height: 100%;font-family:Verdana,sans-serif, Arial;color:#000;margin: 0; font-size:14px; padding: 0; } #map { position: absolute;left: 312px; top: 46px; right: 2px; bottom: 2px; border: 1px solid #cccccc; } #result { position: absolute;left: 2px; top: 46px;width: 306px;bottom: 2px; border: 1px solid #cccccc;background-color: #FAFAFA; overflow: auto; } button{ width: 220px;font-family:Verdana,sans-serif, Arial;font-size:12px;padding:2px 0;color:#333 } .top-div{ border-bottom: 1px solid #e9e9e9;padding:10px 12px;background:#fff; } .top-div-span1{ font-size: 20px; } .top-div-span2{ font-size:16px;color:#777 } .btn-div{ padding: 16px 12px 6px 38px; } .msg-cont{ padding:6px 12px 1px; border-bottom:1px solid #e9e9e9; } .msg-list{ line-height: 20px; font-size: 12px; color: #555; } .event-header{ padding:14px 12px 6px 38px;color: #666; } #event-log{ padding:6px 12px 6px 38px;color: #777; font-size: 12px; line-height: 22px; } .map_marker{ position:relative;width:34px;height:48px } /*marker text span css*/ .my-div-span{ position: absolute;left:1.5em;right: 1em;top:1.4em;bottom:2.5em;font-size:9px;font-weight:bold;width:1px;color:black; } </style> <!--put your map api javascript url with key here--> <script src="https://apis.mapmyindia.com/advancedmaps/v1/<js_lic_key>/map_load?v1.1"></script> <script src="js/leaflet.rotatedMarker.js"></script> </head> <body> <div class="top-div"> <span class="top-div-span1">MapmyIndia Maps API: </span> <span class="top-div-span2">Map Marker Example</span> </div> <div id="result"> <div class="btn-div"><button onclick="mapmyindia_sample_marker()" >Add Default Marker</button></div> <div class="btn-div"><button onclick="mapmyindia_custom_marker()" >Add Custom Marker</button></div> <div class="btn-div"><button onclick="mapmyindia_multiple_markers()" >Add Multiple Markers</button></div> <div class="btn-div"><button onclick="mapmyindia_number_on_marker()" >Add Number on Markers</button></div> <div class="btn-div"><button onclick="mapmyindia_text_on_marker()" >Add Text to Markers</button></div> <div class="btn-div"><button onclick="mapmyindia_Arrow_marker()">Arrow Markers</button></div> <div class="btn-div"><button onclick="mapmyindia_draggable_marker()" >Make Marker Draggable</button></div> <div class="btn-div"><button onclick="mapmyindia_removeMarker()" >Remove Marker(s)</button></div> <div class="msg-cont"> <ul class="msg-list"> <li>Double click anywhere on the map to add a marker.</li> <li>Click/drag marker to see events.</li> </ul> </div> <div class="event-header">Event Logs</div> <div id="event-log"></div> </div> <div id="map"></div> <script> var map = null; var marker = []; var latitudeArr = [28.549948, 28.552232, 28.551748, 28.551738, 28.548602, 28.554603, 28.545639, 28.544339, 28.553196, 28.545842]; var longitudeArr = [77.268241, 77.268941, 77.269022, 77.270164, 77.271546, 77.268305, 77.26480, 77.26424, 77.265407, 77.264195]; var pth = window.location.href;/*get path of image folder*/ var full_path = pth.replace(pth.substr(pth.lastIndexOf('/') + 1), ''); window.onload = function () { map = new MapmyIndia.Map('map', {center: [28.549948, 77.268241], zoomControl: true, hybrid: true}); /*** 1. Create a MapmyIndia Map by simply calling new MapmyIndia.Map() and passing it a html div id, all other parameters are optional... 2. All leaflet mapping functions can be called simply by using "L" object. 3. In future, MapmyIndia may extend the customised/forked Leaflet object to enhance mapping functionality for developers, which will be clearly documented in the MapmyIndia API documentation section. ***/ /***map-events****/ map.on("dblclick", function (e) { var title = "Text marker sample!"; marker.push(addMarker(e.latlng, "", title)); }); }; function addMarker(position, icon, title, draggable) { /* position must be instance of L.LatLng that replaces current WGS position of this object. Will always return current WGS position.*/ var event_div = document.getElementById("event-log"); if (icon == '') { var mk = new L.Marker(position, {draggable: draggable, title: title});/*marker with a default icon and optional param draggable, title */ mk.bindPopup(title); } else { var mk = new L.Marker(position, {icon: icon, draggable: draggable, title: title});/*marker with a custom icon */ mk.bindPopup(title); } map.addLayer(mk);/*add the marker to the map*/ /* marker events:*/ mk.on("click", function (e) { event_div.innerHTML = "Marker clicked<br>" + event_div.innerHTML; }); return mk; } function mapmyindia_fit_markers_into_bound() { var maxlat = Math.max.apply(null, latitudeArr); var maxlon = Math.max.apply(null, longitudeArr); var minlat = Math.min.apply(null, latitudeArr); var minlon = Math.min.apply(null, longitudeArr); var southWest = L.latLng(maxlat, maxlon);/*south-west WGS location object*/ var northEast = L.latLng(minlat, minlon);/*north-east WGS location object*/ var bounds = L.latLngBounds(southWest, northEast);/*This class represents bounds on the Earth sphere, defined by south-west and north-east corners*/ map.fitBounds(bounds);/*Sets the center map position and level so that all markers is the area of the map that is displayed in the map area*/ } /*function to remove markers from map*/ function mapmyindia_removeMarker() { var markerlength = marker.length; if (markerlength > 0) { for (var i = 0; i < markerlength; i++) { map.removeLayer(marker[i]);/* deletion of marker object from the map */ } } delete marker; marker = []; document.getElementById("event-log").innerHTML = ""; } /*function to add default marker*/ function mapmyindia_sample_marker() { mapmyindia_removeMarker();/*Remove marker if exists on map*/ var postion = new L.LatLng(28.5628, 77.6856);/*The WGS location object*/ var title = "Sample marker!"; var mk = addMarker(postion, "", title, false);/*call the add marker function woith the position and title*/ marker.push(mk); map.setView(mk.getLatLng(), 8);/*function that modifies both center map position and zoom level.*/ } /*function to add custom userdefined marker at a given path*/ function mapmyindia_custom_marker() { mapmyindia_removeMarker(); var icon = L.icon({ iconUrl: full_path + '/images/MarkerIcon.png', iconRetinaUrl: full_path + '/images/MarkerIcon.png', iconSize: [30, 30], popupAnchor: [-3, -15] }); var postion = new L.LatLng(28.5628, 77.6856);/*WGS location object*/ var mk = addMarker(postion, icon, "Custom marker sample!", false); marker.push(mk); map.setView(mk.getLatLng()); } function mapmyindia_multiple_markers() { mapmyindia_removeMarker(); for (var i = 0; i < latitudeArr.length; i++) { var postion = new L.LatLng(latitudeArr[i], longitudeArr[i]);/*WGS location object*/ marker.push(addMarker(postion, '', "Multiple markersample !")); } mapmyindia_fit_markers_into_bound(); } /*function to make number appear on marker*/ function mapmyindia_number_on_marker() { mapmyindia_removeMarker(); for (var i = 0; i < latitudeArr.length; i++) { var title = "Number marker Sample!"; var icon = L.divIcon({ className: 'my-div-icon', html: "<img class='map_marker' src=" + "'https://maps.mapmyindia.com/images/2.png'>" + '<span class="my-div-span">' + (i + 1) + '</span>', iconSize: [10, 10], popupAnchor: [12, -10] });/*function that creates a div over a icon and display content on the div*/ var postion = new L.LatLng(latitudeArr[i], longitudeArr[i]);/*WGS location object*/ marker.push(addMarker(postion, icon, title)); } mapmyindia_fit_markers_into_bound(); } /*function to make text appear on marker*/ function mapmyindia_text_on_marker() { mapmyindia_removeMarker(); for (var i = 0; i < latitudeArr.length; i++) { var title = "Text marker sample!"; var icon = L.divIcon({ className: 'my-div-icon', html: "<img class='map_marker' src=" + "'https://maps.mapmyindia.com/images/2.png'>" + '<span class="my-div-span">' + 'M' + '</span>', //html: "<img style='position:relative;width:34px;height:48px' src=" + "'https://maps.mapmyindia.com/images/2.png'>" + '<span style="position: absolute;left:1.5em;right: 1em;top:0.9em;bottom:3em; font-size:9px;font-weight:bold; width: 4px; color:black;" class="my-div-span">' + 'M' + '</span>', iconSize: [10, 10], popupAnchor: [12, -10] });/*function that creates a div over a icon and display content on the div*/ var postion = new L.LatLng(latitudeArr[i], longitudeArr[i]);/*WGS location object*/ marker.push(addMarker(postion, icon, title)); } mapmyindia_fit_markers_into_bound(); } //*function to add custom userdefined marker say a arrow at a given angle*/ function mapmyindia_Arrow_marker() { mapmyindia_removeMarker(); var angle = 45; var icon = L.icon({ iconUrl: full_path + '/images/arrow.png', iconRetinaUrl: full_path + '/images/MarkerIcon.png', iconSize: [30, 30], popupAnchor: [-3, -15] }); var m = L.marker(new L.LatLng(28.551738, 77.269022), { icon: icon, draggable: true, rotationAngle: angle }).addTo(map); marker.push(m); map.setView(m.getLatLng());/*get the wgs locaton from marker and set the location into center*/ var event_div = document.getElementById("event-log"); event_div.innerHTML = "Arrow marker at an angle:" + angle; } /*function to make marker draggable*/ function mapmyindia_draggable_marker() { mapmyindia_removeMarker(); var postion = new L.LatLng(28.5628, 77.6856);/*WGS location object*/ var mk = addMarker(postion, '', "Draggable marker sample", true);/*call the add marker function*/ var event_div = document.getElementById("event-log"); event_div.innerHTML = "Draggable Marker created, drag the marker to the new position."; /* following events can be assigned handler (for every instance of draggable marker(s))*/ mk.on("dragstart", function (e) { event_div.innerHTML = "Marker drag start<br>" + event_div.innerHTML; }); mk.on("dragend", function (e) { var pt = e.target._latlng;/*event returns lat lng of dragged position*/ mk.setLatLng(pt);/*set marker position to dragged position*/ event_div.innerHTML = "Draggable:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>"; }); marker.push(mk); map.setView(mk.getLatLng());/*get the wgs locaton from marker and set the location into center*/ } </script> <div id="map"></div> </body> </html

Info Windows

An info window is used to display HTML content in a popup window, usually triggered by click on a marker. The sample below illustrates how to create and display info windows on map.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>MapmyIndia Maps API: Info Windows Example</title> <link rel="icon" href="http://mapmyindia.com/images/favicon.ico" type="image/x-icon" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--put your map api javascript url with key here--> <script src="http://apis.mapmyindia.com/advancedmaps/v1/<js_lic_key>/map_load?v1.1"></script> <style type="text/css"> html { height: 100%; } body { height: 100%;font-family:Verdana,sans-serif, Arial;color:#000;margin: 0; font-size:14px; padding: 0; } #map { position: absolute;left: 312px; top: 46px;right: 2px; bottom: 2px;border: 1px solid #cccccc; } #result { position: absolute;left: 2px; top: 46px;width: 306px;bottom: 2px;border: 1px solid #cccccc;background-color: #FAFAFA;overflow: auto; } .info_css{ color:#000;text-decoration:none;background-color:#fff;width:270px;padding:5px;font-size: 12px; } div.header{ position:relative;background-color:#191919;color:#fff;line-height:20px;font-size:13px;vertical-align:middle;padding:5px 35px 5px 5px; } .header .close{ position:absolute;right:5px;top:5px; } button{ width: 220px;font-family:Verdana,sans-serif, Arial;font-size:12px;padding:2px 0;color:#333; } .btn-div{ padding: 16px 12px 6px 38px; } .top-div{ border-bottom: 1px solid #e9e9e9;padding:10px 12px;background:#fff; } .event-header{ padding:14px 12px 6px 38px;color: #666; } #event-log{ padding:6px 12px 6px 38px;color: #777; font-size: 12px; line-height: 22px; } .msg-cont{ padding:6px 12px 1px; border-bottom:1px solid #e9e9e9; } .msg-list{ line-height: 20px; font-size: 12px; color: #555; } .info-div{ padding:10px;font-size:13px; } custom-info{ padding:10px;font-size:13px; } </style> </head> <body> <div class="top-div"> <span style="font-size: 20px">MapmyIndia Maps API: </span> <span style="font-size:16px;color:#777">Map Info Windows Example</span> </div> <div id="result"> <div class="btn-div"><button onclick="mapmyindia_show_info_window()">Default Info Window</button></div> <div class="btn-div"><button onclick="mapmyindia_open_fancy_info_window()">A Better Info Window</button></div> <div class="btn-div"><button onclick="mapmyindia_custom_info_window()" >A Custom Info Window</button></div> <div class="btn-div"><button onclick="mapmyindia_hide_info_window()">Hide Info Window</button></div> <div class="msg-cont"> <ul class="msg-list"> <li>Click on the marker to show an info window.</li> <li>Click on the map to create a new marker with popup.</li> </ul> </div> <div class="event-header">Event Logs</div> <div id="event-log"></div> </div> <div id="map"></div> <script> var map; var info = []; var visbility = false; var mk3, mk4, mk5; window.onload = function () { var center = new L.latLng(28.549948, 77.268241);/*WGS location object*/ var pt1 = new L.latLng(28.549948, 77.268241);/*WGS location object*/ var pt2 = new L.latLng(28.552232, 77.268941);/*WGS location object*/ var pt3 = new L.latLng(28.551748, 77.269022);/*WGS location object*/ var pt4 = new L.latLng(28.551738, 77.270164);/*WGS location object*/ var pt5 = new L.latLng(28.548602, 77.271546);/*WGS location object*/ var pt6 = new L.latLng(28.554603, 77.268305);/*WGS location object*/ map = new MapmyIndia.Map('map', {center: center, zoomControl: true, hybrid: true, zoom: 17}); /* 1. Create a MapmyIndia Map by simply calling new MapmyIndia.Map() and passing it a html div id, all other parameters are optional... 2. All leaflet mapping functions can be called simply by using "L" object. 3. In future, MapmyIndia may extend the customised/forked Leaflet object to enhance mapping functionality for developers, which will be clearly documented in the MapmyIndia API documentation section. */ /***map-events***/ map.on("dblclick", function (e) { var title = "Sample Text Marker!"; var m = addMarker(e.latlng, '', title); m.bindPopup(title).openPopup(); var event_div = document.getElementById("event-log"); event_div.innerHTML = "New marker created! <br>" + event_div.innerHTML; }); /***content for custom info window***/ var cont = "<div><h2 style=\"font: bold 16px arial helvetica\">Complex Info Window</h2>" + "<p style=\"font: italic 14px/20px times\">This content is made of custom styled elements.</p>" + "<p style=\"font: 12px/14px Verdana\;padding-top: 10px;text-indent: 30px\">" + "The heading level 2 has custom set style, and so does the previous paragraph.<br>" + "But guess what, this paragraph also has custom style.</p>" + "<p style=\"font: 12px/14px Courier;padding-top: 15px;text-indent: 15px;max-width: 200px\"></p>" + "<p>This paragraph uses default content style, as you can see.</p>" + "<p><a href=\"http://maps.mapmyindia.com\">MapmyIndia Maps</a></p></div>"; var mk1 = addMarker(pt1, '', "Marker1").addTo(map); var mk2 = addMarker(pt2, '', "Marker2").addTo(map); mk3 = addMarker(pt3, '', "Marker3").addTo(map); mk4 = addMarker(pt4, '', "Marker4").addTo(map); mk5 = addMarker(pt5, '', "Marker5").addTo(map); var position = mk1.getLatLng(); /***bind popup with marker***/ mk1.bindPopup("<div class='info-div'>Hello world info window.<div>"); mk2.bindPopup("<div class='info-div'>Example of info window.<div>"); mk3.bindPopup(cont); mk4.bindPopup("<div class='info-div'>This is info window demo.<div>") mapmyindia_fancy_info_window(); }; function addMarker(position, icon, title) { /*** position must be instance of L.LatLng ***/ var event_div = document.getElementById("event-log"); if (icon == '') { /***Marker with a default icon and optional parameter draggable, title***/ var mk = new L.Marker(position, {draggable: true, title: title}); } else { /***Marker with a custom icon and optional parameter draggable, title***/ var mk = new L.Marker(position, {icon: icon, draggable: true, title: title}); } /*Add the marker to the map*/ map.addLayer(mk); /**Marker events**/ mk.on("click", function (e) { event_div.innerHTML = "Marker clicked <br>" + event_div.innerHTML; }); mk.on("dragend", function (e) { event_div.innerHTML = "Marker dragged <br>" + event_div.innerHTML; }); return mk; } function mapmyindia_show_info_window() { /*Bind popup with marker*/ mk4.openPopup(); } function content() { return "<div style=\"padding:15px;font-size:12px;width:250px;\">This is example of multiple info window with diffrent arrow position!.</div>"; } var create_content = function (tittle, content) { var h = new Array(); h.push("<div>"); h.push("<div class=\"header\">"); h.push("<span>"); h.push(tittle); h.push("</span> "); h.push("</div>"); h.push("<div class=\"info_css\">"); h.push(content); h.push("</div>"); h.push("</div>"); return h.join(""); }; var mapmyindia_fancy_info_window = function () { var content = create_content("A Better Info Window", "An example of a richer info window."); /*bind popup with marker*/ mk5.bindPopup(content); }; var mapmyindia_open_fancy_info_window = function () { mk5.openPopup(); } var mapmyindia_custom_info_window = function () { mk3.openPopup(); } var mapmyindia_hide_info_window = function () { map.closePopup(); } </script> </body> </html>

Polyline

Lines are drawn on map using Polylines.
Polyline is a continuos line composed of one or more connected line segments.
This sample demonstrates how to draw polyline objects on map.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>MapmyIndia Maps API: Polyline Example</title> <link rel="icon" href="http://mapmyindia.com/images/favicon.ico" type="image/x-icon" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> html { height: 100%; } body { height: 100%;font-family:Verdana,sans-serif, Arial;color:#000;margin: 0; font-size:14px; padding: 0; } #map{ position: absolute; left: 312px; top: 46px; right: 2px; bottom: 2px; border: 1px solid #cccccc; } #result { position: absolute; left: 2px; top: 46px; width: 306px; bottom: 2px; border: 1px solid #cccccc; background-color: #FAFAFA; overflow: auto; } button{ width: 220px;font-family:Verdana,sans-serif, Arial;font-size:12px;padding:2px 0;color:#333 } .top-div{ border-bottom: 1px solid #e9e9e9;padding:10px 12px;background:#fff; } .top-div-span1{ font-size: 20px; } .top-div-span2{ font-size:16px;color:#777 } .btn-div{ padding: 16px 12px 6px 38px; } .msg-cont{ padding:6px 12px 1px; border-bottom:1px solid #e9e9e9; } .msg-list{ line-height: 20px; font-size: 12px; color: #555; } .event-header{ padding:14px 12px 6px 38px;color: #666; } #event-log{ padding:6px 12px 6px 38px;color: #777; font-size: 12px; line-height: 22px; } </style> <!--put your map api javascript url with key here--> <script src="https://apis.mapmyindia.com/advancedmaps/v1/<js_lic_key>/map_load?v1.1"></script> <script src="js/Leaflet.Editable.js"></script> </head> <body> <div class= "top-div"> <span class=top-div-span1">MapmyIndia Maps API: </span> <span class=top-div-span2">Map Polyline Example</span> </div> <div id="result"> <div class="btn-div" ><button onclick="mapmyindia_create_polyline()" >Add Polylines</button></div> <div class="btn-div" ><button onclick="mapmyindia_get_bounds()" >Get Bounds of Red Polyline</button></div> <div class="btn-div" ><button onclick="mapmyindia_set_unvisible_polylines()" id="visible" >Hide Polylines</button></div> <div class="msg-cont"> <ul class="msg-list"> <li>Click on control to create polyline.</li> <li>Control click on the drawn polyline to remove from map.</li> </ul> </div> <div class="event-header">Event Logs</div> <div id="event-log"></div> </div> <div id="map"></div> <script> var map = null; var poly2 = null; var poly = []; var visbility = false; var polyline1, polyline2; var event_div = document.getElementById("event-log"); //log element var visible = document.getElementById("visible"); //show hide polyline button window.onload = function () { var center = new L.LatLng(28.549948, 77.268241); map = new MapmyIndia.Map('map', {center: center, editable: true, zoomControl: true, hybrid: true}); /***map initialization with tiles of MapmyIndia with MapmyIndia.Map***/ /*** 1. Create a MapmyIndia Map by simply calling new MapmyIndia.Map() and passing it a html div id, all other parameters are optional... 2. All leaflet mapping functions can be called simply by using "L" object. 3. In future, MapmyIndia may extend the customised/forked Leaflet object to enhance mapping functionality for developers, which will be clearly documented in the MapmyIndia API documentation section. ***/ /*array of wgs points*/ var pts1 = [ new L.LatLng(center.lat - 150 / 10000, center.lng - 150 / 10000), new L.LatLng(center.lat + 0 / 10000, center.lng - 50 / 10000), new L.LatLng(center.lat + 50 / 10000, center.lng - 100 / 10000), new L.LatLng(center.lat + 70 / 10000, center.lng + 50 / 10000), new L.LatLng(center.lat - 70 / 10000, center.lng + 100 / 10000) ]; /*array of wgs points*/ var pts2 = [ new L.LatLng(center.lat - 150 / 10000, center.lng - 450 / 10000), new L.LatLng(center.lat + 0 / 10000, center.lng - 350 / 10000), new L.LatLng(center.lat + 50 / 10000, center.lng - 500 / 10000), new L.LatLng(center.lat + 70 / 10000, center.lng - 250 / 10000), new L.LatLng(center.lat - 70 / 10000, center.lng - 200 / 10000), new L.LatLng(center.lat - 70 / 10000, center.lng + 100 / 10000) ]; /*parameters of polyline*/ var poly1param = { weight: 4, opacity: 0.5 }; var poly1 = new L.Polyline(pts1, poly1param);/*polyline with given points and default color is created*/ map.addLayer(poly1); var poly2param = { color: "red", weight: 4, opacity: 0.5 }; poly2 = new L.Polyline(pts2, poly2param);/*polyline with given points and red color is created*/ map.addLayer(poly2); /*** zoom the map to the polyline**/ map.fitBounds(poly2.getBounds()); //extend the L.Control to Edit control to draw editable polyline L.EditControl = L.Control.extend({ options: { position: 'topleft', callback: null, kind: '', html: '' }, onAdd: function (map) { var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'), link = L.DomUtil.create('a', '', container); link.href = '#'; link.title = 'Create a new ' + this.options.kind; link.innerHTML = this.options.html; L.DomEvent.on(link, 'click', L.DomEvent.stop) .on(link, 'click', function () { window.LAYER = this.options.callback.call(map.editTools); }, this); return container; } }); //at a control polyline to control L.NewLineControl = L.EditControl.extend({ options: { position: 'topleft', callback: map.editTools.startPolyline, kind: 'line', html: 'Line' } }); // add the control to map map.addControl(new L.NewLineControl()); var deleteShape = function (e) { if ((e.originalEvent.ctrlKey || e.originalEvent.metaKey) && this.editEnabled()) { this.editor.deleteShapeAt(e.latlng); } }; map.on('layeradd', function (e) { if (e.layer instanceof L.Path) //delete shape e.layer.on('click', L.DomEvent.stop).on('click', deleteShape, e.layer); }); }; var mapmyindia_create_polyline = function () { event_div.innerHTML = ""; var center = new L.LatLng(28.549948, 77.268241); var pts1 = [ new L.LatLng(center.lat - 500 / 10000, center.lng - 400 / 10000), new L.LatLng(center.lat + 500 / 10000, center.lng - 400 / 10000), new L.LatLng(center.lat + 500 / 10000, center.lng - 400 / 10000), new L.LatLng(center.lat + 500 / 10000, center.lng - 400 / 10000), new L.LatLng(center.lat - 500 / 10000, center.lng - 400 / 10000), new L.LatLng(center.lat - 700 / 10000, center.lng + 400 / 10000) ];/*array of wgs points*/ var pts2 = [ new L.LatLng(center.lat - 200 / 10000, center.lng - 200 / 10000), new L.LatLng(center.lat + 0 / 10000, center.lng - 400 / 10000), new L.LatLng(center.lat + 250 / 10000, center.lng - 125 / 10000), new L.LatLng(center.lat + 250 / 10000, center.lng - 125 / 10000), new L.LatLng(center.lat - 250 / 10000, center.lng - 125 / 10000), new L.LatLng(center.lat - 250 / 10000, center.lng + 125 / 10000) ];/*array of wgs points*/ var poly1param = { color: 'blue', weight: 4, opacity: 0.5 }; var poly2param = { color: 'yellow', weight: 4, opacity: 0.5 }; removePolyline(); polyline1 = new L.Polyline(pts1, poly1param);/*polyline with given points and blue color is created*/ map.addLayer(polyline1);/*add polyline to map*/ polyline2 = new L.Polyline(pts2, poly2param);/*polyline with given points and yellow color is created*/ map.addLayer(polyline2); map.fitBounds(polyline1.getBounds()); poly.push(polyline1); poly.push(polyline2); visbility = true; visible.innerHTML = "Hide Polylines"; } var mapmyindia_get_bounds = function () { var bounds = poly2.getBounds(); event_div.innerHTML = ""; event_div.innerHTML = "Current bound: </br> north east lat:" + bounds.getNorthEast().lat + "</br> north east lng:" + bounds.getNorthEast().lng + "</br>south west lat:" + bounds.getSouthWest().lat + "</br>south west lng:" + bounds.getSouthWest().lng + "</br>" + event_div.innerHTML; } var mapmyindia_set_unvisible_polylines = function () { var polylength = poly.length; if (polylength > 0) { visible.innerHTML = visbility ? "Show Polylines" : "Hide Polylines"; /* If false, this polyline is not drawn in DOM. if true polyline is drawn in DOM */ if (visbility) { for (var i = 0; i < polylength; i++) { map.removeLayer(poly[i]); } } else { for (var i = 0; i < polylength; i++) { map.addLayer(poly[i]) } } } else { event_div.innerHTML = ""; event_div.innerHTML = "Please add polylines first by clicking \"Add Polylines\" button"; } visbility = visbility ? false : true; } var removePolyline = function () { var polylength = poly.length; if (polylength > 0) { for (var i = 0; i < polylength; i++) { map.removeLayer(poly[i]); } poly = new Array(); } } </script> </body> </html>

Polygons

A polygon is a shape that is most commonly used to denote a closed area. Polygon is basically a series of coordinates, put together as a set of straight polylines to form a closed shape of any form.

The code sample drawing polygon on map is as follows.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>MapmyIndia Maps API: Map Polygon Example!</title> <link rel="icon" href="http://mapmyindia.com/images/favicon.ico" type="image/x-icon" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--put your map api javascript url with key here--> <script src="https://apis.mapmyindia.com/advancedmaps/v1/<js_lic_key>/map_load?v1.1"></script> <script src="js/Leaflet.Editable.js"></script> <script src="js/Path.Drag.js"></script> <style type="text/css"> html { height: 100%; } body { height: 100%;font-family:Verdana,sans-serif, Arial;color:#000;margin: 0; font-size:14px; padding: 0; } #map{ position: absolute; left: 312px; top: 46px; right: 2px; bottom: 2px; border: 1px solid #cccccc; } #result { position: absolute; left: 2px; top: 46px; width: 306px; bottom: 2px; border: 1px solid #cccccc; background-color: #FAFAFA; overflow: auto; } button{ width: 220px;font-family:Verdana,sans-serif, Arial;font-size:12px;padding:2px 0;color:#333 } .top-div{ border-bottom: 1px solid #e9e9e9;padding:10px 12px;background:#fff; } .top-div-span1{ font-size: 20px; } .top-div-span2{ font-size:16px;color:#777 } .btn-div{ padding: 16px 12px 6px 38px; } .msg-cont{ padding:6px 12px 1px; border-bottom:1px solid #e9e9e9; } .msg-list{ line-height: 20px; font-size: 12px; color: #555; } .event-header{ padding:14px 12px 6px 38px;color: #666; } #event-log{ padding:6px 12px 6px 38px;color: #777; font-size: 12px; line-height: 22px; } </style> </head> <body> <div class="top-div" > <span class="top-div-span1">MapmyIndia Maps API: </span> <span class="top-div-span2">Map Polygon Example</span> </div> <div id="result"> <div class="btn-div"><button onclick="mapmyindia_geometry_of_green_polygon()" >Green Polygon Geometry</button></div> <div class="btn-div"><button onclick="mapmyindia_create_polygon_noneditable()" >Non-editable Polygon</button></div> <div class="btn-div"><button onclick="mapmyindia_create_polygons_editable()" > Editable Polygon</button></div> <div class="btn-div"><button onclick="mapmyindia_remove_polygons()" >Remove Polygon</button></div> <div class="msg-cont" > <ul class="msg-list" > <li>Click anywhere on a polygon to show info window.</li> <li>Drag the polygon to shift to a new position.</li> <li>Click on controls to create a polygon,rectangle.</li> <li>Drag the marker to see if it is under the green polygon or outside.</li> <li>Control click on the drawn items to remove from map.</li> </ul> </div> <div class="event-header" >Event Logs</div> <div id="event-log"></div> </div> <div id="map"></div> <script> var map = null; var polygons = []; var visbility = false; var p1 = null; var poly; var pts; window.onload = function () { var centre = new L.LatLng(28.549948, 77.268241); map = new MapmyIndia.Map('map', {center: centre, editable: true, zoomControl: true, hybrid: true}); /*** 1. Create a MapmyIndia Map by simply calling new MapmyIndia.Map() and passing it a html div id, all other parameters are optional... 2. All leaflet mapping functions can be called simply by using "L" object. 3. In future, MapmyIndia may extend the customised/forked Leaflet object to enhance mapping functionality for developers, which will be clearly documented in the MapmyIndia API documentation section. ***/ //extend the L.Control to Edit control to draw editable polygons/polyline L.EditControl = L.Control.extend({ options: { position: 'topleft', callback: null, kind: '', html: '' }, onAdd: function (map) { var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'), link = L.DomUtil.create('a', '', container); link.href = '#'; link.title = 'Create a new ' + this.options.kind; link.innerHTML = this.options.html; L.DomEvent.on(link, 'click', L.DomEvent.stop) .on(link, 'click', function () { window.LAYER = this.options.callback.call(map.editTools); }, this); return container; } }); // add polygon creation/editing control L.NewPolygonControl = L.EditControl.extend({ options: { position: 'topleft', callback: map.editTools.startPolygon, kind: 'polygon', html: 'Poly' } }); // add rectangle creation/editing control L.NewRectangleControl = L.EditControl.extend({ options: { position: 'topleft', callback: map.editTools.startRectangle, kind: 'rectangle', html: 'Rec' } }); // add controls to map map.addControl(new L.NewPolygonControl()); map.addControl(new L.NewRectangleControl()); var deleteShape = function (e) { if ((e.originalEvent.ctrlKey || e.originalEvent.metaKey) && this.editEnabled()) { this.editor.deleteShapeAt(e.latlng); } }; map.on('layeradd', function (e) { if (e.layer instanceof L.Path) //delete shape e.layer.on('click', L.DomEvent.stop).on('click', deleteShape, e.layer); }); var mk = L.marker(centre, {draggable: true}).addTo(map); mk.on("dragend", function (e) {/*marker events*/ var pt = e.target._latlng; //var contains = p1.getBounds().contains(pt);/*Returns whether wgs point is contained within polygon or not*/ var contains = isPointInLayer(pt, p1) var event_div = document.getElementById("event-log"); event_div.innerHTML = ''; event_div.innerHTML = contains ? "Marker is contained within green polygon.</br>" : "Marker is outside of green polygon.</br>" + event_div.innerHTML; }); pts = [ new L.LatLng(centre.lat - 10 / 1000, centre.lng - 10 / 1000), new L.LatLng(centre.lat + 0 / 1000, centre.lng - 10 / 1000), new L.LatLng(centre.lat + 10 / 1000, centre.lng - 20 / 1000), new L.LatLng(centre.lat + 0 / 1000, centre.lng - 20 / 1000), new L.LatLng(centre.lat + 5 / 1000, centre.lng - 5 / 1000), new L.LatLng(centre.lat + 15 / 1000, centre.lng - 15 / 1000), new L.LatLng(centre.lat + 15 / 1000, centre.lng + 15 / 1000), new L.LatLng(centre.lat + 0 / 1000, centre.lng + 0 / 1000), new L.LatLng(centre.lat + 10 / 1000, centre.lng + 20 / 1000), new L.LatLng(centre.lat - 15 / 1000, centre.lng + 20 / 1000), new L.LatLng(centre.lat - 10 / 1000, centre.lng + 0 / 1000) ];/*Array of WGS location object*/ createGreenPolygon(pts); } function createGreenPolygon(pts) { p1 = new L.polygon(pts, {color: "green", draggable: true});/**craetes a polygon with color:green*/ p1.on("click", function (e) {/*click event on polygon P1*/ p1.bindPopup("Green Polygon").openPopup(); /*binds popup to the polygon*/ }); map.addLayer(p1);/*add the polygon to map*/ p1.on("mousedown", function (e) {/*mouseup event on polygon P1*/ getBounds(p1, "Green polygon"); }); } function getBounds(poly, name) { if (poly) { var event_div = document.getElementById("event-log"); event_div.innerHTML = ''; var bounds = poly.getBounds();/*Returns the bounding box of this polygon in WGS coordinates. */ var centroidPoint = bounds.getCenter();/*Returns the position of the polygon, as the centroid point, calculated from points. */ event_div.innerHTML = "" + name + ":</br> north east lat:" + bounds.getNorthEast().lat + "</br> north east lng:" + bounds.getNorthEast().lng + "</br>south west lat:" + bounds.getSouthWest().lat + "</br>south west lng:" + bounds.getSouthWest().lng + "</br>centroid lat:" + centroidPoint.lat + "</br>centroid lng:" + centroidPoint.lng + "</br>" + event_div.innerHTML; ; } } function mapmyindia_create_polygon_noneditable() { var pts = [[28.537761365930866, 77.23729848861694], [28.540348581406143, 77.24914312362671], [28.54466989069459, 77.25163221359253], [28.55483510701891, 77.2426414489746], [28.558365431752108, 77.23888501524925], [28.547761143855222, 77.22729787230492]]; var patArr = []; for (var i = 0; i < pts.length; i++) { patArr.push(new L.LatLng(pts[i][0], pts[i][1])); } var poly = new L.polygon(patArr, {color: "yellow"}); poly.on("mousedown", function (e) {/*mouseup event on polygon P2*/ getBounds(poly, "Yellow polygon"); }); poly.on("click", function (e) {/*click event on polygon P2*/ poly.bindPopup("Yellow Polygon").openPopup();/*binds popup to the polygon*/ }); map.addLayer(poly); polygons.push(poly); map.fitBounds(poly.getBounds()); } function mapmyindia_remove_polygons() { var polylength = polygons.length; if (polylength > 0) { for (var i = 0; i < polylength; i++) { map.removeLayer(polygons[i]);/* remove Polygon layer from map*/ } } delete polygons; poly = ''; polygons = []; map.closePopup(); } function mapmyindia_create_polygons_editable() { var pts = [[28.52780776983775, 77.29849576950073], [28.53175256029762, 77.30218648910522], [28.53471694723318, 77.31282949447632], [28.536061262155137, 77.30761528015137], [28.538385790782893, 77.30068311095238], [28.53433992331669, 77.29484662413597]]; var patArr = []; for (var i = 0; i < pts.length; i++) { patArr.push(new L.LatLng(pts[i][0], pts[i][1])); } if (!poly) { poly = new L.polygon(patArr, {color: 'red', draggable: true}).addTo(map); /**polygon events**/ poly.on("mousedown", function (e) {/*mouseup event on polygon P1*/ getBounds(poly, "Red polygon"); }); poly.on("click", function (e) {/*click event on polygon*/ poly.bindPopup("Red Polygon").openPopup();/*binds popup to the polygon*/ }); poly.enableEdit(); poly.on('dblclick', L.DomEvent.stop).on('dblclick', poly.toggleEdit); polygons.push(poly); } map.fitBounds(poly.getBounds()); } function mapmyindia_geometry_of_green_polygon() { var points = p1.getLatLngs();/*provide the current geometry of the polygon*/ var len = points[0].length; if (len > 0) { var event_div = document.getElementById("event-log"); event_div.innerHTML = ''; var s = "Geometry:</br>["; for (var i = 0; i < len; i++) { s += "[" + points[0][i].lat + "," + points[0][i].lng; s += (len - 1) != i ? "]</br>," : "]]</br>"; } event_div.innerHTML = s + event_div.innerHTML; } else { createGreenPolygon(pts); mapmyindia_geometry_of_green_polygon(); } map.fitBounds(p1.getBounds()) } function isPointInLayer(pt, layer) { var within = false; var x = pt.lat, y = pt.lng; for (var ii = 0; ii < layer.getLatLngs().length; ii++) { var polyPoints = layer.getLatLngs()[ii]; for (var i = 0, j = polyPoints.length - 1; i < polyPoints.length; j = i++) { var xi = polyPoints[i].lat, yi = polyPoints[i].lng; var xj = polyPoints[j].lat, yj = polyPoints[j].lng; var intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if (intersect) within = !within; } } return within; } ; </script> <div id="map"></div> </body> </html>

Circle

A circle of a fixed size with the radius specified in pixels can be created. The sample below illustrates how to create and display circle on the map.

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>MapmyIndia Maps API: Circle Example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <link rel="icon" href="http://mapmyindia.com/images/favicon.ico" type="image/x-icon"> <!--put your map api javascript url with key here--> <script src="https://apis.mapmyindia.com/advancedmaps/v1/<js_lic_key>/map_load?v1.1"></script> <style type="text/css"> /*map css **/ body,html { height: 100%;font-family:Verdana,sans-serif, Arial;color:#555;margin: 0; font-size:12px; padding: 0; background:#fafafa} #map{position: absolute;left: 312px; top: 46px;right: 2px; bottom: 2px;border: 1px solid #cccccc; } #menu {position: absolute;left: 2px; top: 46px;width: 306px;bottom: 2px;border: 1px solid #cccccc;background-color: #FAFAFA;overflow-x:hidden;overflow-y: auto;} </style> <script> var lat = 28.6129602407977; var lon = 77.22945570945740; var radius = 100; var marker; var currentDiameter; window.onload = function () { document.getElementById('lat').value = lat; document.getElementById('lon').value = lon; document.getElementById('radius').value = radius; if (lat != '' && lon != '' && radius != '') { if (checkValidLatlong(parseFloat(lat), parseFloat(lon))) { var centre = new L.LatLng(lat, lon); map = new MapmyIndia.Map('map', {center: centre, zoomControl: true, hybrid: true}); /*1.create a MapmyIndia Map by simply calling new MapmyIndia.Map() and passsing it at the minimum div object, all others are optional... 2.all leaflet mapping functions can be called simply on the L object 3.MapmyIndia may extend and in future modify the customised/forked Leaflet object to enhance mapping functionality for developers, which will be clearly documented in the MapmyIndia API documentation section.*/ var icon = L.icon({iconUrl: '/images/Marker.png', iconRetinaUrl: '/images/Marker.png', iconSize: [30, 30]}); marker = L.marker(centre, {icon: icon, draggable: true}).addTo(map); marker.on('dragend', function (event) { var position = event.target.getLatLng(); document.getElementById('lat').value = position.lat;/***set div elements values***/ document.getElementById('lon').value = position.lng; showCircle(); }); showCircle(); } } else { document.getElementById('result').innerHTML = "Please enter lat/lon/radius"; } }; function showCircle() { document.getElementById('result').innerHTML = ""; if (currentDiameter) map.removeLayer(currentDiameter); lat = document.getElementById('lat').value; lon = document.getElementById('lon').value; radius = document.getElementById('radius').value; if (lat != '' && lon != '' && radius != '') { if (checkValidLatlong(parseFloat(lat), parseFloat(lon))) { if (marker) marker.setLatLng([lat, lon]); currentDiameter = L.circle([lat, lon], { color: 'pink', fillColor: '#FFC0CB', fillOpacity: 0.5, radius: radius }); currentDiameter.addTo(map); map.fitBounds(currentDiameter.getBounds()); } } else { document.getElementById('result').innerHTML = "Insufficient parameters"; } } function isNumberKeyDecimals(evt) { /*check for input boxes*/ var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57))) return false; return true; } function checkValidLatlong(lat, lon) { /*check for input as valid lat lon*/ if (lat >= 180 || lat <= -180 || lon >= 180 || lon <= -180) { document.getElementById('result').innerHTML = "Invalid Lat lon values"; return false; } else { return true; } } </script> </head> <body> <div style="border-bottom: 1px solid #e9e9e9;padding:10px 12px;background:#fff;"><span style="font-size: 20px">MapmyIndia Maps API:</span> <span style="font-size:16px;color:#777">Circle Example</span></div> <div id="menu"> <div style="padding: 0 12px 0 12px"> <div style="padding: 5px 0;font-size:13px;color:#222">Enter Latitude</div> <input type="text" style="width: 254px; margin-right: 10px;padding:5px;border:1px solid #ddd;color:#555" id="lat" placeholder="Latitude" autocomplete="off" onkeypress="if (event.which == 13 || event.keyCode == 13) showCircle(); return isNumberKeyDecimals(event);"><br/> <div style="padding: 5px 0;font-size:13px;color:#222">Enter Longitude</div> <input type="text" style="width: 254px; margin-right: 10px;padding:5px;border:1px solid #ddd;color:#555" id="lon" placeholder="longitude" autocomplete="off" onkeypress="if (event.which == 13 || event.keyCode == 13) showCircle(); return isNumberKeyDecimals(event);"/> <div style="padding: 5px 0;font-size:13px;color:#222">Enter Radius (in m)</div> <input type="number" style="width: 254px; margin-right: 10px;padding:5px;border:1px solid #ddd;color:#555" id="radius" placeholder="radius" autocomplete="off" onkeypress="if (event.which == 13 || event.keyCode == 13) showCircle(); return isNumberKeyDecimals(event);"/> <br/><br/><button onclick="showCircle();">Search</button> </div> <div style="margin-top: 20px"> <ul style=" line-height: 20px; font-size: 12px;"> <li>Drag marker to geofence at your desired location</li> </ul> </div> <div style="border-top: 1px solid #e9e9e9;margin-top: 20px;padding: 10px 10px 5px 17px;font-size: 13px;" id="result">loading..</div> </div> <!--put your map container here--> <div id="map"></div> </body> </html>

Cluster

The code sample drawing cluster on map:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"lang="en" xml:lang="en"> <head> <title>MapmyIndia Maps API: Map properties and events</title> <link rel="icon" href="http://mapmyindia.com/images/favicon.ico" type="image/x-icon"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> html { height: 100%; } body { height: 100%;font-family:Verdana,sans-serif, Arial;color:#000;margin: 0; font-size:14px; padding: 0; } #map { position: absolute; left: 312px; top: 46px; right: 2px; bottom: 2px; border: 1px solid #cccccc; } #result { position: absolute; left: 2px; top: 46px; width: 306px; bottom: 2px; border: 1px solid #cccccc; background-color: #FAFAFA; overflow: auto; } button{width: 220px;font-family:Verdana,sans-serif, Arial;font-size:12px;padding:2px 0;color:#333} </style> <link rel="stylesheet" href="css/leaflet.css" /> <!--put your map api javascript url with key here--> <script src="https://apis.mapmyindia.com/advancedmaps/v1/<js_lic_key>/map_load?v1.1"></script> <script> var map = null; window.onload = function() { var centre = new L.LatLng(28.549948, 77.268241); map=new MapmyIndia.Map('map',{center:centre,zoomControl: true,hybrid:true }); /*1.create a MapmyIndia Map by simply calling new MapmyIndia.Map() and passsing it at the minimum div object, all others are optional... 2.all leaflet mapping functions can be called simply on the L object 3.MapmyIndia may extend and in future modify the customised/forked Leaflet object to enhance mapping functionality for developers, which will be clearly documented in the MapmyIndia API documentation section.*/ var event_div = document.getElementById("event-log"); /***map-events****/ map.on("dblclick", function(e) { var pt = e.latlng;/*event returns lat lng of clicked point*/ event_div.innerHTML= "dbclick:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>" + event_div.innerHTML; }); map.on("click", function(e) { var pt = e.latlng;/*event returns lat lng of clicked point*/ event_div.innerHTML= "click:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>" + event_div.innerHTML; }); map.on("resize", function(e) { event_div.innerHTML="map resized</br>" + event_div.innerHTML; }); map.on("mouseup", function(e) { var pt = e.latlng;/*event returns lat lng of current point*/ event_div.innerHTML = "mouseup:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>" + event_div.innerHTML; }); map.on("mousedown", function(e) { var pt = e.latlng;/*event returns lat lng of current point*/ event_div.innerHTML = "mousedown:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>" + event_div.innerHTML; }); }; function mapmyindia_current_zoom_level() { var zoom = map.getZoom();/*returns the current zoom level*/ var event_div = document.getElementById("event-log"); event_div.innerHTML=''; event_div.innerHTML= "Current zoom level:" + zoom + "</br>"+event_div.innerHTML; } function mapmyindia_current_center_location() { var pt = map.getCenter();/*returns the center of map*/ var event_div = document.getElementById("event-log"); event_div.innerHTML=''; event_div.innerHTML= "Current Center:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>"+event_div.innerHTML; } function mapmyindia_current_bound() { var bounds = map.getBounds();/*Returns the rectangle in WGS coordinates that is currently displayed in the containing HTML element i.e Map.*/ var event_div = document.getElementById("event-log"); event_div.innerHTML=''; event_div.innerHTML= "current bound:</br> north east lat:" + bounds.getNorthEast().lat + "</br> north east lng:" + bounds.getNorthEast().lng + "</br>south west lat:" + bounds.getSouthWest().lat + "</br>south west lng:" + bounds.getSouthWest().lng + "</br>"+event_div.innerHTML; } function mapmyindia_map_pan() { var pt=new L.LatLng(28.559835482012822,77.28323936462401); var event_div = document.getElementById("event-log"); event_div.innerHTML=''; event_div.innerHTML= "Map pan to:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>"+event_div.innerHTML; map.panTo(pt);/*Pans the map to a given lat long */ } function mapmyindia_set_center_and_zoom_level() { var pt = new L.LatLng(28.549948, 77.268241);/*WGS location object*/ map.setView(pt, 8);/*function that modifies both center map position and zoom leveL.*/ } function mapmyindia_array_of_location_fit_into_bound() { var latitudeArr = [28.549948, 28.552232, 28.551748, 28.551738, 28.548602, 28.554603, 28.545639, 28.544339, 28.553196, 28.545842]; var longitudeArr = [77.268241, 77.268941, 77.269022, 77.270164, 77.271546, 77.268305, 77.26480, 77.26424, 77.265407, 77.264195]; var maxlat = Math.max.apply(null, latitudeArr); var maxlon = Math.max.apply(null, longitudeArr); var minlat = Math.min.apply(null, latitudeArr); var minlon = Math.min.apply(null, longitudeArr); var southWest = L.latLng(maxlat, maxlon);/*south-west WGS location object*/ var northEast = L.latLng(minlat, minlon);/*north-east WGS location object*/ var bounds = L.latLngBounds(southWest, northEast);/*This class represents bounds on the Earth sphere, defined by south-west and north-east corners.i.e Creates a new WGS bounds.*/ map.fitBounds(bounds);/*Sets the center map position and level so that all markers is the area of the map that is displayed in the map area*/ } function mapmyindia_move_to_center() { var pt = new L.LatLng(28.549948, 77.268241);/*WGS location object*/ map.setView(pt);/* new map position to be in the middle of the HTML element where map is drawn.*/ var event_div = document.getElementById("event-log"); event_div.innerHTML=''; event_div.innerHTML= "Map pan to:</br> lat:" + pt.lat + "</br>lng:" + pt.lng + "</br>"+event_div.innerHTML; } function mapmyindia_zoom_in() { map.zoomIn();/*Zooms in one zoom step, unless current zoom level is the minimal zoom level. */ var zoom=map.getZoom();/*zoom must be number that is set as new zoom level between 1 and 16*/ var event_div = document.getElementById("event-log"); event_div.innerHTML=''; event_div.innerHTML= "Zoom level set to: "+ zoom +event_div.innerHTML; } function mapmyindia_zoom_out() { map.zoomOut();/*Zooms out one zoom step, unless current zoom level is the maximal zoom level. */ var zoom=map.getZoom();/*zoom must be number that is set as new zoom level between 1 and 16*/ var event_div = document.getElementById("event-log"); event_div.innerHTML=''; event_div.innerHTML= "Zoom level set to: "+ zoom +event_div.innerHTML; } function mapmyindia_set_zoom() { var zoom=12; map.setZoom(zoom);/*zoom must be number that is set as new zoom level between 1 and 16*/ var event_div = document.getElementById("event-log"); event_div.innerHTML=''; event_div.innerHTML= "Zoom level set to: "+ zoom +event_div.innerHTML; } </script> </head> <body> <div style="border-bottom: 1px solid #e9e9e9;padding:10px 12px;"><span style="font-size: 20px">MapmyIndia Maps API: </span><span style="font-size:16px;color:#777">Map Properties and Events</span></div> <div id="result"> <div style="padding: 16px 12px 6px 38px"><button onclick="mapmyindia_current_zoom_level()" style="width: 220px;">Get current zoom level</button></div> <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_current_center_location()" style="width: 220px;">Get current map center</button></div> <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_current_bound()" style="width: 220px;">Get current map bound</button></div> <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_map_pan()" style="width: 220px;">Map pan</button></div> <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_move_to_center()" style="width: 220px;">Move to center</button></div> <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_set_zoom()" style="width: 220px;">Set zoom level</button></div> <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_set_center_and_zoom_level()" style="width: 220px;">Set center and zoom level</button></div> <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_array_of_location_fit_into_bound()" style="width: 220px;">Array of location fit into Bound</button></div> <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_zoom_in()" style="width: 220px;">Zoom in</button></div> <div style="padding: 6px 12px 6px 38px;"><button onclick="mapmyindia_zoom_out()" style="width: 220px;">Zoom out</button></div> <div style="padding:6px 12px 1px; border-bottom:1px solid #e9e9e9"><ul style=" line-height: 20px; font-size: 12px; color: #555"> <li>Click anywhere on the map</li> <li>Double click anywhere on the map </li> <li>Mouse up on the map anywhere </li> <li>Mouse down on the map anywhere</li> <li>Change the zoom level or pan the map</li> </ul></div> <div style="padding:14px 12px 6px 38px;color: #666;">Event Logs</div> <div style="padding:6px 12px 6px 38px;color: #777; font-size: 12px; line-height: 22px;" id="event-log"></div> </div> <div id="map"></div> </body> </html>