2

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.

datasets on map

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 Current UI for Date selection

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

feature.properties.date

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

typeof(feature.properties.date)

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

typeof(feature.properties.date)

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) dates_selected

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.

2
  • What is the format of your dates: MDY ot DMY?
    – TomazicM
    Sep 12 at 7:46
  • @TomazicM Date format is DMY Sep 12 at 9:02

1 Answer 1

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;
3
  • true that it is purely JS related error/issue, may be a wrong way of doing it but I was checking what am i dealing with at that stage with "typeof(feature.properties.date)". I also overlooked the fact that I did the date parsing (if it is called so) twice in line 5,6 and in IF condition again with your suggestion for date comparison statement I could filter the data as required. I got started few weeks ago in this area. Appreciate your help. Sep 13 at 0:30
  • I know for filtering GeoJSON documentation says "dynamically changing the filter option will have effect only on newly added data. It will not re-evaluate already included features" to overcome that what i did in lines15/16/17 was remove the old layer and add new filtered layer. However, the page will have multiple options to filter by and user will filter multiple times (shown in image), every time I click update button/call the function I am adding a new layer, tried few things but couldn't could get around this any suggestions on how to have one layer and keep overwriting it please Sep 13 at 5:13
  • GIS SE is a site for focused Q&A which among other things means one question per question. If you have further questions about filtering, please post it as a separate question.
    – TomazicM
    Sep 13 at 6:43

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.