masajid390 / BeautifyMarker

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.