Epidemiology & Technology

India GIS Map with Leaflet

Vivek GuptaSeptember 30, 2019

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>Code language: HTML, XML (xml)

main.css

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

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

Related Posts