Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icon size and Marker position are hardcoded #38

Open
hyzteric opened this issue Jul 15, 2022 · 0 comments
Open

Icon size and Marker position are hardcoded #38

hyzteric opened this issue Jul 15, 2022 · 0 comments

Comments

@hyzteric
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant