Dynamically change omnivore file with global variable?

Question

I'm trying to create a number of buttons that will switch out the CSV files I'm filtering rather than having to create separate layers for each file, as they all have the same structure. This seems plausible as I can define my CSV file as an initial variable and successfully call it with `window.dataMV = omnivore.csv(myvariable)", but whenever I toggle the button to change the value to File_B, this doesn't seem to affect the map.

Even refreshing the layer by removing window.dataMV and re-adding it with another button, still seems to show File_A, the initial value the global variable was given. Is there an easy workaround that allows Omnivore files to be changed dynamically with this basic Javascript click function?

   myvariable = 'File_A.csv';


$('#button').click(function() {

if(!toggle) {
    myvariable = 'File_B.csv';
    console.log(myvariable);


  } else {

    myvariable = 'File_A.csv';

  }
  toggle = !toggle;
});

console.log(myvariable);

window.dataMV = omnivore.csv(myvariable)
    .on('ready', function(layer) {
    markerArray = [];
    this.eachLayer(function(marker) {
        if (marker.toGeoJSON().properties.Category == "SAMPLE 1") {
            marker.setIcon(L.icon({
                iconSize: [18, 18],
                iconAnchor: [9, 27],
                popupAnchor: [1, -24],
                iconUrl: 'c1.png'
            }));


        else {
            window.dataMV.removeLayer(marker)}

      return marker.bindPopup(marker.toGeoJSON().properties.Category + ', ' +
                marker.toGeoJSON().properties.Location);  
    });
//.addTo(map);
});

Answer 1

If I understand correctly, when your button is clicked, you change the value of myvariable and expect your omnivore layer to be refreshed by fetching data from the newly referenced file?

Unfortunately, this is not how Vanilla JavaScript works.

The above described behaviour, where some code is automatically re-run when a variable is changed, is referred to as "reactive" or "data-bound", depending on the framework that implements such extra behaviour on top of vanilla JS.

For a simple case, you do not need such framework to achieve your objective.

Why not simply including the code that performs the omnivore call within your button click event listener?

You would probably want to flush / remove from map the previous omnivore layer first (window.dataMV).