TideSearch- Created by
- Adam Krawitz
- Serving up
- Canadian Hydrographic Service tide tables and OpenStreetMap maps
- Running as
- HTML, SVG, CSS, and JavaScript
- Depending on
- Awesomplete, core-js, D3, focus-visible, Leaflet, Leaflet.GeometryUtil, Leaflet.Locate, Leaflet.markercluster, Moment Timezone, noUiSlider, regenerator-runtime, and Tippy.js
- Decorated with
- Lato and Limelight fonts
- Linted through
- HTMLHint, stylelint, and eslint
- Compiled via
- LibSass and Babel
- Minified per
- HTML Minifier, cssnano, and terser
- Built using
- browserify, cheerio, node-geocoder, node-soap, and tz-lookup
- Tooled in
- Atom with packages, Git, Node.js with npm packages via Yarn, and gulp with plugins
Version 1.0 © Adam Krawitz 2020 TideSearch- This single page web app allows you to use a map to lookup the current year's tides for any tide station in Canada. The tides are presented in a zoomable graph, where you can view from less than a day, to a full year at once. The tides can be filtered by day of the week, time of day, high or low tide, and the height of the tide. In sum, TideSearch allows you to efficiently browse and query Canadian tide tables using an interactive visual interface.
- Compatibility
- The goal is for TideSearch to run in current versions of Chrome, Edge, Firefox, Opera, and Safari, as well as on iOS, iPadOS, and Android devices. In general, it should run in any browser that supports current standards for HTML, SVG, CSS, and Javascript. It will NOT run in Internet Explorer, which is obselete and does not support current standards.
- Tabs
- About
- Selecting "TideSearch" in the upper left corner will open an About pane, with information on the resources used to build this app. Selecting "TideSearch" again will close the About pane.
- Help
- Likewise, selecting "?" in the upper right corner will open this Help pane, with information on how to use this app. Selecting "?" again will close this Help pane.
- Map, Tides, and Filters
- If you are viewing on a small mobile device, then you will see tabs for "Map," "Tides," and "Filters" at the top of the window. Selecting one of these will bring up the corresponding pane of the app. You can switch back and forth as desired. On larger devices, "Map," "Tides," and "Filters" panes are all visible at the same time, so there are no corresponding tabs.
- Search box
- The search box lists the current tide station by station name, province, and station identification number. When you first load the app, if you allow the app to access your current location, the nearest tide station to your current location will be automatically selected, otherwise a default tide station will be used.
Typing into the search box will bring up an autocomplete list of tide stations that match your typing. Selecting from the autocomplete list will choose that station as the new current tide station. - Map
- The map data in TideSearch is provided by OpenStreetMap and the cartography is licenced as CC BY-SA.
- Tide stations
- The current tide station is indicated by a blue pin on the map. Other tide stations are indicated by grey pins. Depending on the zoom level, some tide stations may be summarized with circular grey clusters with a number inside indicating the number of tide stations in the general vicinity.
Focusing or hovering a tide station pin will bring up a tooltip with its location name, province, and tide station identification number. Selecting a tide station will make it the new current tide station. Focusing or hovering a cluster of 3 or more stations will display the region within which the clustered stations lie. Selecting a cluster will zoom the map in towards the area containing the clustered stations. - Pan and zoom
- The map itself can be panned (mouse/touch drag or arrow keys) or zoomed (mouse scroll, touch pinch, or +/- keys). Alternatively, the "+" and "-" controls in the upper left corner of the map can be selected to zoom in or out.
- Location tracking
- If location tracking is allowed and enabled, your current location will be indicated by an orange circle. A larger semi-transparent orange circle may indicate uncertainty in your current location. A small triangular pointer may indicate your orientation and heading.
Selecting your current location will bring up a popup with a description of the uncertainty in your location.
Selecting the locate control, below the zoom controls in the upper left corner of the map, will toggle location tracking on and off, or if your location is not currently in the map view, it will bring it back into view. The locate control is orange when activated, and grey when not. - Privacy and permissions
- In most modern web browsers, you must explicitly grant permission for TideSearch to use your location, or else the location function will not work. TideSearch does NOT pass your location back to the server, or store it in any way beyond the current local session.
Map tiles for the region you are currently viewing are requested from OpenStreetMap servers (whether you have location tracking on or not).
- Tides
- TideSearch includes data and services provided by the Canadian Hydrographic Service of the Department of Fisheries and Oceans. The incorporation of data sourced from the Canadian Hydrographic Service of the Department of Fisheries and Oceans within this product does NOT constitute an endorsement by the Canadian Hydrographic Service or the Department of Fisheries and Oceans of this product.
- High and low tides
- Tide predictions for the current tide station are shown in the graph. Time is plotted on the horizontal (x) axis, and tide height in meters is plotted on the vertical (y) axis. Each predicted high and low tide is indicated with a point (green for high tides, red for low tides, grey for filtered tides). Note that all intermediate values between high and low tides are based on a monotone cubic interpolation and not actual data.
Hovering or focusing a tide data point will bring up a tooltip with the precise prediction of time and height for that tide. Pay attention to the timezone offset when reading the times of tides. - Current time
- The current time is indicated by an orange dashed vertical line in both the main graph and the context graph.
Hovering or focusing the current time will bring up a tooltip with the current time using the same timezone offset as the adjacent tides. - Height filtering
- Tides can be filtered by height using the slider on the left side of the graph. There is both an upper and a lower limit. The current height of each limit is indicated in the adjacent box. Initially, the upper limit is set to the highest tide and the lower limit is set to the lowest tide, so no tides are filtered out. Increasing the lower limit or decreasing the upper limit will filter out tides that do not fall within the remaining range. However, if the limits are adjusted such that the lower limit is above the upper limit, then the heights between the lower and upper limits will be filtered out, so that only tides above the lower limit or below the upper limit remain.
- Pan and zoom
- The graph itself can be panned (mouse/touch drag or left/right arrow keys) or zoomed (mouse scroll, touch pinch, up/down arrow keys or +/- keys) on the time (x) axis. Alternatively, the displayed time range can be adjusted using the context graph above the main graph. This context graph summarizes the entire year of tide data, and the shaded window indicates the subset of the data currently being displayed in the main graph. The shaded window can be moved left or right to pan the time range in the main graph (mouse/touch drag or left/right arrow keys), or its size can be adjusted to zoom the time range in the main graph (mouse scroll, touch pinch, up/down arrow keys or +/- keys).
- Warning
- The tide tables are from the Canadian Hydrographic Service, and all caveats about the original data apply here as well. In sum, these are predictions that may differ from the actual tides due to any number of reasons, and you should never assume that they will be accurate.
- Filters
- The filters can be used to select a subset of tides that meet certain criteria.
- Tides
- You can choose to include high tides and/or low tides. A checked box will include the corresponding tides.
- Day of week
- You can choose to include each day of the week. A checked box will include the corresponding day of the week.
- Time of day
- Tides can be filtered by time of day using the slider. There is both a lower and an upper limit. The current time of each limit is indicated in the box beneath the handle. Initially, the lower limit is set to the start of the day and the upper limit is set to the end of the day, so no tides are filtered out. Increasing the lower limit or decreasing the upper limit will filter out tides that do not fall within the remaining time range. However, if the limits are adjusted such that the lower limit is after the upper limit, then the times between the upper and lower limits will be filtered out, so that only tides occuring at times before the upper limit or after the lower limit will remain.
- Timezone
- This is not strictly a filter, but it adjusts how times are displayed and the times that the Day of week and Time of Day filters are applied to. "Station," the default, uses the timezone for where the station is located. "Local" uses your timezone (actually, the timezone available to your web browser, which is usually the timezone set on your device). "UTC" uses Coordinated Universal Time (if this means nothing to you, you probably don't want to use it).
Note that "Station" and "Local" times will be in either standard time or daylight savings time, depending on the date of the tide. The timezone offset is indicated in the tooltips for tides and the current time. The numerical offset from UTC will always be listed, and the name for the offset will be listed when known (e.g. PST for Pacific Standard Time, or PDT for Pacific Daylight Time).
Tide station locations were obtained from the Canadian Hydrographic Service and reverse geocoded to timezones using OpenStreetMap Nominatim. Timezones are then converted to timezone offsets using Moment Timezone. The accuracy of the resulting times is not guaranteed!
- About
- A partial list of the open source software, packages, resources, data, and protocols used to create TideSearch.
Select "TideSearch" in the upper left corner to toggle this pane. - Help
- This page.
Select "?" in the upper right corner to toggle this pane.
Version 1.0 © Adam Krawitz 2020