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?
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);
});
});