Invalid LatLng object with Leaflet map

Question

Invalid LatLng object with Leaflet map

I am completely stuck on solving a weird map error while using Leaflet.js and Cloudmade in an Angular and Rails app. The maps work on almost every map except for a few maps on staging (works fine for development) where I'm getting: Uncaught Error: Invalid LatLng object which it says is undefined. I'm getting the lat and long from a JSON and I've verified the lat and long are present in the JSON and that same lat/long is working for similar maps. In the Leaflet source code, it says the error is given when the lat/long are Not-A-Number but I'm confused how the lat/long are not numbers when they are in my json. Here's the stack trace I'm getting in Chrome:

Uncaught Error: Invalid LatLng object: (undefined, undefined)
n.LatLng 
n.latLng 
n.Map.n.Class.extend.project 
n.Map.n.Class.extend._getNewTopLeftPoint 
n.Map.n.Class.extend._resetView 
n.Map.include.setView 
(anonymous function) 
jQuery.event.dispatch 
elemData.handle.eventHandle 
jQuery.event.trigger 
(anonymous function) 
jQuery.extend.each
jQuery.fn.jQuery.each 
jQuery.fn.extend.trigger 
(anonymous function) 
next 
Tab.activate 
Tab.show 
(anonymous function) 
jQuery.extend.each 
jQuery.fn.jQuery.each 
$.fn.tab 
(anonymous function) 
jQuery.event.dispatch
elemData.handle.eventHandle

A little bit of the code here:

var map = L.map('map').setView([$scope.lat, $scope.long], 11);
L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(map);

The link is replaced with my API key of course. I'm using the latest stable version of Leaflet which contains this code fixthat was the best Google search result I could find. My map is inside a tabbed content used from Bootstrap. What problems could there be here? Or what would I do to debug this? Any help would be greatly appreciated and I'm happy to provide more details if needed.

javascript
angularjs
leaflet

Answer 1

Not sure if you got this working, but I had a similar issue with the lat/lng being strings such as "53.12345", "-1.6789". If this is the case, either change the data returned in the string or parse the returned strings into float, such as:

var marker = {
                        lat: parseFloat(hotelLat),
                        lng: parseFloat(hotelLng),
...
}

Answer 2

Try:

console.log($scope.lat)

and see if you get any data. Not sure why you have $ in your variables. It could be a type casting issue where for some reason your code is returning strings? Also, try typeof to verify if your lat longs are in fact ints. Hope that helps