Added the Geolocation (current location of user) Feature #16
Conversation
src/components/map/GoogleMap.svelte
Outdated
| @@ -44,6 +45,43 @@ | |||
| if (browser) { | |||
| window.addEventListener('themeChange', handleThemeChange); | |||
| } | |||
|
|
|||
| const locationButton = document.createElement('button'); | |||
There was a problem hiding this comment.
I'd love to see this extracted out into a reusable component. We'll want to support different map backends at some point (Mapbox, OSM, Bing, Apple, etc.), and I want to make sure that we can reuse as much functionality across them as possible.
Once it's a reusable component, it should be straightforward (I hope) to use the Font Awesome package to display the crosshairs icon instead of loading the entire package from a CDN.
There was a problem hiding this comment.
Okay. I will make sure to create a reusable component for using in the future.
src/components/map/GoogleMap.svelte
Outdated
| document.getElementById('map').appendChild(locationButton); | ||
|
|
||
| locationButton.addEventListener('click', () => { | ||
| if (navigator.geolocation) { |
There was a problem hiding this comment.
Stylistically, I prefer early returns over deep nesting. it makes it easier to read your code and follow the control flow. What I mean by this here is to flip your conditions around:
if (!navigator.geolocation) {
alert('Geolocation is not supported by this browser.');
return;
}
// ... continue on with the rest of your logic.
There was a problem hiding this comment.
Sure, that's a great approach. I have added the early return statement.
src/components/map/GoogleMap.svelte
Outdated
| const userLocation = new google.maps.LatLng(latitude, longitude); | ||
| map.setCenter(userLocation); | ||
|
|
||
| new google.maps.Marker({ |
There was a problem hiding this comment.
since we want the button to be a reusable component, can you keep this marker logic here and invoke it with a callback from the LocationButton component?
There was a problem hiding this comment.
Done this one.
src/components/map/GoogleMap.svelte
Outdated
| @@ -104,6 +142,10 @@ | |||
| }); | |||
| </script> | |||
|
|
|||
| <link | |||
There was a problem hiding this comment.
make sure to remove this after making the other changes!
Fixed #4
Tasks done:
Screenshot:
