リーフレットにマップをロードするのが非常に遅い

Question

私はリーフレットの地図を持っています。次のコードを使用して、ページの読み込み、マップが完全に表示されないとき、なぜわかりません。

var Mmap = L.map('Modalmap').setView([8.7144, 125.7481],8); 
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright"></a>', 
    subdomains: ['a','b','c'] 
}).addTo(Mmap); 

L.control.scale({imperial:false}).addTo(Mmap); 

var north = L.control({position: "topleft"}); 
north.onAdd = function(map) { 
    var div = L.DomUtil.create("div", "info_legend leaflet-bar"); 
    div.innerHTML = '<img src="../lib/css/images/north-arrow-2.png" width="100%" height="100%">'; 
    return div; 
} 
north.addTo(Mmap); 

var geocoder = L.Control.geocoder({ 
    defaultMarkGeocode: false 
}) 
.on('markgeocode', function(e) { 
    var box = e.geocode.center; 
    document.getElementById("Latitude").value = box.lat; 
    document.getElementById("Longitude").value = box.lng; 
    var MarkLayer=L.marker([box.lat,box.lng]).addTo(Mmap); 
    var group = new L.featureGroup([MarkLayer]); 

    Mmap.fitBounds(group.getBounds()); 
}).addTo(Mmap); 

この地図は、私がナビゲーションバー

<div class="collapse navbar-collapse" id="myNavbar"> 
    <ul class="nav navbar-nav" style="margin-top: -3px;"> 
     <li class="dropdown"><a href="#" data-toggle="modal" data-target="#modal-1">New Customer</a></li> 
     <li class="dropdown"><a href="#" data-toggle="modal" data-target="#modal-2">New Category</a></li> 
    </ul> 
</div> 

Answer 1

からModal-1ここで推測のビットを、それを呼び出していますモーダルである：私はあなたのコンテナの名前が"Modalmap"です参照してください。これは、あなたがモーダルコンテナにマップを表示していると思うようになります。

私は、モーダルが現れたときに、リーフレットのコンテナである"Modalmap"の高さと幅が動的に設定されていると推測しています。リーフレットは親の幅と高さに基づいて、リーフレットの幅と高さを初期化するときに計算されるため、リーフレットのマップにいくつかの問題が発生する可能性があります。あなたのモーダルが表示されていないときに起こっていること、そしてそれは幅と高さとして小さな値を持つ可能性があり、これらの小さな値はリーフレットの幅と高さに終わります。

の後にリーフレットマップを呼び出すと、サイズを「更新」してを表示し、モーダルの高さと幅が正しく表示されます。

は、右の行の後、あなたのモーダルを示したことをトリガー、これを試してみてください：

setTimeout(function(){ map.invalidateSize()}, 500); 

これは、500ミリ秒後に再計算し、そのサイズにリーフレットを強制しようとしています。 （あなたのモーダルが表示されるには500msで十分です）。それが動作しない場合は、より大きな価値を試してください。

アップデート：ブートストラップ3については ちょうどあなたのコードでこれを置く

$('body').on('shown.bs.modal', function (e) { 
    setTimeout(function(){ map.invalidateSize()}, 500); 
}) 

ヒント：私はあなたが、これはすべてのあなたのモーダルのコードをトリガするために起こっているようにjQueryのセレクタとしてbodyを使用いけないお勧めします。あなたのマークアップで持っているより具体的なセレクターを使用してください 詳細はこちらCalling a function on bootstrap modal open