1

Using bulmaCalender i have a form for user to set the start and end date

     <form id="form3">
          <p>Filter by Date:</p>
          <p>Start Date: <input type="date" id="startDate" value="01/01/2022"></p>
          <p>End Date: <input type="date" id="endDate" value="01/12/2022"></p> <br>
           <button id = "subDate" type="submit" value="Update" class="button is-link is- outlined is-light is-small is-rounded">Update</button>
     </form>

Looks like Userinput form

Layer import

// Importing data Little Squares as ls
var polygon_ls = json_ls;
var selected
var layer_ls = new L.GeoJSON(polygon_ls, {
                                              onEachFeature: onEachFeature
                                            });
map.addLayer(layer_ls);

Filter function

$("#form3").submit(function(e)
{
  
  function filterByDate(feature)
  {
      function dateValue(dateStr)
      {
        var formatedDate = new Date(dateStr.split('/').reverse().join('/'));
        return(formatedDate.valueOf());
      }


      if ( 
           (dateValue(feature.properties.date)) >= dateValue((document.getElementById("startDate").value)) &&
           (dateValue(feature.properties.date) <= dateValue((document.getElementById("endDate").value)))
         )
        return true;
  }

  e.preventDefault();
  map.removeLayer(layer_ls);
  var new_layer = new L.geoJson(polygon_ls, {
                                              filter:filterByDate
                                            });
  map.addLayer(new_layer);
  layerControl.addOverlay(new_layer, 'Filtered Little Squares');

});

I am filtering data from GeoJSON layer and adding it as a new layer. But i have multiple options to filter from and expected that user will filter multiple times, every instance i call the filter function i am adding a new layer to the map/layer control group. Even if i overwrite the variable initialized for the layer because of know functionality "dynamically changing the filter option will have effect only on newly added data. It will not re-evaluate already included features" the layers added to map remains the same. I tried setTimeout() & reload() (when i reload the webpage the filter function is not called yet so this approach failed). I tried to have two layers say new1 & new2 and display one of them and hide the other (using removeLayer) at each call of filter function and do function but not successful either.

2
  • If I understand you correctly, when new filtered overlay is created and added to the map, you want to remove the previously created/selected one. Is that correct? But what is user selected from layer control one or more previously created overlays? Should those also be hidden when new filtered overlay is created?
    – TomazicM
    Sep 14 at 7:55
  • say "layer_ls" is my source layer. when user filters and click update I want the function to filter data from layer_ls which is working fine, but I want just one overlay layer and keep overwriting it (at least as far as the user is concenred I want them to see only see two layers). So layer control will have one source layer and the other filtered layer Sep 14 at 8:32

1 Answer 1

1

One possible solution is to introduce global variable filteredLayer where you store current filtered overlay and so can remove it when new one is created and added to the map.

There's also error in your code how you create filtered overlay. If you use lowercase L.geoJSON, this already creates an instance of layer object, so new should not be used.

Relevant part of the code could then look something like this:

var layer_ls = new L.GeoJSON(polygon_ls, {
  onEachFeature: onEachFeature
});
map.addLayer(layer_ls);

var filteredLayer = null;


.
.
.
  if (map.hasLayer(layer_ls)) {
    map.removeLayer(layer_ls);
  }
  if (filteredLayer) {
    map.removeLayer(filteredLayer);
    layerControl.removeLayer(filteredLayer);
  }

  filteredLayer = L.geoJSON(polygon_ls, {
    filter: filterByDate
  });
  map.addLayer(filteredLayer);
  layerControl.addOverlay(filteredLayer, 'Filtered Little Squares');
.
.
.

And by the way, "clear filter" logic is missing in your code.

2
  • Suggested code did work, except for line 8 from bottom up "var filteredLayer = L.geoJSON(polygon_ls, {" I have to remove "var". Thanks for pointing out the L.geoJson error, code for clear filter logic is not added in this question intentionally. Couldn't understand why "if (map.hasLayer(layer_ls)) {" for "layer_ls" but "if (filteredLayer) {" for the other (no hasLayer ?) Sep 14 at 19:50
  • Yes, that var shouldn't be there, corrected. Layer layer_ls is defined and added to the map before first filter call, but variable filteredLayer has null value on first filter call, so it cannot be tested with .hasLayer method.
    – TomazicM
    Sep 14 at 20:08

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.