Leaflet: विंडो का आकार बदलने तक सभी टाइलें लोड नहीं होतीं

विंडोज़ आकार बदलने पर सही ढंग से काम करता है, यह उदाहरण देखें: http://leaflet.cloudmade.com/debug/map/map-mobile.html

यदि आप मानचित्र कंटेनर का आकार मैन्युअल रूप से बदलते हैं, तो आपको map.invalidateSize() पर कॉल करने की आवश्यकता है।

मैं वही मुद्दा देख रहा हूं। प्रारंभ में केवल कुछ टाइलें प्रदर्शित की जा रही हैं, लेकिन यदि मैं अपने ब्राउज़र की विंडो का आकार बदलता हूं, तो सभी टाइलें दिखाई जाती हैं।

क्रोम 27 पर इस बग के लिए तय नहीं है। मुझे एक ही समस्या है
यूआरएल विफल रहा है

इसे जांचें: http://leafletjs.com/examples/mobile-example.html

@mourner मुझे मानचित्र को गतिशील रूप से बदलना होगा। और मैं इसे ठीक करने के लिए map._onResize() का उपयोग करता हूं। उपरोक्त यूआरएल एक पूर्णस्क्रीन उदाहरण है, मानचित्र आकार बदलने के लिए नहीं। आपके हैक के लिए धन्यवाद

@mourner मुझे समस्या मिल

    var is_fullScreen=0;
    $("#close_left").click(function(){
        if(is_fullScreen){
            $("#left_panel").animate({left:0,opacity:1},800);
            $("#right_panel").animate({marginLeft:280},800);
            this.className="icon-left";
            is_fullScreen=0;
            setTimeout(function(){ map.setView([5,40],2);},1000);
        }else{
            $("#left_panel").animate({left:-280,opacity:0},800);
            $("#right_panel").animate({marginLeft:0},800);
            this.className="icon-right";
            setTimeout(function(){map.invalidateSize();            map.setView([5,-20],3);},1000)
            is_fullScreen=1;
        }
    });

विंडोज़ आकार बदलने पर सही ढंग से काम करता है, यह उदाहरण देखें: http://leaflet.cloudmade.com/debug/map/map-mobile.html

यदि आप मानचित्र कंटेनर का आकार मैन्युअल रूप से बदलते हैं, तो आपको map.invalidateSize() पर कॉल करने की आवश्यकता है।

आपने मेरा दिन बना दिया। मेरा नक्शा ठीक से काम नहीं करेगा। setView , flyTo , panTo , fitbounds सहित कोई भी फ़ंक्शन ठीक से काम नहीं करेगा। यह कभी-कभी काम करेगा, और कभी-कभी नहीं। मुझे समझ में नहीं आया कि यह कब हुआ । फिर मैंने देखा कि जब मैं खिड़की का आकार बदलता हूं तो यह काम करता है, और घंटों के बेकार आर एंड डी इस धागे तक पहुंच गया।

बहुत - बहुत धन्यवाद।

सुनो Map obj ने मेरी मदद की। एक फ़ंक्शन जोड़ें जो नक्शा लोड होने या आकार बदलने और अंदर निष्पादित होने पर ट्रिगर करता है - map.invalidateSize().

प्रतिक्रिया हुक रास्ता:

import { Map as LeafletMap } from "react-leaflet";

export default const MyMap = () => {

   useEffect(()=>{
        mapElement.current.leafletElement.invalidateSize();
    },[mapElement])


  /*render and other function*/
}