Skip to main content

Show only one polygon from KML loaded with Leaflet

I'm using Leaflet with Omnivore plugin to show a KML file with multiple polygons. In this KML file there are 125 polygons. I want to pick only one to show on the map. The choice is made directly via the url (for example if I want to show the polygon named "Territorio 001" the url will be something like /map?n=001). Now, I can include, load and show the entire KML, but I can't figure out how I can "select" only one polygon to show, and hide the others.

This is my code for loading and showing the basemap and 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>

And this is a part of my KML (I have included only the structure deleting some similar lines):

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <name>Nuova Mappa Residenziale</name>
    <description/>
    <Style id="poly-006064-1000-77-nodesc-highlight">
      <LineStyle>
        <color>ff646000</color>
        <width>1.5</width>
      </LineStyle>
      <PolyStyle>
        <color>4d646000</color>
        <fill>1</fill>
        <outline>1</outline>
      </PolyStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    ...
    <StyleMap id="poly-006064-1000-77-nodesc">
      <Pair>
        <key>normal</key>
        <styleUrl>#poly-006064-1000-77-nodesc-normal</styleUrl>
      </Pair>
      <Pair>
        <key>highlight</key>
        <styleUrl>#poly-006064-1000-77-nodesc-highlight</styleUrl>
      </Pair>
    </StyleMap>
    <Folder>
      <name>Fucecchio Alto 001-014</name>
      <Placemark>
        <name>Territorio 001</name>
        <styleUrl>#poly-880E4F-1000-77-nodesc</styleUrl>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <tessellate>1</tessellate>
              <coordinates>
                10.80684,43.72934,0
                ...
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <name>Territorio 002</name>
        <styleUrl>#poly-A52714-1000-77-nodesc</styleUrl>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <tessellate>1</tessellate>
              <coordinates>
                10.806808,43.734096,0
                ...
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
    </Folder>
    <Folder>
      <name>Fucecchio Nord 015-025</name>
      <Placemark>
        <name>Territorio 015</name>
        <styleUrl>#poly-FF5252-1000-77-nodesc</styleUrl>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <tessellate>1</tessellate>
              <coordinates>
                10.801615,43.736216,0
                ...
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>