map.html

---
layout: default
---
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<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 Nominatim API. <a href="https://www.openstreetmap.org/copyright" title="OpenStreetMap.org" target="_blank">Data © OpenStreetMap contributors, ODbL 1.0.</a>,
</div>
<script>
    var map = L.map('map').setView([0, 5], 2);

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org" target="_blank" rel="noopener noreferrer">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank" rel="noopener noreferrer">CC-BY-SA</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){
            data = JSON.parse(xmlHttp.responseText);
            L.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);

</script>