I am trying Leaflet KML plugin as below:


Here is full code:

<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="http://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
<script src="http://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script src="./L.KML.js"></script>
    <div style="width: 100vw; height: 100vh" id="map"></div>
    <script type="text/javascript">
        // Make basemap
        const map = new L.Map('map', { center: new L.LatLng(28.412, 77.317), zoom: 11 });
        const osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');


    // Load kml file
        .then(res => res.text())
        .then(kmltext => {
            // Create new kml overlay
            const parser = new DOMParser();
            const kml = parser.parseFromString(kmltext, 'text/xml');
            const track = new L.KML(kml);

            // Adjust map to show the kml
            const bounds = track.getBounds();

I have KML file of my whole country that size around 15-20 MB. As the code shows the way I loaded KML, I have a doubt that the map gets downloaded and load full KML of 15-20 MB on user's browser side in one go or the KML loads in chunks as and when user drags to other locations of country. I don't want KML to be loaded entirely in one go and slow down loading at browser side. Is it possible to load in chunks as and when user drags map to other locations of country?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.