Skip to content

Add slider for Water Quality Site date filter

Background

We are pulling sites from the WQ Portal (https://www.waterqualitydata.us/) & displaying them on the map. You can see where we make the request to the water quality portal in the map-data.service file: https://code.usgs.gov/WiM/long-island-sound-mapper/-/blob/dev/src/app/services/map-data.service.ts#L67-L109.

Currently we have four filters to filter the WQ Sites shown on the map, site types, sample media, characteristic groups, and states. The options for these drop downs also come from a request to the water quality portal, see https://code.usgs.gov/WiM/long-island-sound-mapper/-/blob/dev/src/app/services/map-data.service.ts#L17-L36. We want to add a slider to the filters section of the sidebar that filters by date as well. As of now the request is just to the beginning to this year to the current date.

What we need to do

  1. For this project we are using the US Web Design System, https://designsystem.digital.gov/. First, we need to add a component to the filters section of the sidebar that will allow users to select two dates. I would suggest the date range picker (https://designsystem.digital.gov/components/date-range-picker/) or the range slider (https://designsystem.digital.gov/components/range-slider/), but feel free to look through all the components and see if you think there is a better one. Add that component to the filters, example of where.
  2. Allow users to only select a maximum of 5 years. If a user wants to edit the date filter we only want them to be able to select 5 years of data. The default can be the last year to the current date.
  3. Hook up the date filter to the request to the WQ Portal. The request can be found in the function getWQPortalSites. Currently the request is to the 1st of this year to the current date. You will need to edit the startDateLo url parameter, to be the users selected start date and add the startDateHi url parameter to be the users selected end date. Currently I don't have a startDateHi URL parameter in the request so it defaults to today's date, we will just need to add that to the request with &startDateHi=usersenddate.