fails if icon size is not specified in leaflet marker options object

[rpanjwani]

If i don't specify iconSize as an option when creating a marker, then the following line fails: https://github.com/hosuaby/Leaflet.SmoothMarkerBouncing/blob/master/leaflet.smoothmarkerbouncing.js#L841

This doesn't work for me as my markers can have different icons and I don't want to load those images in order to calculate dimensions dynamically in js.

[hosuaby]

Hi, @rpanjwani . I cannot get how do you arrive to this problem. Can you please make some code snippet to show this problem ?

[ghost]

return L.divIcon( {
  iconSize: null,
  html: '<i class="markers myMarker"></i>'
} )

Will give errors and screw up the entire map. In this situation, the size is defined by the CSS, but it seems like the bouncing option depends on the size being pre-defined in the javascript to function correctly / at all.

TypeError: undefined is not an object (evaluating 'this._iconObj.options')

Edit: It seems like just using L.divIconinstead of L.icon is enough for the above error to appear.

Edit II: L.divIcon is working, but the iconSizeoption is required for all cases where L.divIcon is used, regardless if the bouncer is used on those specific icons or not.

[hosuaby]

@fjeddy Hi, sorry for late reply.
I am trying to reproduce this problem. I can not understand what kind of use case prevents you from define iconSize in javascript ? I am currently trying version 0.7.x of Leaflet, and if iconSize in not defined, marker become of size 12x12 px, doen't matter what is specified in .css

[ghost]

Hi,

A specific use case for not defining the size in JS is when the same icon group has different sized icons. Where the class name is dynamic and size / style controlled by CSS. Solving the issue is simple enough, but in theory, shouldn't be necessary to solve to begin with, and requires the size to be defined in two locations, CSS and JS.

Tho, for me, with the code stated above, i get the error as described. Your library intercepts and breaks markers that isn't using the bouncing functionality at all, due to iconSize not being defined. It doesn't do 12x12 for me (And it shouldn't).

Will see if I can give a more specific example where it breaks. I have also been messing with different Leaflet versions as a lot of plugins are out-dated with newer versions, that might be a partially responsible for some of my headache.

[hosuaby]

@fjeddy Please, check the following example and tell me how is your code is different:
https://github.com/hosuaby/Leaflet.SmoothMarkerBouncing/blob/fix/icon_size/debug/scripts/divicon.js
https://github.com/hosuaby/Leaflet.SmoothMarkerBouncing/blob/fix/icon_size/debug/styles/divicon.css

[mingkeYao]

The same question happend to me.
I changed an old marker's icon before the bounce function ,for eaxmple, I created a new icon that has a new imageUrl and a larger size , and then I used marker.setIcon() to reset the marker's icon .
As a resultnext ,I used marker.bounce() to animate my marker, a bug happened .The marker I controled was bouncing as I supposed , and it's image has changed as I set ,but the image's size stayed original,not the size I reset.
Last, I insert some cods into leaflet_smoothmarkerbouncing.js.
as next line codes into line 613

var baseIconCssTextArray=baseIconCssText.split(";");
var widthRex=/^.width.$/;
var heightRex=/^.height.$/;
for(var i=0;i<baseIconCssTextArray.length;i++){
if(widthRex.test(baseIconCssTextArray[i])){
baseIconCssTextArray[i]="width:"+icon.width+"px";
continue ;
}
if(heightRex.test(baseIconCssTextArray[i])){
baseIconCssTextArray[i]="height:"+icon.height+"px";
}
}
baseIconCssText=baseIconCssTextArray.join(";");

and then the problem has been solved.
But there is another problem,it's when i stop the bouncing marker and change the marker's icon,but the marker doesn't change at all.
If I use setImeout() to delay my operation of changing marker' icon,it works. But, it's not my will.
So can anyone help me?

[hosuaby]

Sorry for so delayed solution. Try release v1.1.5. It supposed to resolve problems with icon size

[edmsgists]

I´m using the latest version and still have this problem. To fix this I had to add another else in _calculateTransforms function, adding the default iconSize

_calculateTransforms: function() {
            if (L.Browser.any3d) {

                /* Calculate transforms for 3D browsers */

                if (this.options.icon.options.iconSize) {
                    var iconHeight = this.options.icon.options.iconSize[1];
                } else 
                    if(this._iconObj && this._iconObj.options.iconSize){
                    /* To fix the case when icon is in _iconObj */
                    var iconHeight = this._iconObj.options.iconSize[1];
                }
                else
                {
                    var iconHeight = L.Icon.Default.prototype.options.iconSize[1];
                }