Mapping of KML Files with Leaflet and Leaflet-KML Plugin

Created by: Sujan Chandra Mondol
Course : CE 514 - Geospatial Software Development
Assignment number/name: A6 - Use KML in Leaflet
Date: 30 January, 2025

What's Been Done
This webpage use the leaflet-kml plugin on top of leaflet library to use the KML vector files for the mapping purpose.
First, the administrative boundary dataset of Bangladesh was downloaded in shapefile format from a online source.
Then, the preferred administrative boundaries were extracted using SELECT tool in ArcGIS.
After that, the chosen layers of administrative boundaries were converted to KML files using the Layer to KML tool in ArcGIS.
Later on, a javascript file was created with several functions to read KML files using the leaflet-kml plugin.
The mechanism is designed in such a way that the kml corresponding to whole Bangladesh is shown by default whereas clicking on a different option from menu bar will read the corresponding KML file and add the layer on map.
The layer also has the functionality to show a information bubble with the layer name and corresponding KML filename.

JavaScript Code Used

// Creating map options
var mapOptions = {
    center: [23.834012, 90.467032],
    zoom: 7
    }
    // Creating a map object
    var map = new L.map('map', mapOptions);
    // Creating a Layer object
    var layer = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }).addTo(map);

function kml_mapper(file, colorcode, infoBubble) {
    // Load kml file
    fetch(file)
        .then(res => res.text())
        .then(kmltext => {
            // Create new kml overlay
            const parser = new DOMParser();
            const kml = parser.parseFromString(kmltext, 'text/xml');
            const style_tag ='<styleUrl>#PolyStyle00</styleUrl>';
            if (style_tag in kml) {
                kml = kml.replace(style_tag, "");
            };
            const track = new L.KML(kml);
            track.setStyle({color:colorcode});
            track.bindPopup(infoBubble).openPopup();
            map.addLayer(track);

            // Adjust map to show the kml
            const bounds = track.getBounds();
            map.fitBounds(bounds);
        });
};
kml_mapper('Bangladesh.kml', '#0eaf88');

function geographySelector(evt, geographyName) {
    // Declare all variables
    const colors = {'Bangladesh': '#0eaf88', 'DhakaDivision': '#6413e2', 
        'DhakaDistrict': '#ef3510', 'TejgaonCircle': 'yellow'};
    const kml_files = {'Bangladesh': 'Bangladesh.kml', 'DhakaDivision': 'DhakaDivision.kml', 
        'DhakaDistrict': 'DhakaDistrict.kml', 'TejgaonCircle': 'TejgaonCircle.kml'};
    var infoBubble = geographyName + '; KML Filename: ' + kml_files[geographyName];
    kml_mapper(kml_files[geographyName], colors[geographyName], infoBubble);
    document.getElementById('forJS').innerHTML = ('<p> Layer drawn for <a href="' + 
        kml_files[geographyName] + '" target="_blank">' + 
        kml_files[geographyName] + '</a></b></p>');
  };