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"> <head> <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> </head> <body> Map of India - Not 100% to scale. Simplified Coordinates for Web-based illustration and visualisation purposes <div id="mapIndia1"> </div> </body> <script> 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>'); } }).addTo(map); // 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}); //map.addLayer(osm); // 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); </script> </html>
Code language: HTML, XML (xml)


#mapIndia1 { margin: auto; height: 90vh; width: 730px; }
Code language: CSS (css)


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 = [{ "type":"Feature", "properties":{ "Zone":2, "ST_NM":"Andaman & Nicobar Island"}, "geometry":{ "type":"MultiPolygon", "coordinates":[[[ [93.84861388352397,7.240511941073294], [93.73864250664644,7.190689919704084], [93.69123542847228,7.19085093252454], [93.65621511573505,7.126739829579492], [93.67784740013747,7.016118856200308], [93.74676860258899,6.961872622723433] ]]] } }]
Code language: JavaScript (javascript)

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.