Curious behaviour of "iconShpae: 'marker'"

[Mokette]

Hi,
i'm currently try to use your beautifyMarker for leaflet instead of awesomeMarker for leaflet because you offer much more possibily for color icon/marker customization.
But i'm getting a curious behaviour of the "iconShpe:'marker'".
On your demo page the "marker" shape draw a vertical marker with the pointy head having a bottom orientation, like the regular marker of leaflet (or awesome marker) but when i use it in my projet the marker has a rotation that is not correct :s
don't understand why it done that :/

(on the left, the expected behaviour, on the right the behaviour i got !)

This is the way a use the icon, seems a correct declaration ?

this.markerExtinguisher = L.BeautifyIcon.icon({
            prefix:'fa',
            icon: 'fire-extinguisher',
            iconShape: 'marker',
            borderColor: '#972F32',
            textColor: 'white',
            backgroundColor: '#972F32',
            asset: {
                name : "extinguisher",
                type : "extinguisher",
                subType : "node",
                location: {
                    x: "",
                    y: ""
                }
            }
        });

I use leaflet 1.3.1 and your last version of beautifyIcon.
Seems that leaflet > 1.0.0 use transform3d to move marker, is it possible that may cause trouble with the way you configure your marker shape icon ?

Thanks by advance for your help !
Regards,
Mokette

[Muhammad Arslan Sajid]

Could you please share the code where you are using these options to create marker?
Actually i tried your options to reproduce the issue, but it is working fine.

[Mokette]

Hi,
Thanks for the answer :)
Have you update the leaflet version too to begin your test ? :)
Cause it works with me with the 0.7.7 version of leaflet, but in this project we work with the 1.3.1 version of leaftlet and the strange orientations occurs with this version.

If i update the leaftlet version, doesn't work anymore, here a fiddle were i did it !

JsFiddle test

Regards,

[Mokette]

And on second post, here how i use the options for markers.

this.markerExtinguisher = L.BeautifyIcon.icon({
  prefix:'fa',
  icon: 'fire-extinguisher',
  iconShape: 'marker',
  borderColor: '#972F32',
  textColor: 'white',
  backgroundColor: '#972F32',
  asset: {
    name : "extinguisher",
    type : "extinguisher",
    subType : "node",
    location: {
      x: "",
      y: ""
    }
  }
});

let newMarker = L.marker([this.allNodes[n].location.y,this.allNodes[n].location.x], {icon:this.markerExtinguisher, draggable:true, id: this.allNodes[n].id})
  .on('click', (e: any) => {
    $('#myModal').modal('show');
    this.selectedMarker = {
      id: e.target.options.id,
      type: e.target.options.icon.options.asset.type,
      subType: e.target.options.icon.options.asset.subType,
      name: e.target.options.icon.options.asset.name,
      location : {
        x : this.allNodes[n].location.x,
        y : this.allNodes[n].location.y
      },
    }
  })
  .on('dragend', (e: any) => {
    if((e.target._latlng.lng > this.mapDatas.dimensions.width ||  e.target._latlng.lng <= 0) || (e.target._latlng.lat > this.mapDatas.dimensions.height || e.target._latlng.lat <= 0)) {
      var msg = this.translateService.instant("asset placed out");
      this.notifService.addErrorNotif(msg);
      e.target.setLatLng([e.target.options.icon.options.asset.location.y, e.target.options.icon.options.asset.location.x]).update();
    } else {
      let assetToEdit = {
        id: e.target.options.id,
        type: e.target.options.icon.options.asset.type,
        subType: e.target.options.icon.options.asset.subType,
        name: e.target.options.icon.options.asset.name,
        location : {
          x : e.target._latlng.lng,
          y : e.target._latlng.lat
        },
      }
      this.editAsset(assetToEdit);
    }
  })
  .addTo(this.mymap);

[Muhammad Arslan Sajid]

Hey @Mokette, your fiddle was not working due to following reason:
Order of resources are not correct, please drag up the leaflet js and CSS file and it worked for me with leaflet 1.3.

you can add me on skype, then maybe I would be help you to get rid of this issue, skype: marslan390

Thanks

[Mokette]

Hey !
Yes thanks for the tip ! it works fine with fixing order of resources :)
And have double check in my project app and fix the order of resources too and it works ! (what a stupid error ><)
Thanks a lot :)
Regards,