Installation

1. clone repository
2. copy .env.example to .env
3. change VITE_MAPBOX_TOKEN to your Google Maps API key
4. use yarn for package management
5. yarn; yarn dev
6. open the link from the execution of the command. by default it is http://localhost:5173

Implemented Features

• Fullscreen responsive Google Maps (Via react-google-maps)

• Basic map interactions (pan/scroll/zoom)

• Clicking on the map generates a popup/infowindow with the Geolocated address of the location

• Clicking on the infowindow's Add+ button will add the location to the list

• Clicking on an existing marker will pan to the location

• Markerlist is virtualized via react-virtuoso

• Items in markerlist show the geolocated Route address, followed by the geolocated full address and (after clicking on the Enable Location toast) the distance to the current position marked by the blue home icon

• Markerlist is an ordered list and the map maprkers show the cardinal number of the marker (First item in list is maked '1' in the map, etc)

• Clicking on an item in the markerlist will pan to the location and show the infowindow of that location (which allows removal of location)

• Clicking the trash icon on the marker list item will also remove the item from the map and markerlist

• Markerlist sidebar is responsive. Flyout is partial on bigger screens and fullsize on smaller screens

  • list interactions in smaller screens will collapse the sidebar to show the map
  • list interactions in larger screens will preserve the collapse status of the sidebar

• Distances to location are measured using the DistanceMatrix API of google maps and is set to DRIVING mode and METRIC units

Developer Notes

The google API provided does not allow for the usage of the Places API which is needed for autocomplete/location suggestion

Places API (New) has not been used in project 196863761426 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/places.googleapis.com/overview?project=196863761426 then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.

Distance calculation is calculated using https://developers.google.com/maps/documentation/distance-matrix/overview The values are the approximated DRIVING distance from the current user location to the marker. Ideally this would mean a route overlay should be displayed, but it is beyond the scope of the application's specs

Distance could have been simplified by using Great Circle distances

The big timesink in this particular project was getting AdvancedMarkers working as standard Markers was being deprecated by the Maps Api. Digging theough the api docs did reveal that maps needed a MapID. At first, I thought MapIDS had to be generated by the owner/manager of the google console, but it seems it can be a any random (but consistent) string

The other timesink was getting around the new(-ish) restriction to browser geolocation. It needs to be activated by a user interaction and cannot be triggered on component load/initial useeffect. This was partially solved by showing a 'Enable Location` toast. After clicking this, the geolocation triggers and distances to markers can calculate properly

TODOS

Places API/POI search/address autocomplete

Persist in localStorage

More info in infowindow. Reverse geolocation only has addresscomponents. Enabling Places API would provide more information. Geolocation API returns a PlaceID so it wouldnt be a stretch to add place info