Filtering GeoJSON layer on Leaflet map based on date selected by user

Question

I want to filter the data on map based on the user selected date, i have a simple dataset with attributes as id,color, date (displayed in image below) I worked out partly how to filter the data by color, id however when i tried same logic with date can't understand how this works.

using bulmaCalender plugin i did below

      <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

// 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);

GeoJSON feature looks like this

              {  "type": "Feature",
             "properties": {
                            "id": 4,
                            "color": "green",
                            "date": "01\/04\/2022"
                          },
             "geometry": {
                           "type": "Polygon",
                           "coordinates": [ [
                                              [ 144.956422952665463, -37.803472701793176 ],
                                              [ 144.965757268247671, -37.803589307887528 ],
                                              [ 144.965694511688781, -37.807908799167294 ],
                                              [ 144.956305138229141, -37.807746215600453 ],
                                              [ 144.956422952665463, -37.803472701793176 ]
                                            ] ]
                          } 
            },

Javascript code

 $("#form3").submit(function(e)
{
  function filterByDate(feature)
  {
       var userSelectedStartDate = new Date((document.getElementById("startDate").value));
       var userSelectedEndDate = new Date((document.getElementById("endDate").value));
       console.log(userSelectedStartDate); //printing user selection to console here
       console.log(new Date(typeof(feature.properties.date))); //printing dataset to console here
       if (
             (Date(feature.properties.date) >= Date(userSelectedStartDate.data)) &&
             (Date(feature.properties.date) <= Date(userSelectedEndDate.data))
           )
         return true;
  }

  e.preventDefault();
  map.removeLayer(layer_ls);
  var new_layer;
  new_layer = new L.geoJson(polygon_ls, {
                                          filter:filterByDate
                                        }).addTo(map);
});

I got a head start from here Datefilter in leaflet.js

here are few tests i did to understand what is happening. When I print using console.log((feature.properties.date)); results are

When I print using console.log(typeof(feature.properties.date)); results are

console.log(new Date(typeof(feature.properties.date))); gives me

console.log((userSelectedStartDate)); result is 12 objects

when I select the dates 01/01/2022 and end 01/12/2022 (as shown in the image above)

I want map to show first polygon when user selects 01/01/2022 and last when 01/12/2022 is selected.

I know the logic looks funny that is the reason i said i partly worked out how to filter by id and color, i am just adding new layers not actually filtering the data not sure if i can overwrite the layer file before adding it back to map.

Answer 1

There are several things wrong the way you are handling date data, so this is not really GIS related question but completely JS related one, but anyway ...

In comparison you are using expression Date(feature.properties.date), which will always give current date and time, since argument is not used at all. It should always be new Date(feature.properties.date).

Your expression new Date(typeof(feature.properties.date)) makes no sense, since typeof(feature.properties.date) returns value 'string'.

Next thing is that new Date(dateStr) function expects date string in format 'mm/dd/yyyy' or 'yyyy/mm/dd'. You can convert from 'dd/mm/yyyy' to acceptable format with simple expression dateStr.split('/').reverse().join('/').

Also when comparing dates returned from new Date(dateStr) call, operators > and < work, but operator == doesn't, so it's better to use date .valueOf() for comparison.

So your date compare statement could then look something like this:

function dateValue(dateStr) {
  var formatedDate = new Date(dateStr.split('/').reverse().join('/'));
  return(formatedDate.valueOf());
}

if (
     (dateValue(feature.properties.date) >= dateValue(userSelectedStartDate.data)) &&
     (dateValue(feature.properties.date) <= dateValue(userSelectedEndDate.data))
   ) 
  return true;