Geek Answers Handbook

Meteor.js reactive html5 geolocation position.coords

I am meteor.js nuub, but I spent a lot of time trying to figure it out.

I am trying to interactively update my user interface based on the HTML5 geolocation API callback passed to getCurrentPosition. However, the user interface does not update my current code.

Can you offer suggestions and / or a solution? Here are the details:

Basics: a meteorite server works, serves other data to / from mongo through a collection 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>

which refers to the template (location.js):

 <template name="location"> <div> Lat: {{lat}} </div> <div> Lon: {{lon}} </div> </template>

which this associated helper has (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() });
+7
javascript html5 meteor geolocation
source share
2 answers

As far as I know, navigator.geolocation not a reactive data source. So this will not work without an explicit poll. Another thing is that you are mistaken in the fact that your helpers are not functions, so they could not be called again.

This may work (not verified):

 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'); } });
+4
source share

To make geolocation work in Meteor applications compiled as native iOS apps, I needed to add a geolocation package available at https://atmospherejs.com/mdg/geolocation

+1
source share

More articles:


All Articles