Leaflet big GeoJson file Ajax filter best performance-CodePudding

I have four 2MB geoJson files with four Layer to load like

LayerBoon = L.geoJSON.ajax(URL, {pointToLayer:returnBoonMarker, filter:filtertext});

with a filter function and this button click function

$("#btnFindText").click(function(){
    SeachTXT = $("#txtFind").val();
    LayerSt.refresh();
    LayerPr.refresh();
    LayerHL.refresh();
    LayerBoon.refresh();
})

every Layer have to re-filter by clicking the button.

when filtering, is it possible not to reload the file each time, keep it in cache and filter it again?

CodePudding user response：

The easiest way to do this is to use fetch:

const api = 'json_boon.json';

async function fetchData(url) {
  try {
    const response = await fetch(url, { cache: "force-cache" });
    const data = await response.json();
    return data;
  } catch (err) {
    console.error(err);
  }
};

fetchData(api)
  .then(data => {
    L.geoJson(data).addTo(map);
  });

I added an additional parameter that forces the browser to cache files cache: "force-cache"

The first download is normal and the next ones are fetched from the disk cache, an expedient check the devtools.

Update:

const geojsonOpts = {
  pointToLayer: function (feature, latlng) {
    return ...
  },
  filter: function(feature, layer) {
    return ...
  }
};

["one", "two", "three", "four"].map((json) => {
  fetchData(`./${json}.json`).then((data) => {
    L.geoJSON(data, geojsonOpts).addTo(map);
  });
});

CodePudding user response：

Layer.refresh ist not working without L.geoJSON.ajax I have thousands of tag (SeachTXT) to be filter

see my first post function

$("#btnFindText").click(function(){
    SeachTXT = $("#txtFind").val();
    LayerSt.refresh();
    LayerPr.refresh();
    LayerHL.refresh();
    LayerBoon.refresh();
})

how can i dynamic filters in GeoJSON layer with fetching