पत्रक नक्शा लोड हो रहा है आधा सलेटी रंग टाइल्स

Question

मैं एक div में एक पत्रक नक्शा है कि मैं इस तरह लोआ:

कुछ js लोड:

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

मैं तो इस जैसे एक div है नक्शा:

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 

तो पृष्ठ लोड पर मैं कुछ जे एस उस खिड़की ऊंचाई पर नज़र रखता है और आकार बदलता है:

012,351,

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

हालांकि जब नक्शा लोड होता है तो यह ग्रे में आधे टाइल्स के साथ लोड होता है। जब मैं नक्शा लोड ठीक आकार बदलने लेकिन प्रारंभिक लोड है 1/2 ग्रे

Answer 1

आप अपने शायद बेहतर उपयोग करने के लिए सीएसएस आकार नक्शे के लिए जे एस उपयोग करने के लिए एक कारण नहीं है, तो:

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

हालांकि आपको मानचित्र को DOM में डालने के बाद map.invalidateSize() का उपयोग करने का प्रयास कर सकते हैं (या नक्शा $("#map").height($(window).height()) द्वारा आकार दिया गया है)।

invalidateSize() डिफ़ॉल्ट रूप से कहा जाता है जब आप विंडो का आकार बदलने, निम्नलिखित लिंक देखें: https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L609 और https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L616।