Map: show geographic regions: Design

[fancyham]

Overview

We need to have a food oasis interface that allows for searching by district boundary types so that we can get placement on official local sites such as Neighborhood councils, LA County Supervisors, LA City Council people, etc.

Details

When user enters a geographic term like neighborhood or zip code (or one is specified in the URL), center the map on that location and display a highlighted boundary on the map so that the user can orient themselves to a familiar area, and zoom out to the level where the entire region is in-view on the map.

Action Items

• [x] Mock up how region mapping would look
• [x] Ask neighborhood councils and other orgs that embed our maps if this feature is very useful to them
  • [x] Asked and answered. They said yes, consult Bonnie for details.
• [x] Implement
• [ ] QA

Resources/Instructions

• LA Neighborhood council pages: https://empowerla.org/councils/
• Example neighborhood council — Del Rey: https://empowerla.org/drnc/
• HfLA Data Science issue for district types https://github.com/hackforla/data-science/issues/118
• Please note that when searching on google for koreatown, you are searching for a name of a location, not the NC boundaries. https://www.google.com/maps/place/Koreatown,+Los+Angeles,+CA

Example


[sei1122]

I had a meeting with Bonnie and Ben and learned the area boundary task. I did some research to learn what type of area boundary style other sites are using and took screenshots on Figma.

Boundary style https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=4650%3A8805

Things to consider

• How to display an area boundary. Is it line, filled colored, dot stroke or another style?
• Area boundary map scale. 
• Should we have different boundary colors between the local area and NC boundary or we use the same color. 
• Should we have the same page as Find food or a different page for the NC boundary area?
• Local area boundary and the NC district may have different boundary area even around a same area
• Should we have some detail about the NC council when the map boundary is showing NC district?

w to search the council district? Neighbourhood, zip code, one is specified in the URL or NC name

[sei1122]

I placed design ideas on Figma. https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=4652%3A8814

Question

• This is only for NC district boundary or including area search.

[fancyham]

Adding screenshot here for easy reference:

Looks good.

I’ll suggest that the initial zoom setting for the map when loading be such that the entire neighborhood area fits in view.

@ExperimentsInHonesty, @Benbaillou ,

Re: Search functionality

It seems that right now, it would be difficult to add org names or neighborhoods to the search field:

• see issue #1112 — which was closed because it was lower priority for now.

If the search field doesn’t work, we could list neighborhoods with their respective URLS on a hidden page.

Also, how do we envision neighborhood councils specifing their boundaries and work with us to add them to our site?

Do they contact us directly and open a ticket? Is there something we can import that has all the neighborhoods already?

[sei1122]

@fancyham Thank you for the feedback. I read the issues you mentioned. I will attach screenshots from the next post.

[sei1122]

As our MVP, We are going to make a page that includes a list of neighborhoods with their respective URLs.

Overview

• A page with a list of the NC URLs
• NC URL is bookmarkable. e.g NC_id_number….
• When you click the URL, it shows the district’s boundary on the map
• Each NC mapping scale may be different.
  • If there are not many pantries and meals within the boundary, Zoom upped map view to show more pantries and meals around the area

I checked Mapbox boundaries. Solid line, Dash line, Fill and opacity can be used. https://www.mapbox.com/boundaries. https://docs.mapbox.com/data/boundaries/guides/ https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill

I made some boundary styles. We can discuss more at the meeting. https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=2935%3A8

[fancyham]

• I believe this is completed and implemented in #1165 ?

Please test that and make confirm that you’re cool with the implementation, and if you’re good with the changes, close this issue or post revisions to be implemented!

[fancyham]

Wiki page with the neighborhood listings is here:

https://github.com/hackforla/food-oasis/wiki/Embedding-Food-Oasis-in-Your-Web-Site

QA folks please review!

[sei1122]

Looks good :) I read through and I understand how to embed a boundary map.

[fancyham]

Horray! Thanks everyone!