Mapbox map with multiple markers does not render

Question

I am trying to render multiple markers on a simple map. I've adapted code from one of the mapbox examples.

var map = L.mapbox.map('map', 'examples.map-9ijuk24y')
    .setView([45, 0], 3);

var featureLayer = L.mapbox.featureLayer(
{
    type: 'FeatureCollection',
    features: [
      {
        type: "Feature",
        properties: {
          title: "ONE"
        },
        geometry: {
          type: "Point",
          coordinates: [-77,45]
        }
      },
      {
        type: "Feature",
        properties: {
          title: "TWO"
        },
        geometry: {
          type: "Point",
          coordinates: [-67,45]
        }
      }
    ]
}).addTo(map);

map.fitBounds(featureLayer.getBounds());

Here is a fiddle: http://jsfiddle.net/MA36p/4/

When the page is initially displayed, the map does not render. It will render after you click one of the markers. It will also render if you display only a single marker.

What am I missing?

Edit: I am reproducing this on OSX using Chrome and Firefox. I haven't tried Windows yet.

Answer 1

var map = L.mapbox.map('map', 'examples.map-9ijuk24y');

If you don't set an initial map location, the example is fixed. This is a subtle bug in Leaflet that'll be fixed in the next revision.