Using JSZip to extract multiple KML files for Leaflet VectorGrid

Question

The map uses KML files to generate a single geoJSON object to pass to VectorGrid's slicer function. To improve performance, the files are served as a single KMZ and extracted using the JSZip library. We then loop through each file (KML), parse it and convert to geoJSON. The features are concatenated to a separate array which is used to create a final geoJSON object (a cheap way of merging).

var vectorGrid;

JSZipUtils.getBinaryContent('/pathto/file.kmz', function (error, data) {
    JSZip.loadAsync(data).then(function (zip) {

        var featureArray = [];

        zip.forEach(function (path, file) {
            file.async('string').then(function (data) {
                // convert to geoJSON, concatenate features array
                featureArray = featureArray.concat(geoJSON.features);
            }
        }

        var consolidatedGeoJSON = {
            'type': 'FeatureCollection,
            'features': featureArray
        };

        vectorGrid = L.vectorGrid.slicer(consolidatedGeoJSON, options);

    }
}

The idea was that once that operation was complete, I could take the final geoJSON and simply pass it to the slicer. However, due to the nature of the promises, it was always constructing the slicer first and then parsing the files after.

To get around this, I was forced to put the slicer function inside the forEach, but inside an if statement checking if the current file is the last in the zip. This allows the vectors to be drawn on the map, but now I can't enable a hover effect on each layer separately (each KML contains a specific layer used as an area outline for interaction).

The vectorGrid slider options allows you to specify a getFeatureId function, but I don't understand how to pass that id to the setFeatureStyle function in the event handlers.

Answer 1

The basic problem is that you try to assign value to vactorGrid before you assigned value to featureArray. I think that you need to use Promise.all(..). Something like that:

var zips=[];
zip.forEach(function(path,file) {
    zips.push(file.async('string');
});
Promise.all(zips).then(function(data){
 return data.map(function(value){
   return value.features;
 });
}).then(function(featureArray) {
  vectorGrid = L.vectorGrid.slicer(
    {type:'FeatureCollection',feature:featureArray}, options);
});