Menu
I'm a meteor.js nuub, but I did spend quite a bit of time trying to figure this one out.
I'm trying to reactively update my UI based on the HTML5 geolocation API callback passed into getCurrentPosition. However, the UI is not updating with my current code.
Can you offer suggestions and/or a solution? Here are the details:
Basics: meteor server is running, serving other data to/from mongo via collections successfully
I have a main page (main.html):
<head>
<title>Geolocation</title>
</head>
<body>
<div class="container">
<header class="navbar">
<div class="navbar-inner">
<a class="brand" href="/">Geolocation</a>
</div>
</header>
<div id="locationDemo">
{{> location}}
</div>
</div>
</body>
that references a template (location.js):
<template name="location">
<div>
Lat: {{lat}}
</div>
<div>
Lon: {{lon}}
</div>
</template>
that has this associated helper (location.js):
_lat = {
current: 0,
dep: new Deps.Dependency,
get: function(){
this.dep.depend();
if(this.current === 0){
getLocation();
}
return this.current;
},
set: function(value){
this.current = value;
this.dep.changed();
Deps.flush();
return this.current;
}
};
_lon = {
current: 0,
dep: new Deps.Dependency,
get: function(){
this.dep.depend();
if(this.current === 0){
getLocation();
}
return this.current;
},
set: function(value){
this.current = value;
this.dep.changed();
Deps.flush();
return this.current;
}
};
function getLocation(){
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else{
console.log("Geolocation is not supported by this browser.");
}
}
function showPosition(position)
{
_lat.set(position.coords.latitude);
_lon.set(position.coords.longitude);
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
console.log("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
console.log("Location information is unavailable.");
break;
case error.TIMEOUT:
console.log("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
console.log("An unknown error occurred.");
break;
}
}
Template.location.helpers({
lat: _lat.get(),
lon: _lon.get()
});
675
As far as I know navigator.geolocation is not a reactive data source. So this won't work without some explicit polling. Another thing that you've got wrong is that your helpers are not functions, so they couldn't be called repeatedly.
This might work (not tested):
Meteor.setInterval(function() {
navigator.geolocation.getCurrentPosition(function(position) {
Session.set('lat', position.coords.latitude);
Session.set('lon', position.coords.longitude);
});
}, 5000);
Template.location.helpers({
lat: function() { return Session.get('lat'); },
lon: function() { return Session.get('lon'); }
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
