Compass/Qibla Finder Request

[Xzempts]

I use this app as my daily athan app. I would love if you can add a compass feature to locate the qibla within the app. I don't want to have a separate app to do this.

[meypod]

~~while I like this idea, I think a separate app for it would be more appropriate I have plans to make a very lightweight native application (~ 1-3 MB) for this purpose I pin this issue till I make that app, so others can see that is in the roadmap, just not inside this application

Feature request accepted

[smehdux]

Salam alaikum,

I think is important to have compass 🧭 in the same application, 1-3Mb it's too lightweight :) Add such feature won't have a big impact on the app size.

Let's making a poll to decide. For me YES

[meypod]

Va alaykum assalam

Can you explain please ? why is it important to have it in the "same" application ? and what do you mean "too lightweight" ?

my reasons for creating another app for it:

1. I want each app to not go out of it's scope, this makes each app focus on what it needs to do
2. by doing so, apps can be finished when they reach their goal. after that minimal effort is needed for maintenance of each app.
3. updates will be for that single purpose, for example if there's an update for compass, you shouldn't need to download 15 MB of unrelated data

[yusufmte]

Agree, a lightweight compass app would be awesome, but I think it makes most sense as a separate app

[meypod]

well, after talking with other people and thinking more about it, I have decided to add this inside the current app it will be added when I am done with adhan related features

[smehdux]

Va alaykum assalam

Can you explain please ? why is it important to have it in the "same" application ? and what do you mean "too lightweight" ?

my reasons for creating another app for it:

1. I want each app to not go out of it's scope, this makes each app focus on what it needs to do

2. by doing so, apps can be finished when they reach their goal. after that minimal effort is needed for maintenance of each app.

3. updates will be for that single purpose, for example if there's an update for compass, you shouldn't need to download 15 MB of unrelated data

Salam alykum,

@meypod it's obvious that such a feature must be included in the same app, prayer and Quibla go along with each other. I mean is a part of the application, definitely. This feature won't make the application bigger if you keep it simple with a smooth design. may Allah reward you all.

[meypod]

just for general info on this feature and why it takes long: the main problem with a compass-style qibla finder is that it's often not accurate enough, and sometimes completely wrong (opposite directions), because of the unreliability of the compass/magnetic sensors (even when it's calibrated) to overcome the issue, the solution is to provide an option to see the direction on a map google maps is the most popular map available, with good libraries for it but there's a downside, usually they are not fully open source so since we are fully open source, and we are on f-droid, we need to avoid google stuff so the next option is open street maps, with little support for it in react native community, which makes implementing this feature harder

I'm still looking for possible solutions (currently investigating https://github.com/visgl/react-map-gl with Maplibre) if anyone thinks they know of a library that can do these, please let me know:

• be cross platform (support android and iOS)
• support drawing a line on the map (and possibly moving it)
• be fully open source, so we can use it on f-droid

[smehdux]

just for general info on this feature and why it takes long: the main problem with a compass-style qibla finder is that it's often not accurate enough, and sometimes completely wrong (opposite directions), because of the unreliability of the compass/magnetic sensors (even when it's calibrated) to overcome the issue, the solution is to provide an option to see the direction on a map google maps is the most popular map available, with good libraries for it but there's a downside, usually they are not fully open source so since we are fully open source, and we are on f-droid, we need to avoid google stuff so the next option is open street maps, with little support for it in react native community, which makes implementing this feature harder

I'm still looking for possible solutions (currently investigating https://github.com/visgl/react-map-gl with Maplibre) if anyone thinks they know of a library that can do these, please let me know:

* be cross platform (support android and iOS)

* support drawing a line on the map (and possibly moving it)

* be fully open source, so we can use it on f-droid

TLDR;

I've just found that, it's not a React native lib, but maybe you could do some stuff to wrap the map in a React component ...

https://leafletjs.com https://leafletjs.com/examples/mobile/

React API => https://github.com/PaulLeCam/react-leaflet

[meypod]

that was not, but these are: https://github.com/rnmapbox/maps https://github.com/maplibre/maplibre-react-native/

[meypod]

AFAIK, web based libraries are not friendly to react native ecosystem sadly

[meypod]

Update:

I managed to create the map view using the maplibre-react-native, draw qibla line, and draw where user is facing right now if compass is available, so the functionality is almost there and will be available in a future release soon after I finish the remaining UX issues

there's stuff I want to document about it, where I think this is a good place, and maybe someone can explain why the following issue happens

this weird issue starts with drawing the line on the map to draw a line on the map using a degree, coordinate and a distance, you have to assume earth is spherical so I did a simple search on how to do that, and did draw a 10km wide line in the direction of user, and a 10km wide line in the direction of qibla degree then to make sure that the results are correct, I used google maps measure distance tool from my location to kaaba

what happened ? the results are not the same. but they are close by only a few degrees. but it leads to another city on long distances.

I tested again by drawing a line directly from user location to kaaba, this time directly using coordinates instead of degree

line from this method seems to overlap with google's measure distance tool.

now here's the interesting part, if we go back to the first method, by using qibla degree from north, distance and user coordinates, this time by using the actual distance between user and kaaba for distance instead of 10km, the result seems to overlap with google.

so I'm kinda lost, which result is the correct result ? if we assume Google is never wrong (which usually they are not wrong, but It's not impossible), then the direction at small distances shown using degree is wrong, and the long distance line is the correct one but if Google, and other maps, are wrong, then the direction is the correct one

TL;DR; possible causes of the issue:

• Either the maps (Google, Libremap, etc) are wrong (the line drawn is inaccurate)
• the degree provided by Adhan.js library is wrong (which is unlikely given that they overlap at the long distance calculation)
• I'm missing some vital information which results in wrong conclusions

[meypod]

conclusion: there was observation error in my part it seems that using degree and drawing a short line in the direction is the way to go, and it consistently aligns with google maps measure tool the only tool that can display the earth's curvature is probably google earth right now drawing a long line from user's coordinates to kaaba coordinates will almost always yield incorrect results. I hope other qibla finder apps are aware of this issue. so our replacement method is the way to go

[smehdux]

Salam alykoum

You said : "the degree provided by Adhan.js library is wrong (which is unlikely given that they overlap at the long distance calculation)"

What about testing Adhan.js with a well known GPS position (any famous City) to check that?

I think this kind of feature is not relevant, personally I don't care about a map with a direction to Kaab, instead I would prefer a 🧭 compass showing me the kiblah direction as others applications do. What do you think?

[meypod]

Va alaykum assalam

degree provided by adhan.js was correct, I double checked with other online results

we will support both types, map and compass but you have to keep in mind that phone's compass sensor is inaccurate and can be completely wrong at times, which is the main reason I also included the map

[meypod]

people can understand the error much more easily if they have a map that shows their surroundings vs a compass that doesn't have any indication of being wrong

[meypod]

released in v1.11.0