[GIS] Leaflet error: h.fn is undefined when using layer.on(‘loading’) event

dynamic-layeresri-leafletjavascriptleaflet

In my Leaflet application (version 1.0.1 1.0.3) I connect to ArcGIS Server via the Esri Leaflet plugin. I load the layer as dynamic layer:

var layerUrl = "http://localhost:6080/arcgis/rest/services//service1/MapServer";
var layer1 = L.esri.dynamicMapLayer({ 
   url: layerUrl, 
});

I only load this layer when a checkbox is clicked:

if (checkBox.checked){
    map.addLayer(layer);
}

Now my goal is, to show the cursor as 'wait' during the layer is loading. So I add this line:

layer.on('loading' , cursorWait());

The cursorWait function is this:

function cursorWait() {
    document.body.className = 'wait';
}

CSS:

.wait, .wait * { cursor: wait; }

Which works great, but now I get error messages on my console:

TypeError: h.fn is undefined  leaflet.js:5:4965
    fire                     file:///C:/folder1/Leaflet/LeafletLib/Leaflet/leaflet.js:5:4965
    _renderImage             https://cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.7/esri-leaflet.js:5:10474
    _requestExport/<         https://cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.7/esri-leaflet.js:5:17673
    _createServiceCallback/< https://cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.7/esri-leaflet.js:4:24163
    bound                    self-hosted:916:17
    createRequest/httpRequest.onreadystatechange https://cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.7/esri-leaflet.js:4:9620

My question is: does someone know why these error messages occur?
What really bugs me, that they appear only if I add the layer.on('loading',..) line, but then it appears also when I zoom in or out, although I am calling this only when the checkbox is checked. Also it seems to print an error message for each tile (?).
Am I using the layer.on('loading',..) event wrong? Or is it a bug? Should I just ignore the error messages?

Best Answer

you can (and should) skip including the parentheses when you wire up your event listener to a named function.

layer.on('loading' , cursorWait); // not cursorWait()

it appears also when I zoom in or out, although I am calling this only when the checkbox is checked.

the 'loading' event is fired each and every time a new image is requested from the map service. this happens each time the map is panned/zoomed. (reference)

unrelated tangent: we have released 10 patches for esri-leaflet since 2.0.0-beta.7, any reason you aren't upgrading?

Related Question