Wrong icon loading
Hi there! Currently trying to use the library to show a point on leaflet map. I'm using Leaflet 1.7.1 with L.KML plugin.
In my kml file I have an icon from network:
<Style id="icon-62-normal">
<IconStyle>
<Icon>
<href>https://maps.google.com/mapfiles/kml/shapes/triangle.png</href>
</Icon>
</IconStyle>
</Style>
Here is the way I'm loading KML file:
var track = new L.KML('../UserData/test3.kml', { async: true })
.on('loaded', function (e) {
//map.fitBounds(e.target.getBounds());
})
.addTo(map);
But formaly it trying to load another icon called marker-icon.png from local path. I have doublechecked the kml file there is no call of that icon in any place.
Could you help please? Thanks
marker-icon.png is the default icon for Leaflet marker.
Try this in your kml file, it works for me:
<Style id="icon-62-normal">
<IconStyle x="64" y="128" xunits="pixels" yunits="insetPixels">
<scale>1.2</scale>
<Icon>
<href>https://maps.google.com/mapfiles/kml/shapes/triangle.png</href>
</Icon>
<hotSpot/>
</IconStyle>
</Style>
So I found some weird behaviour about this issue. My custom icon would not show either. My kml was formatted with everything on the same line like this :
Doesn't work 👎 :
<Style id='myIcon'><IconStyle><Icon><href>https://www.somedomain.be/images/icon.png</href></Icon></IconStyle></Style>
To have the custom icon work I need to add a new line before the href tag like this :
Works alright 👍 :
<Style id='myIcon'><IconStyle><Icon>
<href>https://www.somedomain.be/images/icon.png</href></Icon></IconStyle></Style>
Thanks hyzteric, that resolved one of my issues for me.