marker._icon is null when marker was set with marker.setIcon(divIcon)

[raywu]

Context

• v1.1.4
• TypeError: Cannot read property 'style' of null
• this happens on line 626 makeMoveStep and 668 makeResizesStep when calling icon.style.cssText
• related issue, but not the same

Setup

// divIcon
L.divIcon({
  className: 'div-icon',
  iconSize: L.point(20, 20),
  html: `<i class="fas fa-male" style="color: ${ markerColor }"></i>`
});

// set icon on marker instance
marker.setIcon(divIcon)

Problem

• I notice that my markers don't have ._icon

// marker._icon
> null

// marker.options.icon
> { options:
      {
        className: "div-icon",
        iconSize: o.Point,
        html: "<i class="fas fa-male" style="color: #ed7ded"></i>"
      },
      _initHooksCalled: true
   }

Question

• Is there a preferred way to use divIcon with this plugin? What am I doing wrong with marker and divIcon?

[hosuaby]

That looks like the bug. I think the reason is that plugin not handles well situation when you change icon after marker creation. Try to solve this problem by defining icon a the same time you create a marker. Look at this example:
https://github.com/hosuaby/Leaflet.SmoothMarkerBouncing/blob/fix/icon_size/debug/scripts/divicon.js

[raywu]

@hosuaby Alexei, thanks for the link. I tried your method, but turns out ._icon is still undefined.

// setup
var bounds = [[48.824384, 2.284298], [48.872054, 2.409782]];
var lat = _.random(bounds[0][0], bounds[1][0]);
var lng = _.random(bounds[0][1], bounds[1][1]);

var marker = L.marker([lat, lng], {
            icon: L.divIcon({ className: 'ball-icon' })
        });

// console
marker._icon
> undefined
marker.options.icon
> { options: { className: "ball-icon" }, _initHooksCalled:  true }

I fixed my problem (TypeError) by making sure the marker is added to the relevant layer before calling bounce.

However, ._icon is still undefined and I'm not sure why makeMoveStep and makeResizesStep are not failing, since global icon is still relying on this._icon.

I tried this on Leaflet v1.0.2 (via mabox.js) and v1.3.1. I'll close this issue for now.

[omerts]

Hey,
I am also having this issue, but can't addTo before using setIcon, this causes a "style" of undefined error on the following line (855):

// this._icon is undefined
var styles = parseCssText(this._icon.style.cssText);

This is similar to:
Leaflet/Leaflet#311