Changing opacity for KML with linked icon, fetched by leaflet map

Question

I have been struggling with setting the proper opacity in the icon image linked to .kml file, which is next implemented to the Leaflet map.

I used the leaflet-kml plugin based here:

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

and after attachment of the L.KML.js my code looks like this:

 var track

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

            // Create new kml overlay
            parser = new DOMParser();
            kml = parser.parseFromString(kmltext,"text/xml");
            track = new L.KML(kml);
            //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 )
      });

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

I was trying also:

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

but it wasn't work.

My CSS looks like this:

    #sldOpacity
    {
    opacity: 0.7;
    }

    #image-opacity
    {
    opacity: 0.7;
    }

and HTML

   <span id="image-opacity">0.5</span>
   <input type="range" id="sldOpacity" min="0" max="1" step="0.1" value="0.5" />

the CSS affect the HTML range only, making it transparent, whereas the image remains still opaque.

How to change opacity of image imported as Icon in KML document?

https://jsfiddle.net/woosmap/3za64ksx/

that works for Google Maps API.

A good example is here:

But it works fine for polygons only, whereas my issue apply to image lionked in .kml file, which looks like this:

 <GroundOverlay>
<name>Coventry.tif</name>
<description>http://localhost/testc/Coventry.tif</description>
<Icon>
    <href>https://i.imgur.com/58CbNhB.png</href>
    <viewBoundScale>0.75</viewBoundScale>
</Icon>
<color>55ffffff</color>
<LatLonBox>
    <north>52.39388512224325</north>
    <south>52.39299906007814</south>
    <east>-1.458241039649089</east>
    <west>-1.460061203494303</west>
</LatLonBox>
 </GroundOverlay>

The icon section works only in Google Earth, but not in leaflet.

Also this solution looks like sth good, but it's valid for GeoJSON file only...

Change opacity using leaflet without plugin

Possibly this link could bring some solution:

http://michaelminn.net/tutorials/leaflet/

but unfortunately I am not able to see the standalone map source code.

Do you have any solutions?

Thanks & Regards

MKR MKR · Accepted Answer · 2019-10-22T08:46:40

The answer for this question can bring using a different KML plugin for leaflet, based in the file KML.js as per the plugin below:

https://github.com/shramov/leaflet-plugins

where your sccript snippet should look like this:

  var track = new L.KML('Coventry.kml', {async: true})
.on('loaded', function (e) {
    map.fitBounds(e.target.getBounds());
})
.addTo(map);
  L.control.layers({}, {'Track':track}).addTo(map);

And this library recognizes an Image opacity properties set in the .XML code:

   <color>55ffffff</color>

when your image comes from the web

    <Icon>
<href>https://i.imgur.com/58CbNhB.png</href>
    </Icon>

Changing opacity for KML with linked icon, fetched by leaflet map

1 Answers