Trouble with Geolocation API and angularjs

661 views
Skip to first unread message

Sylvain M.

unread,
Apr 11, 2014, 3:01:39 AM4/11/14
to ang...@googlegroups.com
Hi,

I'm having trouble with angularJS and geolocation API (cordova app).


$scope.GEOsucces=function(position) 
{
var newpos ={ "lat": position.coords.latitude, "lng": position.coords.longitude, "altitude": position.coords.altitude };
var newcenter={ "lat": position.coords.latitude, "lng": position.coords.longitude, "zoom": 15 };
$scope.$emit('NEW_GPS',newpos, newcenter);

return false;
};

$scope.GEOerreur=function(err) 
{
$log.info("GPS error...");
return false;
};

$scope.$on("NEW_GPS", function(event, pos, centre)
{
$scope.$apply(function() 
{
$scope.mytrace.path.p2.latlngs.push(pos); 
$scope.mytrace.centre.lat = centre.lat;
$scope.mytrace.centre.lng = centre.lng;
});
$log.info($scope.mytrace);
});

GeoLoc = navigator.geolocation.watchPosition($scope.GEOsucces, $scope.GEOerreur, { maximumAge: 3000, timeout: 10000, enableHighAccuracy: true});

It works for a while and then I get the following error : 

http://errors.angularjs.org/1.2.12/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3…406%2C%5C%22zoom%5C%22%3A13%2C%5C%22autoDiscover%5C%22%3Afalse%7D%22%5D%5D
    at o.Map.Keyboard.o.Handler.extend._onBlur (http://127.0.0.1:1200/bower_components/leaflet-dist/leaflet.js:9:8418)
    at HTMLDivElement.t.(anonymous function).s [as _leaflet_blur13] (http://127.0.0.1:1200/bower_components/leaflet-dist/leaflet.js:8:20284) ionic.bundle.js:16905
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: parentValueWatch; newVal: {\"lat\":43.468057820224466,\"lng\":3.715953826904297,\"zoom\":13,\"autoDiscover\":false}; oldV...<omitted>...5D ionic.bundle.js:7548
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: parentValueWatch; newVal: {\"lat\":43.46768406520923,\"lng\":3.7128639221191406,\"zoom\":13,\"autoDiscover\":false}; oldVal: {\"lat\":43.468057820224466,\"lng\":3.715953826904297,\"zoom\":13,\"autoDiscover\":false}","center; newVal: {\"lat\":43.46768406520923,\"lng\":3.7128639221191406,\"zoom\":13,\"autoDiscover\":false}; oldVal: {\"lat\":43.468057820224466,\"lng\":3.715953826904297,\"zoom\":13,\"autoDiscover\":false}"],["fn: parentValueWatch; newVal: {\"lat\":43.468057820224466,\"lng\":3.715953826904297,\"zoom\":13,\"autoDiscover\":false}; oldVal: {\"lat\":43.46768406520923,\"lng\":3.7128639221191406,\"zoom\":13,\"autoDiscover\":false}","center; newVal: {\"lat\":43.468057820224466,\"lng\":3.715953826904297,\"zoom\":13,\"autoDiscover\":false}; oldVal: {\"lat\":43.46768406520923,\"lng\":3.7128639221191406,\"zoom\":13,\"autoDiscover\":false}"],["fn: parentValueWatch; newVal: {\"lat\":43.46768406520923,\"lng\":3.7128639221191406,\"zoom\":13,\"autoDiscover\":false}; oldVal: {\"lat\":43.468057820224466,\"lng\":3.715953826904297,\"zoom\":13,\"autoDiscover\":false}","center; newVal: {\"lat\":43.46768406520923,\"lng\":3.7128639221191406,\"zoom\":13,\"autoDiscover\":false}; oldVal: {\"lat\":43.468057820224466,\"lng\":3.715953826904297,\"zoom\":13,\"autoDiscover\":false}"],["fn: parentValueWatch; newVal: {\"lat\":43.468057820224466,\"lng\":3.715953826904297,\"zoom\":13,\"autoDiscover\":false}; oldVal: {\"lat\":43.46768406520923,\"lng\":3.7128639221191406,\"zoom\":13,\"autoDiscover\":false}","center; newVal: {\"lat\":43.468057820224466,\"lng\":3.715953826904297,\"zoom\":13,\"autoDiscover\":false}; oldVal: {\"lat\":43.46768406520923,\"lng\":3.7128639221191406,\"zoom\":13,\"autoDiscover\":false}"],["fn: parentValueWatch; newVal: {\"lat\":43.46768406520923,\"lng\":3.7128639221191406,\"zoom\":13,\"autoDiscover\":false}; oldVal: {\"lat\":43.468057820224466,\"lng\":3.715953826904297,\"zoom\":13,\"autoDiscover\":false}","center; newVal: {\"lat\":43.46768406520923,\"lng\":3.7128639221191406,\"zoom\":13,\"autoDiscover\":false}; oldVal: {\"lat\":43.468057820224466,\"lng\":3.715953826904297,\"zoom\":13,\"autoDiscover\":false}"]]

Any help welcome...

Best regards,

Sylvain

James Brewer

unread,
Apr 11, 2014, 12:29:17 PM4/11/14
to ang...@googlegroups.com
When `$digest()` is called, Angular will loop through all of yours watchers and process each one in turn. Occasionally, the function passed to a watch will update some value (maybe the same thing being watch or something else). When this happens, another `$digest()` cycle is queued.

When this cycle repeats more than 10 times, Angular gives up and spits out an error about infinite digest loops.

I don't see anything immediately wrong with your code, but maybe knowing this will help you debug.

Also, when in doubt, read Angular's source code! :)

Happy Friday!

James


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.



--
James Brewer

→ My favorite RealScout search is Modern & High-Tech Homes in Atherton

porjo38

unread,
May 8, 2014, 10:36:30 PM5/8/14
to ang...@googlegroups.com
I am getting a similar error, however I am not using Geolocation API. I believe the issue is in  angular-leaflet-directive.min.js as it occurs when I respond to a 'leafletDirectiveMap.click' event. Unfortunately I haven't discovered what is causing this or been able to reliably reproduce the issue.

Parker Woodworth

unread,
May 15, 2014, 11:04:51 AM5/15/14
to ang...@googlegroups.com
I ran into a similar problem using the angular-leaflet-directive module (which it looks like you might be using as well?). While I haven't had a chance to drill down into the source yet, it looks like the problem is being caused by a watcher on the map location which becomes overwhelmed (that is to say, too many digest cycles triggered) by the leaflet animation when the map position is changed programatically.

disabling the animation solves the problem (although it is not ideal that this needs to be the solution).

I haven't found a way to disable animation as a master setting yet, but I was able to solve the problem for each particular center change event by accessing the map object directly and using leaflet's built in .panTo() function like so:

leafletData.getMap().then(function(map) { 
    map.panTo([new_lat, new_long], {animate:false})
});

here's an example of how to access the map object directly (hint: you'll need to import the leafletData module).

hope this helps.


P

Sylvain M.

unread,
May 15, 2014, 11:45:01 AM5/15/14
to ang...@googlegroups.com
Thank you for the answer. 

I confirmed that the error was in angular-leaflet-directive too. I moved to angular-google-maps and then it works fine.

Nice job, you have found where the bug was... I will wait until some fix is done prior to go back to angular-leaflet-directive. 

Onq question : how would you do to get direct access to the map object if there are two leaflets object on the document ...



--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/f5MEcuBJQgM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

Imane Alfaqir

unread,
Apr 25, 2016, 12:12:46 PM4/25/16
to AngularJS
Hi everybody, I'm trying to use leaflet-plugin-geolocation with angularJS, but first, I have to add geolocation api call to leaflet scope, I'm trying to do that, but it's not working. Do you know how to do that? Here is the link of the plugin: https://github.com/i-breaker/leaflet-plugin-geolocation. I hope that you can help me. 
Thankx for advance :)
Reply all
Reply to author
Forward
0 new messages