Geolocation API Polymer web component.
Example to get the device geolocation values:
<geo-location latitude="{{latitude}}" longitude="{{longitude}}"></geo-location>
<ul>
<li>Latitude: [[latitude]]</li>
<li>Longitude: [[longitude]]</li>
</ul>
Web component element for the Geolocation API
Home Page: https://webcomponents.org/element/ebidel/geo-location
Do the clean up. Reuse https://github.com/ebidel/geo-location/blob/master/geo-location.html#L136
Is there a way to incorporate GPS accuracy estimate? I am pretty sure the data should be provided.
I think that idle and watchPos properties should have an observer, I mean, if one of this 2 properties change must request a position.
I'll send a pull request as soon as I have some free time. ๐
When you add multiple geo-location elements with watch-pos in a single document, only one will effectively watch the position. The watch for the other elements is cleared. Is this on purpose?
Possible fix in this fork: https://github.com/appsup-polymer/geo-location
When having attributes like so:
<geo-location maximum-age="30000" high-accuracy="true" ></geo-location>
like maximum-age or high-accuracy every initial request ignores those attributes;
The Guard placed in fetch method is not sufficient to ensure the element is ready:
fetch: function () {
// Guard clause in case observer runs before element is ready. Refer to Polymer issue #3438
// https://github.com/Polymer/polymer/issues/3438
if (this.idle === undefined || this.watchPos === undefined) {
return;
}
The fetch method (observer) is called twice - for each default value of this.idle and this.watchPos
idle: {
type: Boolean,
value: false,
observer: 'fetch'
},
watchPos: {
type: Boolean,
value: false,
observer: 'fetch'
}
but when this.idle and this.watchPos are set - the element is still not ready and none of the attributes are available , and fetch is executed with options like:
Object {enableHighAccuracy: undefined, timeout: undefined, maximumAge: undefined}
This causes maximum-age to not cache the location the first time, the first location is not accurate since the high-accuracy is not true and all sorts of problems on mobile device as well as performance issues.
A simple fix that is working for me is to add the 3 attributes to the list like so:
if (this.idle === undefined || this.watchPos === undefined || this.highAccuracy === undefined || this.timeout === undefined || this.maximumAge === undefined) {
return;
}
It's easier to set that way.
Why not?
It is not working for me on safari including in the demo. Safari supports geo location. http://caniuse.com/#search=geolocation
It was workig a few days ago but now it only returns
2: Network location provider at 'https://www.googleapis.com/' : Returned error code 403.
Do I need an API_Key and set it somewere or it is realy bugged now?
Since your code has a five-second timeout, it is likely that devices will timeout before resolving location, especially with the accuracy turned up. Have you considered adding a backstop JSON service to perform IP-based geolocation if the initial resolution fails?
I'm getting the following error at https://www.webcomponents.org/element/ebidel/geo-location and the demo page after I click "share location" in the Firefox permission dialog.
Hey Eric,
I am Binh Bui, the Marketing Community Specialist of Vaadin. I tested your components and really liked it. I published the blog Introducing geo-location, a web component which lets you easily locate, track or reverse geocode your current location.
Also, I would highly appreciate if there are some words down below the comment section from the original author.
Cheers!
Hello, the component seems to be inactive on android devices. I tried with a Huawai tablet with android 7.0, and a Samsung Galaxy S8 with android 8.0.0.
The demo is not locating me, it renders a map that start at coordinate [0,0]
Can you take a look at https://github.com/ebidel/geo-location/blob/master/geo-location.html and give it an initial review?
bower.json
as repo topics (https://github.com/blog/2309-introducing-topics).It makes sense to remove the https://ebidel.github.io/geo-location/ demo (gh-pages branch) completely, because:
So it's easily configurable.
@ebidel Please update this web component to Polymer 2.x support.
Firefox asks the user to share his location using a popup, that popup can be dismissed. When the user does so, the watchPosition never throws an error. Perhaps we should add a timeout
handler that fires an error if watchPosition doesn't success
or error
?
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.