heigeo / leaflet.wms

A Leaflet plugin for working with Web Map services, providing: single-tile/untiled/nontiled layers, shared WMS sources, and GetFeatureInfo-powered identify.
http://heigeo.github.io/leaflet.wms/
MIT License
244 stars 135 forks source link

"load" event for overlay #68

Open greyeagle opened 4 years ago

greyeagle commented 4 years ago

Relates to https://github.com/heigeo/leaflet.wms/pull/44

Problem I have had some issues with loading control on my leaflet project. I could not get a proper loading feedback to the user because the overlay layer does not have a "load" event like the tile layer does. That means the loading indicator will never stop.

Possible solution It would be very helpful to fire a "load" event once the overlay layer is loaded. I suggest the following minimal change:

'update': function() {
        if (!this._map) {
            return;
        }
        // Determine image URL and whether it has changed since last update
        this.updateWmsParams();
        var url = this.getImageUrl();
        if (this._currentUrl == url) {
            return;
        }
        this._currentUrl = url;

        // Keep current image overlay in place until new one loads
        // (inspired by esri.leaflet)
        var bounds = this._map.getBounds();
        var overlay = L.imageOverlay(url, bounds, {'opacity': 0});
        overlay.addTo(this._map);
        overlay.once('load', _swap, this);
        function _swap() {
            if (!this._map) {
                return;
            }
            if (overlay._url != this._currentUrl) {
                this._map.removeLayer(overlay);
                return;
            } else if (this._currentOverlay) {
                this._map.removeLayer(this._currentOverlay);
            }
            this._currentOverlay = overlay;
            overlay.setOpacity(
                this.options.opacity ? this.options.opacity : 1
            );
            if (this.options.isBack === true) {
                overlay.bringToBack();
            }
            if (this.options.isBack === false) {
                overlay.bringToFront();
            }
            this.fire("load");
        }
        if ((this._map.getZoom() < this.options.minZoom) ||
            (this._map.getZoom() > this.options.maxZoom)){
            this._map.removeLayer(overlay);
        }
    },

It is just the this.fire("load"); once leaflet fired "load" and everything alse is done. This holds true for each end every browser supported by leaflet. Thank you for considering.

greyeagle commented 4 years ago

You also need this.fire("loading"); to start the updating, I forgot.