Integrate Mapbox Map into Web App

[mantuok]

Context

Integrate Mapbox map into web application. This integration should align with existing design: Figma

Definition of Done

• The Mapbox map is successfully integrated into the specified section of the web app.
• The map displays correctly across all supported devices.
• The integration follows the design requirements, including the following defaults that the map ought to load with:
  • center of the map at: -122.463733, 37.777448*
  • Tdefault zoom at: 11*
  • minimum zoom at: 10.5*
  • maximum zoom at: 15*
  • ability for the user to pan and zoom at will across devices
  • 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
• The map displays a pin with mock coordinates.

Engineering Details

• Install Mapbox GL JS library
• Create a dedicated component for the Mapbox map
• Utilize Chakra UI's layout components to ensure the map is responsive and integrates seamlessly within the overall design.
• Test on various screen sizes to confirm adaptability.
• Write unit tests for the map component using Jest. #98