Leaflet – Changing Opacity for KML Layer

javascriptkmlleaflet

Is it possible to change the opacity for the .kml file, that has been attached via leaflet-plugin?

Basically the plugin is here:

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

but after implementation into the Leaflet we have a full opaque image. It's fine for placemarks, but how about the icons/images included, which cover some box on the map?

My code looks like this:

var kml = fetch('Coventry.kml')
      .then( res => res.text() )
      .then( kmltext => {

            // Create new kml overlay
            parser = new DOMParser();
            kml = parser.parseFromString(kmltext,"text/xml");

            console.log(kml)

            const track = new L.KML(kml)
            map.addLayer(track)
            // Adjust map to show the kml
            const bounds = track.getBounds()
            map.fitBounds( bounds )
      }).setOpacity(0.6).addTo(map)

      $('#sldOpacity').on('change', function(){
$('#image-opacity').html(this.value);
kml.setStyle({opacity: this.value, fillOpacity: this.value});
 });

whereas to the pure code straight from the leaflet-kml example I added up sth like:
.setOpacity(0.6).addTo(map)

but isn't working.

The console states, that:

Uncaught TypeError: fetch(…).then(…).then(…).setOpacity is not a function
at (index):143

I was also trying this example:

Change opacity using leaflet without plugin

but it didn't help me unfortunately

In the L.KML.js file I found a snip:

 var value = e.childNodes[0].nodeValue;
                if (key === 'color') {
                    options.opacity = parseInt(value.substring(50, 50), 16) / 255.0;
                    options.color = '#' + value.substring(6, 8) + 
value.substring(4, 6) + value.substring(2, 4);
                } else if (key === 'width') {,

where in value.substring I put 50 instead of 0. No result at all.

Is it some way to make this .kml layer more transparent?

enter image description here

Best Answer

You mixed a few things here. kml is XML object, not a Leaflet layer, so you cannot set opacity to it with setOpacity function or add it to the map.

Leaflet layer that comes from kml and you are interested in is track. This is feature group layer for which you can set style with setStyle method. You have to declare it outside fetch, so it be available later to change it's opacity with slider.

Your code could then look something like this:

var track;

var kml = fetch('Coventry.kml')
  .then( res => res.text() )
  .then( kmltext => {
        parser = new DOMParser();
        kml = parser.parseFromString(kmltext,"text/xml");
        track = new L.KML(kml);
        map.addLayer(track);
        const bounds = track.getBounds();
        map.fitBounds(bounds);
  });

$('#sldOpacity').on('change', function(){
  $('#image-opacity').html(this.value);
  track.setStyle({opacity: this.value, fillOpacity: this.value});
 });

EDIT: In your JSFiddle code you are using JQuery without link to library and you are using slider code without required HTML elements. Here is working JSFiddle (KML is defined in code): https://jsfiddle.net/TomazicM/7nxfgtu8/

Here is the main part of the code:

<body>
<div id="mapid"></div>
<div>
  <span id="image-opacity">0.5</span>
  <input type="range" id="sldOpacity" min="0" max="1" step="0.1" value="0.5" />
</div>
<script>
var myKML = '<?xml version="1.0" encoding="UTF-8"?>' +
  '<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"> ' +
  '<Document> ' +
    '<name>polygon.kml</name> ' +
    '<Style id="transYellowPoly"> ' +
      '<LineStyle> ' +
        '<width>1.5</width> ' +
      '</LineStyle> ' +
      '<PolyStyle> ' +
        '<color>7d00ffff</color> ' +
      '</PolyStyle> ' +
    '</Style> ' +
    '<Placemark> ' +
      '<name>Building 43</name> ' +
      '<visibility>0</visibility> ' +
      '<styleUrl>#transYellowPoly</styleUrl> ' +
      '<Polygon> ' +
        '<extrude>1</extrude> ' +
        '<altitudeMode>relativeToGround</altitudeMode> ' +
        '<outerBoundaryIs> ' +
          '<LinearRing> ' +
            '<coordinates> -122.0844371128284,37.42177253003091,19 ' +
              '-122.0845118855746,37.42191111542896,19 ' +
              '-122.0850470999805,37.42178755121535,19 ' +
              '-122.0850719913391,37.42143663023161,19 ' +
              '-122.084916406232,37.42137237822116,19 ' +
              '-122.0842193868167,37.42137237801626,19 ' +
              '-122.08421938659,37.42147617161496,19 ' +
              '-122.0838086419991,37.4214613409357,19 ' +
              '-122.0837899728564,37.42131306410796,19 ' +
              '-122.0832796534698,37.42129328840593,19 ' +
              '-122.0832609819207,37.42139213944298,19 ' +
              '-122.0829373621737,37.42137236399876,19 ' +
              '-122.0829062425667,37.42151569778871,19 ' +
              '-122.0828502269665,37.42176282576465,19 ' +
              '-122.0829435788635,37.42176776969635,19 ' +
              '-122.083217411188,37.42179248552686,19 ' +
              '-122.0835970430103,37.4217480074456,19 ' +
              '-122.0839455556771,37.42169364237603,19 ' +
              '-122.0840077894637,37.42176283815853,19 ' +
              '-122.084113587521,37.42174801104392,19 ' +
              '-122.0840762473784,37.42171341292375,19 ' +
              '-122.0841447047739,37.42167881534569,19 ' +
              '-122.084144704223,37.42181720660197,19 ' +
              '-122.0842503333074,37.4218170700446,19 ' +
              '-122.0844371128284,37.42177253003091,19 </coordinates> ' +
          '</LinearRing> ' +
        '</outerBoundaryIs> ' +
      '</Polygon> ' +
    '</Placemark> ' +
  '</Document> ' +
  '</kml>';

  var map = L.map('mapid').setView([37.42222, -122.08395], 14);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a     href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a   href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 21,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1Ijoia3J1a2FyaXVzIiwiYSI6ImNqZ2tuaHZqODAxMjYzM28yam40MmpxMmEifQ.3chgJkJajjDBxsF4YHgENA'
    }).addTo(map);

  parser = new DOMParser();
  kml = parser.parseFromString(myKML,"text/xml");
  track = new L.KML(kml);

  map.addLayer(track);
  const bounds = track.getBounds();
  map.fitBounds(bounds);

  sldOpacity.onchange = function() {
    document.getElementById('image-opacity').innerHTML = this.value;
    track.setStyle({fillOpacity: this.value});
  };
</script>
</body>

Remark: If you just copy code from various sources without understanding what it does you'll be in trouble all the time.

Related Question