the question about create the html icon on leaflet version of 1.4.0
opened this issue · comments
Here I mainly want to talk about the problems I encountered in using BeautifyMarker. ( I am not good at English, English is not my native language, please excuse typing errors. )
What problems do I have? I meet the error when I create the html icon on leaflet version of 1.4.0
var stationStyle = {
html : '<i class="fa fa-podcast fa-2x faa-flash animated faa-slow"></i>',
borderColor : '#007FFF',
textColor : '#16A085',
innerIconStyle: 'font-size:12px;',
iconAnchor: [10, 10]
};
var geoJson = result.data;
var jsonLayer = L.geoJSON(geoJson, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: L.BeautifyIcon.icon(stationStyle)});
},
onEachFeature: function (feature, layer) {
layer.bindPopup("test");
}
});
html console print error :
leaflet-src.js:752 Uncaught TypeError: Cannot read property 'x' of undefined
at Point._add (leaflet-src.js:752)
at Point.add (leaflet-src.js:747)
at NewClass._updatePosition (leaflet-src.js:9505)
at NewClass.update (leaflet-src.js:9433)
at NewClass.onAdd (leaflet-src.js:9368)
at NewClass.onAdd (leaflet-src.js:9626)
at NewClass._layerAdd (leaflet-src.js:6583)
at NewClass.whenReady (leaflet-src.js:4450)
at NewClass.addLayer (leaflet-src.js:6645)
at NewClass.openPopup (leaflet-src.js:9850)
How do I solve problems? I modified the code of leaflet ( The code is at line 9493 ).
_updatePosition: function () {
if (!this._map) { return; }
var pos = this._map.latLngToLayerPoint(this._latlng),
offset = toPoint(this.options.offset),
anchor = this._getAnchor();
// !!! This is the judgment method I added in order to solve the error reporting problem !!!
if(anchor==undefined || anchor==null){
anchor = new Point(0,0);
}
if (this._zoomAnimated) {
setPosition(this._container, pos.add(anchor));
} else {
offset = offset.add(pos).add(anchor);
}
var bottom = this._containerBottom = -offset.y,
left = this._containerLeft = -Math.round(this._containerWidth / 2) + offset.x;
// bottom position the popup in case the height of the popup changes (images loading etc)
this._container.style.bottom = bottom + 'px';
this._container.style.left = left + 'px';
},
This problem does not appear in the 0.7.7 version of Leaflet, but the new version does.
Is this a compatibility issue?Please help to have a look, thank you!
initialize: function (options) {
this.applyDefaults(options);
//this.options = (!options || !options.html) ? L.Util.setOptions(this, options) : L.Util.setOptions(this, options);
this.options = L.Util.setOptions(this, options);
}
It seems that it's not related to the plugin. So, I am closing it.