feat: add user interactions to new map

[benfurber]

See above two icons on the bottom right of the new map display:

1. Zoom out to world view
2. Zoom in to your location

Each:

• Should be a `<Button ... showIconOnly /> from 'oa-components'
• Should have a Tooltip, again from 'oa-components' (example implementation on packages/components/src/Tooltip/Tooltip.stories.tsx
• Needs a new icon, called globe and cross-hair respectively. Example of how to add a new icon here, icons below.
• Behaviour tests added to packages/cypress/src/integrations/map.spec.ts

The function to implement the zoom in action for the new map can be seen on the implementation for the current map, promptUserLocation on src/pages/Maps/Maps.client.tsx. The function to zoom out probably just uses the existing setZoom state action with the INITIAL_ZOOM value.

While the screen shot positions them on the bottom right, put them on the top right for the moment.

icons.zip

[motuz0001]

Hello, I would like to take this one and work on it if its still available

[benfurber]

Lovely, welcome and thank you @motuz0001! It's yours! :)

[motuz0001]

hey @benfurber, buttons are done and I also tried adding behaviour tests but I'm not sure how to run and check them, could you help me with that?

[benfurber]

Hey @motuz0001, should be as easy as running yarn test! That'll run the cypress behavioural focused e2e tests - which you then select manually to run. For component library tests that's yarn test:components (or yarn test in packages/components). The vitest unit tests for the app is yarn test:unit. It's worth having a look at all the commands available in the package file, you'll need yarn format soon enough. :)