Skip to content

Icon size and Marker position are hardcoded #38

@hyzteric

Description

@hyzteric

Hi,
I got an issue with my marker custom icons being 32px by 37px in size and the anchor being at coordinates : 15,35
Those values are hardcoded in L.KML.js in the definition of L.KMLIcon at values :

iconSize: [32, 32],
iconAnchor: [16, 16],

I made some changes so I can put the size and anchor location in the .kml file and have them changed dynamically to support different markers options.
I don't know if it's the best way to do it, but it works...

Here is what I did :

Line 129 :

var iconOptions = {
  iconUrl: ioptions.href,
  shadowUrl: null,
  anchorRef: {x: ioptions.x, y: ioptions.y},
  anchorType:	{x: ioptions.xunits, y: ioptions.yunits}
};

Modify like this :

let arrayIconAnchor = [16,16];
let arrayIconSize = [32,32];
if (xml.getAttribute('anchorX')){
  arrayIconAnchor[0] = Number(xml.getAttribute('anchorX'));
} 
if (xml.getAttribute('anchorY')){
  arrayIconAnchor[1] = Number(xml.getAttribute('anchorY'));

if (xml.getAttribute('sizeX')){
  arrayIconSize[0] = Number(xml.getAttribute('sizeX'));
 }
if (xml.getAttribute('sizeY')){
  arrayIconSize[1] = Number(xml.getAttribute('sizeY'));
}
var iconOptions = {
    iconUrl: ioptions.href,
    shadowUrl: null,
    anchorRef: {x: ioptions.x, y: ioptions.y},
    anchorType: {x: ioptions.xunits, y: ioptions.yunits},
    iconAnchor: arrayIconAnchor,
    iconSize: arrayIconSize,
};

Then line 415 :

L.KMLIcon = L.Icon.extend({
  options: {
    iconSize: [32, 32],
    iconAnchor: [16, 16],
  },
  _setIconStyles: function (img, name) {
    L.Icon.prototype._setIconStyles.apply(this, [img, name]);
  },
...

Delete the "options" definition so it becomes :

L.KMLIcon = L.Icon.extend({
  _setIconStyles: function (img, name) {
    L.Icon.prototype._setIconStyles.apply(this, [img, name]);
  },
...

In your KML just add the parameters like this :

<Style id='bus.png' anchorX='15' anchorY='35' sizeX='32' sizeY='37'>
  <IconStyle>
    <Icon>
      <href>"+webappUrl+"plugins/images/bus.png</href>
    </Icon>
  </IconStyle>
</Style>

Hope it helps anyone.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions