Leaflet: nem todos os blocos são carregados até a janela de redimensionamento

O redimensionamento no redimensionamento do windows funciona corretamente, veja este exemplo: http://leaflet.cloudmade.com/debug/map/map-mobile.html

Se você redimensionar o contêiner do mapa manualmente, precisará chamar map.invalidateSize() .

Estou vendo o mesmo problema. Apenas alguns blocos estão sendo exibidos inicialmente, mas se eu redimensionar a janela do meu navegador, todos os blocos serão exibidos.

NÃO corrigido para este bug no chrome27. Eu tenho o mesmo problema
O URL falhou

Verifique este: http://leafletjs.com/examples/mobile-example.html

@mourner Eu tenho que mudar o mapa dinamicamente. E eu uso o map._onResize() para corrigi-lo. O url acima é um exemplo de tela cheia, não para alterar o tamanho do mapa. obrigado pelo seu hack @ludinov-stuzo

@mourner Encontrei o problema. Uso setTimeout() para executar o invalidateSize() após a animação.

    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;
        }
    });

O redimensionamento no redimensionamento do windows funciona corretamente, veja este exemplo: http://leaflet.cloudmade.com/debug/map/map-mobile.html

Se você redimensionar o contêiner do mapa manualmente, precisará chamar map.invalidateSize() .

Você fez meu dia. Meu mapa simplesmente não funcionaria direito. Nenhuma das funções incluindo setView , flyTo , panTo , fitbounds funcionaria corretamente. Isso funcionaria às vezes, e às vezes não. Eu simplesmente não conseguia entender quando isso aconteceu . Então eu vi que funciona quando eu redimensionei a janela, e depois de horas de P&D inútil cheguei a este tópico.

Muito obrigado.

Ouça Map obj me ajudou. adicione uma função que acione quando o mapa for carregado ou alterado de tamanho e dentro de executar - map.invalidateSize().

A maneira de ganchos de reação:

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

export default const MyMap = () => {

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


  /*render and other function*/
}