Ulotka mapa ładowanie pół szaro płytek

Question

Mam mapę ulotki w div że Loa tak:

<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script> 

    <!--[if lt IE 9]> 
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" /> 
    <!--[if lte IE 8]> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" /> 
    <![endif]--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

Mam następnie div, takich jak ten:

Niektóre js że ładuje mapa:

map = L.map($attrs.id, 
         center: [40.094882122321145, -3.8232421874999996] 
         zoom: 5 
    ) 
     L.tileLayer("http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png", 
        maxZoom: 18 
    ).addTo map 

Następnie na stronie obciążenia mam pewne JS, który monitoruje wysokość okna i zmienia rozmiar:

$("#map").height($(window).height()) 
$(window).resize(_.throttle(-> 
    $("#map").height($(window).height()) 
, 100 
)) 

Jednak po załadowaniu mapy ładuje się z połową płytek w kolorze szarym. Po zmianie rozmiaru ładunki map w porządku, ale początkowe obciążenie wynosi 1/2 szary

Answer 1

Jeśli nie mają powód do korzystania JS na mapie doborze jej chyba lepiej użyć CSS:

html, body, #map { 
    width: 100%; 
    height: 100%; 
} 

Jednak ci można spróbować użyć map.invalidateSize() po wstawieniu mapy do DOM (lub zmienić rozmiar mapy o $("#map").height($(window).height())).

invalidateSize() jest wywoływana domyślnie podczas zmiany rozmiaru okna, patrz następujące łącza: https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L609 i https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L616.