Show and sort by distance to each masjid from current location

[hammady]

We can add a button to request the precise location of the user then show the distance (straight line) to each masjid in the tables. If available, we can also sort by distance. This is an approximation of the actual route to each masjid which requires accessing a remote API to calculate directions. The straight line distance can be calculated easily using the Euclidean distance formula for latitude/longitude defined locations. A quick search led me to this library: https://www.npmjs.com/package/geolib.

[hammady]

@fayez-nazzal now all masjids will come with lat/lng info. We can now calculate and sort by the distance for all of them!

[fayez-nazzal]

lat/lang means interesting map visualizations!

[fayez-nazzal]

@hammady Can you tell which sort will happen first, prayer time or location? Or are we only going to sort by location when someone requests it?

I prefer to auto-detect the location as soon as the page loads, which will only be successful when the permission is granted in the browser. In case the page is visited for the first time, the location won't be shown, but a browser popup will appear in the address-bar asking for permission. As soon as it's accepted, we do that work. In that mean time we show the status on a toast at the top of the page.

+I had an idea to show a persistent toast in the top that shows a summary - Nearest Masjid, Distance to that masjid, Next prayer, remaining time for the next prayer. And in the opposite side show nearest 5 masjids with relative info. But this is for another PR.

What do you think?

[hammady]

@fayez-nazzal I think the page should default to sort by time because this is the simplest approach which does not require any permissions. When it comes to sharing the user location, most conscious users will not grant the permission unless it is absolutely necessary. That's in general. We don't want occasional users to see this permission request before they trust us.
With that in mind, I suggest that we show a button to sort by distance which is an obvious call to share location and users won't feel persuaded as they will initiate the process themsleves. When the permission is granted the button can be hidden and replaced by another one to sort by time.

[hammady]

Let's discuss your second idea in a separate issue. If you can also provide any mockups it will help me understand.