leaflet.js is showing empty map: Uncaught Error: Invalid LatLng object: (NaN, NaN)

Question

I was just trying to setup my first map display with mapbox.js . Unfortunately it's just not working and I don't know why.

I tried to reduce it to a very basic setup but still no luck (full source may be found here ).

The most essential parts of it:

var mapconfig = { "tilejson": "2.0.0",
    "scheme": "xyz",
    "tiles": ["/proxy.php?z={z}&x={x}&y={y}"],
    "maxzoom": 18,
    "center": [12.93509,50.88306,12]
};
var map = L.mapbox.map('map', mapconfig);

While the error console doesn't show any error messages, it isn't showing any tiles. What I do see are the outlines of the map view as well as the zoom-box. Also there are no requests to the proxy-script (which is working fine, btw - I've been using Open Layers 3 [see: ol3js.org] before and there the proxy did just fine).

At the moment I move the cursor over the map, the error console gets spilled with messages telling me

Uncaught Error: Invalid LatLng object: (NaN, NaN)

Answer 1

I got stuck on the same problem for a short while. Turns out I was just missing a setView() call after initializing the map.

Answer 2

I finally found the answer:

var mapconfig = { "tilejson": "2.0.0",
"scheme": "xyz",
"tiles": ["/proxy.php?z={z}&x={x}&y={y}"],
"minzoom": 0,
"maxzoom": 18,
"center": [12.93509,50.88306,12]
};
var map = L.mapbox.map('map', mapconfig);

See the difference? Well, here you are:

"minzoom": 0,

I don't know why this is required, but without this mapbox doesn't work as I want it to ...

Obviously there are a few TileJSON properties to be seen as a must have in order to get mapbox.js doing it's work: without center , for example, it's not doing anything either. But with this missing it does give you an error at least instead of failing silently...

Maybe anybody can shed some light on this?