0

I am trying Leaflet KML plugin as below:

https://github.com/windycom/leaflet-kml

const map = new L.Map('map', { center: new L.LatLng(28.412, 77.317), zoom: 11 });

It works, loads the KML over OSM, running as localhost on server but if am changing lat longs or zoom level, it still shows the same location area always. It seems like these settings are not giving any effect. I want to point it to the specific lat long of the user who views it and with specific zoom level.

Here is full code:

<html>
    <head>
<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>
</head>
<body>
    <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');

        map.addLayer(osm);

        // Load kml file
        fetch('assets/TestKml.kml')
            .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);
                map.addLayer(track);

                // Adjust map to show the kml
                const bounds = track.getBounds();
                map.fitBounds(bounds);
            });
    </script>
</body>

If I remove the KML file, then lat long pointing and zoom works fine.

It would be great if you clarify one more thing. I have KML file of my whole country that size around 15-20 MB. If I load entire KML then the map will download and load full KML of 15-20 MB on user side or the KML loads in chunks as and when user drags to other locations of country.

  • In what way is your problem connected with KML plugin/layer? Is the map displaying OK without KML layer? Dou you happen to have something like map.fitBounds(bounds) in your code? Please edit your question and add additional details/code. – TomazicM Jul 19 at 17:36
  • It works fine if i remove KML file. I have added full code. Please see. – Ashish Kataria Jul 19 at 17:44
  • If i remove map.fitBounds(bounds); then lat long and zoom starts working. Thanks @TomazicM for your help. – Ashish Kataria Jul 19 at 17:58
  • @TomazicM, It would be great if you clarify one more thing. I have KML file of my whole country that size around 15-20 MB. If I load entire KML then the map will download and load full KML of 15-20 MB on user side or the KML loads in chunks as and when user drags to other locations of country. – Ashish Kataria Jul 19 at 18:06
  • 1
    If you have another question, please post it as separate question. – TomazicM Jul 19 at 18:11

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.