Front end map page

[BenasB]

Hi,

I'm brainstorming the design of our main front end page (where you'll be able to see the list of polluted locations and where they are located), your input is welcome. My initial idea is:

Figma link for better view: https://www.figma.com/file/CyosK6Jo1OiaDt7EcyQDXK/Web

Inspired by Airbnb's map page:

Some features:

• Handles mobile responsiveness well – polluted location list stacks below the map on mobile/tablet.
• Hovering over a polluted location card on the right could move/center the map on this polluted location's pin
• Clicking on the card or the pin would open up a different component which would display the details in depth (and missing fields like notes, etc.)
• Could also request user's location, display a pin on the map indicating the user's location and sort the cards based on distance from the user's location.

Of course everything is subject to change, icons are temporary, just as an example.

Let me know what you think.

[BenasB]

Let's discuss this in our 2022-09-23 meet. Feel free to come up with ideas on why you like/dislike this design and how/if it can/should be changed.

@6ar8nas @BaVilius @XxDoMaSxX

[BenasB]

I also looked into Google Maps Platform and how it integrates with React. Everything seems fine, we should be okay with the features and limits they provide.