leaflet-kml icon indicating copy to clipboard operation
leaflet-kml copied to clipboard

Wrong icon loading

Open andrey-serdyuk opened this issue 4 years ago • 3 comments

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

andrey-serdyuk avatar Aug 01 '21 09:08 andrey-serdyuk

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>

peter450 avatar Oct 13 '21 10:10 peter450

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>

hyzteric avatar Jun 16 '22 12:06 hyzteric

Thanks hyzteric, that resolved one of my issues for me.

DStillingfleet avatar Jul 21 '22 07:07 DStillingfleet