I personally would love a zip-code feature with an added radius option to show incidences that may be within, say, 30 miles of your front door. This would be especially helpful with municipalities within larger cities (i.e. Culver City, Los Angeles, CA)

Purpose

Showing icons for incident links in the search results provides a better overview of the available data.

💡 Proposed Implementation:

• Create a new div list in the SearchResult component
• Populate the list with icons from the parseUrl(...) hook

Description

The keyboard navigation isn't working as expected.

Current behavior

After pressing tab, the page focus on the search field. The user clicks enter and then the app starts fetching the articles. The first article is focused after pressing tab, but if the user presses it again, the app just opens the article up, which is not the correct behavior. I think this issue is better explained with a visual demonstration, so here's a short GIF I made showing what's happening right now.

This is happening because each result has an onKeyDown listener, which also captures the tab key.

Expected behavior

After the results are fetched and rendered, the user should be able to navigate through them by clicking tab or the arrow down key. If the user wants to open an article, he then would click enter. You can find more information about keyboard accessibility here.

Update in-browser URLs, implement routing, handle back button presses (on Android).

Purpose

Currently, our color codes are scattered throughout component .css files, and there are quite a few identical ones in different components.

💡 Proposed Implementation:

Create a single file consisting of light- and dark-mode colors defined as CSS variables. These should use the naming scheme from the Material Design color system, like colorPrimary, colorSecondary, colorSurface, etc.

This will allow future components to use a consistent set of colors and improve maintainability if a color needs to be tweaked.

Switch from heatmap-view to pin-view when searching. Ideally, mark each pin with its result number and show a corresponding number next to each result in the list.

Share this code with the Video component, too.

Roboto or something nice.

Purpose

Currently, clicking on the map causes it to pan/zoom to the nearest city and populate the Omnibox with its name. However, directly searching for a city/state does not have the same pan/zoom behaviour. This issue should address that asymmetry.

💡 Proposed Implementation:

• Create a context for sharing/setting the current search term from both the Omnibox and Map components
• Remove the mapValue state in App in favor of the new context

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Click on Minneapolis
2. Zoom will happen but panTo goes to wrong coordinate

Expected behavior
Pan to Minneapolis

Screenshots
https://www.loom.com/share/2986c3b41d2646679c6fb11054f2625e

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome

Purpose

Autocomplete (or automatic suggestions) improve discoverability of key search terms and help users avoid common misspellings.

💡 Proposed Implementation:

• Create a context for sharing incidents throughout the component tree
• Extract Fuse.js-related code from the Sidebar component into a separate hook
• Create a dropdown list in the Omnibox component
• Populate the dropdown list with results from the search hook when the input changes

Steps to Reproduce:

1. Click on any city
2. Click on the clear button ("X") in the Omnibox
3. Click on the same city

Expected Behaviour:
Search results for the city reappear.

Actual Behaviour:
Nothing happens.