leaflet - fitBounds が異なる解像度/次元で一貫して動作しないのはなぜですか?

Question

2 つの GeoJSON ファイルがあります。

1. 1 つは米国の 51 州です。https://dl.dropboxusercontent.com/u/14145516/json/51.json
2. 1 つは NJ 州の郡です。https://dl.dropboxusercontent.com/u/14145516/json/NJ.json

NJ で fitBounds を実行しようとすると、完全に機能し、マップ div に配置したディメンションに関係なく、州全体がマップ ペインの中央に配置されます。

ただし、51 個の状態ファイルを試してみると、div のサイズが約 800x600 の場合にのみ fitBounds が機能し、それを超える場所 (1366x768、1680x1050) では灰色のマップが表示されます。

これに対する回避策はありますか? どの解像度でもフルスクリーン (高さ 100% 幅 100%) で動作させる必要があります。

どうもありがとうございました。

コード：

コードは次のようにチュートリアルから取得され、アプリケーション/json タイプで json ファイルを出力する jsp への ajax 呼び出しから geojsonFeature 変数をロードします (後でさらに処理を行う必要があります)。

d3.json("${pageContext.request.contextPath}/json",function(data){
    var geojsonFeature = data;
    var map = L.map('map',{
                center: new L.LatLng(0,0),
                zoom: 5
            });

    L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
                maxZoom: 18,
                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>'
            }).addTo(map);

    var myLayer = L.geoJson().addTo(map);
    myLayer.addData(geojsonFeature);
    var bounds = myLayer.getBounds();
    map.fitBounds(bounds);
}