#63 create map

[knox153]

Map is done! I will wait until #64 is merged into master before merging this. There a still a few bugs and things to resolve, the full lists can be found at: #74.

Map

• Our marker is generated on the fly using https://mapmarker.io/ with Font awesome's icon. I thought that was pretty cool when I found out a service like this existed. Otherwise, I would have to create each icon manually 😆

mapHelper.tsx

• This file contains the autocomplete service and place details service, there is an example in SearchBarPopup.tsx showing how to use these service to retrieve destinations from google API.
• It also contains helper functions for retrieving destination model and categories from the response.
• JSON object used to style the static/dynamic map are included at the end of the file

Others

• Spinner component added (can be used to indicate loading)
• Destination store is updated with two new actions (add & remove destination). The destination model will most likely needs to be updated when the destination schema/backend is done. I have marked a few of these locations in the code with TODO.

Closes #63

[shizuko-akamoto]

I realized the SearchBar popup looks better with lighter outline. Would you change the border color to $bright-gray instead of current $silver-gray? (both for .searchBarPopup and .searchInput), and also change the padding on .searchBarPopup to 15px 25px. Thank you! End result like this:

Is the search results limited to max 5 right now? Should we enable scrolling for more results instead?

[knox153]

I don't know if it's reproducible on your end, but the height on DestInfoWindow seems like it's height is a little off.

Fixed 🔧 Google map has dynamic styling and using Google chrome somehow applied a slightly different styling to the map. Had to override the css property to make it works.

I realized the SearchBar popup looks better with lighter outline. Would you change the border color to $bright-gray instead of current $silver-gray? (both for .searchBarPopup and .searchInput), and also change the padding on .searchBarPopup to 15px 25px. Thank you!

Done. TIL there is an alternative spelling for grey lol, for a second I thought I was spelling grey wrong my entire life

Is the search results limited to max 5 right now? Should we enable scrolling for more results instead?

yeaa each autocomplete request can only return up to 5 results. To get more than 5, we could send multiple requests with different restriction (country or location with radius), but that seems a bit overkill haha

[shizuko-akamoto]

I don't know if it's reproducible on your end, but the height on DestInfoWindow seems like it's height is a little off.

Fixed 🔧 Google map has dynamic styling and using Google chrome somehow applied a slightly different styling to the map. Had to override the css property to make it works.

yay cofirmed it's fixed!

I realized the SearchBar popup looks better with lighter outline. Would you change the border color to $bright-gray instead of current $silver-gray? (both for .searchBarPopup and .searchInput), and also change the padding on .searchBarPopup to 15px 25px. Thank you!

Done. TIL there is an alternative spelling for grey lol, for a second I thought I was spelling grey wrong my entire life

Oh no, so i've been using American gray for this whole time hhh.

Is the search results limited to max 5 right now? Should we enable scrolling for more results instead?

yeaa each autocomplete request can only return up to 5 results. To get more than 5, we could send multiple requests with different restriction (country or location with radius), but that seems a bit overkill haha

I see, that makes sense.