Leaflet GeoJson addToMap Loader

Question

I would like to apologize for my level of English but I will try to do my best so to describe my problem. I have a small experience in javascript / html / ajax. I created a webgis with Leaflet. My code gets a geojson file and added to the map. My data have a big amount of size so I would like to have a loader as the user waits for the results. The scenario: The user press a button and below is the code of the button:

$("#btnFillData").click(function(){
    if (mymap.hasLayer(lyrda)) {
        mymap.removeLayer(lyrda);
    }
    var filePath=folderYears+fileMonths;
    lyrda = L.geoJSON.ajax(filePath, {style:styleDataColors, onEachFeature:processLyr}).addTo(mymap);
});

I found this: How can I create a "Please Wait, Loading..." animation using jQuery?

I tried the above solution but I believe that I do not do what I must do. In the above solution we can see:

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading"); },
    ajaxStop: function() { $body.removeClass("loading"); }    
});

Where I should paste this code? Thanks in advance!

score 0 · Answer 1 · answered Dec 17 '17 at 17:58

if you are using jquery library, i think try use to $.ajax method. you can create a function for loading for examle i am using a gif loader(true); and black transparent a background. when i must use my geojson file firstly i call loder function and the i call $.ajax method and than it will be success i call again loader function but now i give a false parameter so this function displayed to tranparent background and loader gif.

score 0 · Accepted Answer · answered Dec 18 '17 at 13:09

0

An easy way is to add your loader :

$body.addClass("loading");

Before getting the data and then after :

$body.removeClass("loading");

You can try this :

$("#btnFillData").click(function(){
    if (mymap.hasLayer(lyrda)) {
        mymap.removeLayer(lyrda);
    }
    var filePath=folderYears+fileMonths;
    $body.addClass("loading");
    lyrda = L.geoJSON.ajax(filePath, {style:styleDataColors, onEachFeature:processLyr}).addTo(mymap);
    $body.removeClass("loading");
});

answered Dec 18 '17 at 13:09

Baptiste

1,688
1
15
25

Thanks a lot! I believe that I continue to do something wrong. Now it is not give any error not I can not see the gif image. I believe that is something with CSS. Thanks again! At least I have not any errors now! – John Deligiannis Dec 18 '17 at 17:45
Check if you can show the GIF on your page at first, it's always a good way to start ! – Baptiste Dec 18 '17 at 20:20

Leaflet GeoJson addToMap Loader

2 Answers2