ng-web-apis / geolocation Goto Github PK
View Code? Open in Web Editor NEWAn Observable based abstraction to use Geolocation API with Angular
Home Page: https://ng-web-apis.github.io/geolocation
License: MIT License
An Observable based abstraction to use Geolocation API with Angular
Home Page: https://ng-web-apis.github.io/geolocation
License: MIT License
I'm working on creating a PR to upgrade package to use ng v12.
It appears that the current version of the start:ssr
script is not working.
I'd like to verify it'd be OK if the PR I submit also won't fix that particular issue.
npm install
npm run start:ssr
Intermittently, using Chrome with geolocate enabled, calling this.geolocation$.pipe(take(1)).subscribe(position => {
doesn't have anything returned from the observer
this.geolocation$.pipe(take(1)).subscribe(position => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
console.log('a');
}, () => {
console.log('b');
},
() => {
console.log('c');
});
if (!this.geolocationSupport) {
console.log('d');
}
None of the console logs happen
At least attempt to obtain geoposition
Brave - Works
Safari - Works
I have tried over HTTP and HTTPs
I have tried Incognito Chrome. I have tried clearing browser cache
The demo page does not show the geolocation in use. I see there's an error in the console:
Go to the Demo page. Open console.
Demo page should work
N/A
Cannot find name "Position"
This error just surfaced the other day. I have the common library installed also.
Expect Position and Coordinates types to be supplied with library
Unable to find where the Position and Coordinates types are or should be supplied from.
Thanks for fantastic libraries
Having GEOLOCATION_SUPPORT
injection token does not quite answer the question of whether the developer can use the geolocation Web API. The GEOLOCATION_SUPPORT
simply checks if navigator.geolocation
object is available. However, the user may have received the browser popup during one of the previous visits to the website and automatically clicked "Block" (like many of us do these days whenever any popup shows up). In this case, the GEOLOCATION_SUPPORT
will resolve to true, but geolocation$
observable will emit an error.
To answer the question of whether the user has allowed the website access to geolocation, we can run the following code:
navigator.permissions.query({ name: 'geolocation' }).then((x) => console.log(x.state))
// this will print "prompt", "denied", or "granted"
I wonder if an injection token GEOLOCATION_PERMISSION
could be introduced that would run the code above under the hood? Given the fact that this API returns a Promise
, I'm not sure if it can still be an Injection token or if it'll have to be an observable service similar to the geolocation$
[Important] Something to keep in mind: the support for the API above is somewhat spotty: https://caniuse.com/permissions-api
Here people suggest using the second callback for the navigator.geolocation.watchPosition
method that's called upon an error. This does not really solve the issue for me because calling this function will trigger the popup and I would like to know whether the geolocation Web API is available before the popup shows up.
Is there a way to easily unsubscribe from Observable (geolocation service)?
When moving away from a component which uses geolocation service, I would like to stop observing the position. I couldn't find direct method to do that.
When I move back to the same component, it subscribes again and I have now two observers monitoring user position. If I do it again, I would have three observers firing at the same time with updated position.
Since I couldn't find direct solution, I used pipe with takeWhile, but it looks awkward.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.