Map filters

[ychoy]

The map needs filters that allow users to filter the list or the map.

For example, filter art/murals by title, by artist, by subject (if the artwork was organize with subject tags)

NOTE:
This is a big issue and be broken up into a list of tasks. There's some design ideas from Anne-Elise Chung(see the thread), and some suggestions for approach by Minh Nguyen (see the thread).

[ctram]

@ychoy Hello are you guys accepting contributions to this app?

[ychoy]

@ctram Hi Chris, yes. Did you want to contribute to this issue?

[ctram]

@ychoy I do, do we have mockups/ideas for the UI or is it developers' choice? : ]

[ychoy]

How's it going @chrisjstott @ctram? I don't have mock ups but I hope that the UI will be consistent with the current style. My ideas:

• filter buttons might pop up differently on the web app view VS mobile view.
• A filter button that you can click on, and expands with all the filter options. Situated underneath the navbar, but above the map.
• Filters should apply to both the data on the map, and data in the list view.

[ychoy]

@aelichung Following up on our conversation about this project. Do you think you can help with this issue? Ideas:

When the person goes to the map, they see the filter buttons under the navbar, but above the map and listing. Filter by distance (<2 miles, <5 miles from an address), keyword (looking for words in description and title, unless you want to add keywords as an attribute), title, artist, city.

I don't have any mockups yet but welcome your expertise and creativity on it.

[aelichung]

@ychoy Let me know if you have any feedback on this.
Here is my progress on the desktop version so far.
You can also click around on the clickable prototype for this.

I can continue to create a mobile mock/clickable prototype either tomorrow or next week.

[ychoy]

Prototype looks good! Thanks for working on this :)

[ychoy]

@1ec5 shared these resources on Slack:

here’s some documentation on the Overpass turbo wizard’s query syntax: https://wiki.openstreetmap.org/wiki/Overpass_turbo/Wizard

Here’s an example of creating a map w/ buttons to toggle layers on and off: https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/ (The key is to call setLayoutProperty() to set the visibility property on the layers.)

Here’s how to plot GeoJSON on the map as part of the webpage rather than in Mapbox Studio: https://docs.mapbox.com/mapbox-gl-js/example/geojson-markers/

Create and style clusters:
https://docs.mapbox.com/mapbox-gl-js/example/cluster/

You could make the map interactive w/ a “Buffer distance” text box that does something like this:

map.getSource('myBufferedSchools').setData(bufferedGeojson); 

[aelar13]

This is indeed a really big feature. Here's a possible breakdown of tasks. If this looks good, I can make some separate issues to track them.

• By default, the entire list of art is shown in the sidebar. Add a text field and a search button. Search results should be limited to entries that have the search terms in title, artist, or description.
• Add a set of checkboxes above the search field to include or exclude search results based on which metadata fields should be searched. (See my note below on if this is actually needed.)
• Modify the search results to show limited results in a tiled grid, set rather than full entries. When the user clicks on a tile, show the complete entry.
• Add a Filter By Distance feature above the map, that allows the user to click a spot on the map, and then select from pre-determined distances. The map should show the area that equates to that distance, and the search results should show only the art that falls within that area.

Some additional thoughts/potential features:

• I'm not sure that the checkboxes for different filter types is actually needed. It seems like it would be very rare that a user would only be interested in public art with "shoe" in the title, but not in the description. I think it would be fine to just have the search automatically search all fields.
• Rather than have users type in artist names, would it be helpful to have a pick-list of artists as a possible filter? Auto-generated from the current list of artists.
• Is there a taxonomy for the art? If not, we might want to spin up a project to identify a very basic one, with values like sculpture, mural, private versus public, interior or exterior, etc. This could then be used for additional filtering.
• I'm not sure what search engine we can leverage, but one that allows for operators like AND, OR, and NOT would be great, if possible.

[ychoy]

Anathea, thanks so much for your detailed notes and questions!

• Is there a taxonomy for the art? If not, we might want to spin up a project to identify a very basic one, with values like sculpture, mural, private versus public, interior or exterior, etc. This could then be used for additional filtering.

I don't think this exists.

• I'm not sure that the checkboxes for different filter types is actually needed. It seems like it would be very rare that a user would only be interested in public art with "shoe" in the title, but not in the description. I think it would be fine to just have the search automatically search all fields.

Sounds good!

• Rather than have users type in artist names, would it be helpful to have a pick-list of artists as a possible filter? Auto-generated from the current list of artists.

Yes!

• By default, the entire list of art is shown in the sidebar. Add a text field and a search button. Search results should be limited to entries that have the search terms in title, artist, or description.
• Add a set of checkboxes above the search field to include or exclude search results based on which metadata fields should be searched. (See my note below on if this is actually needed.)
• Modify the search results to show limited results in a tiled grid, set rather than full entries. When the user clicks on a tile, show the complete entry.
• Add a Filter By Distance feature above the map, that allows the user to click a spot on the map, and then select from pre-determined distances. The map should show the area that equates to that distance, and the search results should show only the art that falls within that area.

These look good!

[nohjlau]

Hey, I'm looking to work on this issue. On a local version, I updated the sidebar to only show basic information and then show the description and image when an entry is active. One thing I'm wondering about the mockup is if we'd want to have a single entry per row instead two entries per row, which is what alot of search engines do. That would reduce text being cut off since some murals have long names and allow us to make our font sizes larger

Here is a look at the single entry rows. Top right is our current mock up. Top left is duckduckgo and bottom right is a quick mockup.