1

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?

  • 1
    Please specify your Leaflet version. Also, be aware that using leaflet-src.js instead of leaflet.js will give you better debug info. – IvanSanchez Jun 26 '17 at 9:05
  • Thanks! I updated the post, I am currently using version 1.0.1. I will try leaflet-src.js and also maybe a newer leaflet version. – ylka Jun 26 '17 at 10:16
  • I have updated to version 1.0.3 and using leaflet-src now. The error is the same and I don't see more debug info :(. Where is it supposed to be? I am using firefox developer tools – ylka Jun 26 '17 at 11:59
  • No, the error can not be the same. You cannot see h.fn using leaflet-src.js. – IvanSanchez Jun 26 '17 at 12:09
  • Yes you are right. Now it is l.fn... but it does not give me more debug info :( – ylka Jun 26 '17 at 12:22
2

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?

  • Thanks, leaving out the parenthesis did the trick, now I don't see any error messages. But the problem is now it is not wokring as expected, beacause the wait cursor appears only immediately before the layer is shown. (Like for a ms, sometimes you don't even see it.) About the version: IvanSanchez pointed out that I am using an outdated version of esri-leaflet and upgraded since then to 2.0.8. – ylka Jun 28 '17 at 7:35
  • yup. 'loading' is not the most appropriate event for you to listen for if you'd like to show a loading indicator for the duration of time between when the layer is first checked on and an image is painted for the first time. – John Gravois Jun 29 '17 at 3:27
  • so which event would you suggest? – ylka Jun 29 '17 at 7:18
  • Ok I figured it out. Thanks @John Gravois. Now I am calling the cursorWait() function immediately after the checkbox was checked, without listening to a layer event. I was apparently overcomplicating it. – ylka Jun 29 '17 at 7:25
1

I am posting this solution in case someone is trying to implement something similar like a loading indicator:

if (checkBox.checked){
    map.addLayer(layer);
    cursorWait();
    layer.on('load', function(){document.body.classList.remove("wait");});
}

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

The problem was that I was trying to listen to the loading event which in this case makes not much sense, I can just call the 'wait' cursor when the checkbox is checked.
Thanks to John Gravois for pointing me in the right direction

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.