Lag on csv load from http?

[wyattp11]

Does anyone else experience lag while loading a csv from a link? The file seems to download fine(~4MB), no disruption to app function while dl'ing, but once the markers are being processed the app freezes up until loaded or ready state. Is there an event I can use to run the Jquery progress bar widget?

[rhewitt22]

@wyattp11 4MB of csv data? First that's a lot of data to download over the wire before your app can even start. Second, that's a ton of markers to throw at the browser. Try clustering your markers with leaflet markercluster.

If you're on a slow network it's going to feel sluggish no matter what if you're downloading ~5MB before your app can start.

[wyattp11]

@rhewitt22 I am already using markercluster(map is nice and responsive)... yes, it is more of a wifi app - I've testing with the Chrome simulation. My hope is to only have the user download this file once per day or week as needed(file is only updated by govt lab every week). Though, I didn't even think it could be markercluster or my likely sloppy implementation of it(I've only been writing js for 5 months). Hmm, maybe I can put this in localStorage?

[raoulalwani]

@wyattp11 how are you using Leaflet in this case? If you have such a CSV file where the data is updated weekly, you might consider having a simple backend system which stores the data. That way, your app can parse the newly uploaded csv each week to only take the new/updated records, Omnivore isn't working on such a heavy file in the browser, and your users could potentially do deeper analysis since you can start having some historical records (and there are quite a few Leaflet plugins for Time as well).

[wyattp11]

this is using mapbox.js.... I just need to load a bunch of styled markers, here is how I'm implementing omnivore with markercluster, eachLayer is my function to style the markers:

var csvLayer = omnivore.csv('URL').on('ready', function() {

var markers = L.markerClusterGroup({
    disableClusteringAtZoom: 13,
    zoomToBoundsOnClick: true,
    showCoverageOnHover: false,
    maxClusterRadius: 50,
        });

markers.addLayer(csvLayer);

csvLayer.eachLayer(eachLayer);

var overlays = {
"All Markers": markers, 
};

controller = L.control.layers(layers,overlays).addTo(map);

}).on('error', function(error) {
console.log(error);
});

Now, if I move the control add out of this function it helps load the map smoothly - no pause, file downloads in background - until the eachLayer function processes the markers and then it pauses. Must be a better way to implement? onAdd event for the custom layer???

[tmcw]

If you need to optimize for performance, I'd recommend making a normal AJAX request with $.ajax or another utility, and using the underlying csv2geojson library that leaflet-omnivore uses.