Volantino cartina loading metà in grigio piastrelle

Question

ho una mappa volantino in un div che loa come questo:

<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" /> 

Ho poi hanno un div come questa:

Alcuni js che carica il mappa:

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 

Poi, il caricamento della pagina ho qualche JS che controlla l'altezza della finestra e ridimensiona:

012.351.

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

Tuttavia quando la mappa viene caricata carica con metà delle tessere in grigio. Quando ho ridimensionare la mappa carichi bene, ma il carico iniziale e 'di 1/2 grigio

Answer 1

Se non si dispone di un motivo per usare JS per la mappa dimensionamento sua, probabilmente meglio usare i CSS:

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

Tuttavia si puoi provare a utilizzare map.invalidateSize() dopo aver inserito la mappa nel DOM (o mappa ridimensionata da $("#map").height($(window).height())).

invalidateSize() viene chiamato per impostazione predefinita quando si ridimensiona la finestra, consultare i seguenti link: https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L609 e https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L616.