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 www.MapShaper.org. 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

HTML File

<!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="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> <script src="src/india_geo.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" 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(feature.properties.Zone), weight: 1, opacity: 1, color: 'grey', dashArray: '0', fillOpacity: 1 }; } var map = L.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: '+feature.properties.ST_NM+'</h3>'); } }).addTo(map); // Add OSM tile layer with correct attribution //var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; //var osmAttrib='Map data © <a href="https://openstreetmap.org">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}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', { maxZoom: 20, subdomains: ['mt0', 'mt1', 'mt2', 'mt3'] }, attribution: 'Map data © <a href="https://maps.google.com">Google</a> contributors').addTo(map); </script> </html>

main.css

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

India_geo.js

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] ]]] } }]

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.