Optimize the performance of filtering large GeoJSON files using Ajax in leaflet for the

Question

Optimize the performance of filtering large GeoJSON files using Ajax in leaflet for the

I am managing four 2MB geoJson files with four different Layers that need to be loaded. Each layer is loaded using the following code:

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

There is also a button click function that triggers the refresh of all layers:

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

Every time the button is clicked, all layers need to be re-filtered. Is there a way to keep the files in cache and just filter them again without reloading?

javascript ajax filter leaflet geojson

Answer 1

Answer №1

If you're looking for a simple solution, consider using the fetch method:

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 included an extra parameter to ensure that the browser caches files cache: "force-cache"

The initial download occurs as usual, but subsequent downloads are fetched from the disk cache. You can verify this using 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);
  });
});

Answer 2

If you're looking for a simple solution, consider using the fetch method:

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 included an extra parameter to ensure that the browser caches files cache: "force-cache"

The initial download occurs as usual, but subsequent downloads are fetched from the disk cache. You can verify this using 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);
  });
});

Optimize the performance of filtering large GeoJSON files using Ajax in leaflet for the

Answer №1

Similar questions

Preventing line breaks (endline) from PHP variable when passing to JavaScript

Encountered a runtime error while trying to insert a list item <li> into a paragraph <p> element

Basic Django button for triggering view function

Tips for implementing and utilizing onclick functions in EJS

Immersive Visual Symphony through Dynamic Multi-Layered

Jquery problem: dealing with empty spaces

Restricting the scope of ngClick in multiple instances with AngularJS

The HTML document is unable to locate the Angular framework

Using Javascript to display or conceal a specific child element within a loop, based on which parent element has been clicked

React JS Issue: Real-time Clock not updating in React component

Switching React Icons when Clicked

Leverage JSON data using props in React JS

How to Eliminate the Border on the Final Item within a React List

Watching a video play within a slider and transitioning seamlessly to an image once the video ends

What is the best approach to building this using Angular?

inserting a dynamic variable into a JSON string

Switching from module.exports in Javascript to Typescript format

Is it possible to remove or delete a module in AngularJS?

"Preventing Cross-Origin Requests" error encountered while trying to load a JSON document

Unexpected token encountered when testing Ajax call with JSON response