Skip to main content
added 3 characters in body
Source Link
Kadir Şahbaz
  • 78k
  • 57
  • 257
  • 404

I have a KML file which I need to import in a map using LefletLeaflet. If I use leaflet-kml I can see all polygons with color set from KML file. But because I need to show only one polygon extracted for this file, in another question, someone suggestsuggests to use leaflet-omnivore which allow me to do that. In this way, for some reason, can't read the style in KML and use the blue for all polygons.

I have a KML file which I need to import in a map using Leflet. If I use leaflet-kml I can see all polygons with color set from KML file. But because I need to show only one polygon extracted for this file, in another question, someone suggest to use leaflet-omnivore which allow me to do that. In this way, for some reason can't read the style in KML and use the blue for all polygons.

I have a KML file which I need to import in a map using Leaflet. If I use leaflet-kml I can see all polygons with color set from KML file. But because I need to show only one polygon extracted for this file, in another question, someone suggests to use leaflet-omnivore which allow me to do that. In this way, for some reason, can't read the style in KML and use the blue for all polygons.

added 2207 characters in body
Source Link

And the code with leaflet-kml:

    <script type="text/javascript">
            // Make basemap
        const key = 'xxx';
        const map = L.map('map').setView([0, 0], 1);
        const gl = L.maplibreGL({
            style: `https://api.maptiler.com/maps/1cc7120b-9404-449d-8aca-dfcde7b44b89/style.json?key=${key}`
        }).addTo(map);

        map.attributionControl.setPrefix('');

            // Load kml file
            fetch('doc.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>

This is the map loaded with leaflet-omnivore:

And the code with leaflet-omnivore:

    <script type="text/javascript">
            // Make basemap
        const key = 'xxx';
        const map = L.map('map').setView([0, 0], 1);
        const gl = L.maplibreGL({
            style: `https://api.maptiler.com/maps/1cc7120b-9404-449d-8aca-dfcde7b44b89/style.json?key=${key}`
        }).addTo(map);

        map.attributionControl.setPrefix('');

            // Load kml file
            var geoJsonLayer = L.geoJSON(null, {
            // Filter desidered number
            //  filter: function(feature) {
            //    return(feature.properties.name == 'Territorio 050');
            //  },
              onEachFeature: function(feature, layer) {
                if (feature.properties.name) {
                  layer.bindPopup(feature.properties.name);
                }
              }
            });

            var kmlLayer = omnivore.kml('doc.kml', null, geoJsonLayer)
              .on('ready', function() {
                map.fitBounds(kmlLayer.getBounds());
              })
              .addTo(map);
    </script>

The KML file:

Full KML file: https://pastebin.com/LuNLcArN

This is the map loaded with leaflet-omnivore:

The KML file:

And the code with leaflet-kml:

    <script type="text/javascript">
            // Make basemap
        const key = 'xxx';
        const map = L.map('map').setView([0, 0], 1);
        const gl = L.maplibreGL({
            style: `https://api.maptiler.com/maps/1cc7120b-9404-449d-8aca-dfcde7b44b89/style.json?key=${key}`
        }).addTo(map);

        map.attributionControl.setPrefix('');

            // Load kml file
            fetch('doc.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>

This is the map loaded with leaflet-omnivore:

And the code with leaflet-omnivore:

    <script type="text/javascript">
            // Make basemap
        const key = 'xxx';
        const map = L.map('map').setView([0, 0], 1);
        const gl = L.maplibreGL({
            style: `https://api.maptiler.com/maps/1cc7120b-9404-449d-8aca-dfcde7b44b89/style.json?key=${key}`
        }).addTo(map);

        map.attributionControl.setPrefix('');

            // Load kml file
            var geoJsonLayer = L.geoJSON(null, {
            // Filter desidered number
            //  filter: function(feature) {
            //    return(feature.properties.name == 'Territorio 050');
            //  },
              onEachFeature: function(feature, layer) {
                if (feature.properties.name) {
                  layer.bindPopup(feature.properties.name);
                }
              }
            });

            var kmlLayer = omnivore.kml('doc.kml', null, geoJsonLayer)
              .on('ready', function() {
                map.fitBounds(kmlLayer.getBounds());
              })
              .addTo(map);
    </script>

The KML file:

Full KML file: https://pastebin.com/LuNLcArN

edited tags
Link
TomazicM
  • 27k
  • 24
  • 31
  • 42
Source Link
Loading