1

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

  • Hmm, do you mean the whole if/then statement too? Or is there a way of only including the omnivore call itself in the var then substituting it in the window.dataMV function? So the variable would be myvariable = omnivore.csv(FileA.csv), and window.dataMV = myvariable .on('ready)...etc.? My end goal is to substitute hundreds of these files eventually with a checklist performing the same function as this button. I have CSVs for every month of the year going back several decades, and I'm trying to put them through the window.dataMV filter with as little duplicated code as possible. – M00shiM00sh Dec 10 '16 at 16:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.