Mapping feature

[nickvisut]

Is your feature request related to a problem? Please describe. As a user, I would like to look to view a map of San Francisco with indicators of seismic zones, tsunami zones, and soft stories so that I can be better informed about the locations and areas I'm interested in.

Furthermore, I would like to be able to use a search box to look up an address and see if it's a soft story or located in or near a seismic or tsunami zone. A marker should appear on the map if the address is resolved correctly.

Describe the solution you'd like A map of San Francisco ought to appear below the existing search box. It ought to be clearly marked with soft stories (as dots), seismic data (as polygons), and tsunami data (as polygons).

• [x] #72 By default, the map ought to load with:

  • The center of the map at: -122.463733, 37.777448*
  • The default zoom at: 11*
  • The minimum zoom at: 10.5*
  • The maximum zoom at: 15*
  • The ability for the user to pan and zoom at will across devices
  • The map ought to be responsive** to the size of the page.

  *these may change after eg visualizing with soft story data **possibly fluid and edge-to-edge pending design decision

• [ ] #92 Additionally, the map should have:

  • Seismic data overlaid as polygons
  • Tsunami data overlaid as polygons
  • Soft stories overlaid as dots

• [ ] #91 Lastly, we currently have a search box on the page that returns coordinates. I would like for this search box to drive the map display if a valid address is resolved. If a valid address is resolved, the following should happen:

  • he map will pan so that it centers on the address (?)
  • A map marker will be placed on the address to denote that it's "selected"
  • The user ought to still be able to pan and zoom at will across devices
  • Clicking on the map (besides map controls) or attempting another search box search will "deselect" the current address and the map marker will disappear (?)

  If a valid address is not resolved, the following should happen:

  • Nothing should happen

Describe alternatives you've considered N/A

Additional context Figma design mockups etc: https://www.figma.com/design/AGadwQcQH5kNn2D93TVOAC/Design?node-id=503-1467&t=EimJM8P94F9XtHC6-4

NOTE on implementation thus far: The styling ol the "basemap" layer itself (area colors, road colors, etc) will differ from the mockup as it's based on the defaults provided by Mapbox Standard style. The styling can be tweaked by editing a limited set of properties, which will happen after testing is done on a live version of the map.***

The limited styling described above only applies to the "basemap" layer and not the additional layers, such as the soft stories, seismic data, and tsunami data. Layers other than the "basemap" layer are more customizable.

***adjusting styling to monochrome is a possible future design ask

[nickvisut]

cc @mantuok organized requirements, old and new, here

[nickvisut]

@mjjsf, if you have the opportunity to, could you take a look at "(?)" in the description above? I made some UX assertions based on my understanding. If any of them look incorrect, please let me know.

I highlighted all the (?) statements with bold and italic text.

[nickvisut]

@mjjsf, if you have the opportunity to, could you take a look at "(?)" in the description above? I made some UX assertions based on my understanding. If any of them look incorrect, please let me know.

I highlighted all the (?) statements with bold and italic text.

Thanks for confirming the assertions, @mjjsf 🙏

[nickvisut]

cc @mantuok organized requirements, old and new, here

Any feedback appreciated.