---

layout: default

---

<link rel="stylesheet" href="https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet.css" integrity="sha256-P+hWJNlpL+GBSRYC7cdsDbQH91URmpDeOzLp7DbFRtE=" crossorigin="" />

<script type="importmap">

{

"imports": {

"leaflet": "https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet.js"

}

}

<div id="map" style="height:550px;"></div>

<div id="note">

<br />

<b>Note</b>:<br />

The markers on the map are on city basis, they might not represent the exact location.<br />

Some cities may be missing due to error in getting the geocode.<br />

This map is rendered using Leaflet, OpenStreetMap, and the Geoapify API. <a href="https://www.openstreetmap.org/copyright" title="OpenStreetMap.org" target="_blank">Data © OpenStreetMap contributors, ODbL 1.0.</a>,

<script type=module>

import L, {Map, TileLayer, GeoJSON} from 'leaflet';

const map = new Map('map').setView([0, 5], 2);

const tiles = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {

maxZoom: 15,

attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'

}).addTo(map);

//loading geojson data and applying the layer(marker) on map

var xmlHttp = new XMLHttpRequest();

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4 && xmlHttp.status == 200){

const data = JSON.parse(xmlHttp.responseText);

new GeoJSON(data, {

onEachFeature: function (feature, layer) {

layer.bindPopup(feature.properties.loc);

}

}).addTo(map);

}

}

xmlHttp.open('GET', 'geo.json', true); // true for asynchronous

xmlHttp.send(null);