India GIS Map with Leaflet

We will use Leaflet.js to make a map of India. This uses a GeoJSON dataset for India which has been simplified using The states for Telangana and Andhra Pradesh appear separate. J&K is as per India official position. There are nice pop-overs for state names.

Map of India based on GeoJSON and Leaflet
Map of India based on GeoJSON and Leaflet.js

Lets Dive in


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Map of India</title>
<link  rel="stylesheet" href="src/main.css"/>
<link  rel="stylesheet" href=""  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="src/india_geo.js"></script>
<script src="" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>

  Map of India - Not 100% to scale. Simplified Coordinates for Web-based illustration and visualisation purposes
    <div id="mapIndia1">

function getZoneColor(e) {
	return e > 5  ? '#045a8d' :
	       e > 4  ? '#74a9cf' :
	       e > 3  ? '#a6bddb' :
	       e > 2  ? '#d0d1e6' :
	       e > 1  ? '#4292c6' :
               e > 0  ? '#2171b5' :
                        '#023858' ;

function style_states1(feature) {
  return {
    fillColor: getZoneColor(,
	  weight: 1,
	  opacity: 1,
	  color: 'grey',
	  dashArray: '0',
	  fillOpacity: 1

var map ='mapIndia1').setView([22.805, 82.0], 5);
// Blank Layer to get us started
var myLayer = L.geoJSON().addTo(map);

// Add States Layer
L.geoJson(india_geo, {
    style: style_states1,
    onEachFeature: function (feature, layer) {
      layer.bindPopup('<h3>State: ''</h3>');

// Add OSM tile layer with correct attribution
//var osmUrl='https://{s}{z}/{x}/{y}.png';
//var osmAttrib='Map data © <a href="">OpenStreetMap</a> contributors';
//var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 12, attribution: osmAttrib});	

// Add Google tile layer with attribution
L.tileLayer('http://{s}{x}&y={y}&z={z}', {
	maxZoom: 20,
	subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
	}, attribution: 'Map data © <a href="">Google</a> contributors').addTo(map); 


#mapIndia1 { 
    margin: auto;
    height: 90vh; 
    width: 730px;


This is the GeoJSON File. The Zone property is used to shade the states. You can download it as a zip file here. Only a snippet is presented below

var india_geo = [{
        "ST_NM":"Andaman & Nicobar Island"}, 

While exporting the geojson from QGIS, I had certain issues about the validity of the file, specifically Right-hand rule. That was fixed using Mapster. Further the QGIS output had a FeatureCollection top level group which I deleted to decrease nesting level in the GeoJSON file.