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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions