Dimensionando o mapa do folheto dentro do bootstrap

11

Eu tenho tentado alterar a altura do meu mapa de folheto para uma porcentagem dentro do bootstrap, mas sempre que faço o mapa não é desenhado. Assim, eu sempre tenho que voltar ao valor px. Tenho certeza de que é uma configuração simples que estou perdendo, pois sou um iniciante em CSS. Aqui está o meu css.

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  #map {
    height: 75%;
  }
</style>
web-mapping leaflet bootstrap-framework njackson.gis
fonte
3
forneça mais informações: como fica sua marcação? Você pode produzir um exemplo mínimo mostrando o problema?
atlefren

Respostas:

12

Sempre tive problemas com a altura do mapa no bootstrap, pois a margem na parte superior pode ser diferente quando a largura do mapa muda para obter 100% de altura (mas com uma barra de navegação na parte superior), acabo usando 

var mapmargin = 50;
$('#map').css("height", ($(window).height() - mapmargin));
$(window).on("resize", resize);
resize();
function resize(){

    if($(window).width()>=980){
        $('#map').css("height", ($(window).height() - mapmargin));    
        $('#map').css("margin-top",50);
    }else{
        $('#map').css("height", ($(window).height() - (mapmargin+12)));    
        $('#map').css("margin-top",-21);
    }

}

que é feio, mas faz o trabalho.

Calvin
fonte
6

[ATUALIZAÇÃO 2020]

A partir de 2020/02/23, o Flexbox possui 95% de suporte ao navegador e é uma ótima opção para tornar o Leaflet responsivo usando a propriedade flex-grow.

Veja uma demonstração do CodePen aqui

É configurado para que ainda seja renderizado em navegadores que não suportam o Flexbox, apenas os usuários terão que rolar um pouco

¯ \ _ (ツ) _ / ¯

==================================================== ==========

[POST ANTIGO]

Isso funcionou para mim.

Nota: queria que meu mapa não tivesse 100% de largura em telas grandes, então adicionei

.container{max-width:60em;} /* Remove for full screen */

HTML

<div id="map-holder">
  <div class="container fill">
    <div id="map"></div>
  </div>
</div>

CSS

#map
{
    width: 100px;
    height:100px;
    min-height: 100%;
    min-width: 100%;
    display: block;
}

html, body
{
    height: 100%;
}

#map-holder{
    height: 100%;
}

.fill
{
    min-height: 100%;
    height: 100%;
    width: 100%;
    max-width: 100%;
}

.container{
    max-width:60em;
    padding: 0.2em;
}
Tristan Avançado
fonte
1
trabalhou para mim. realmente a melhor resposta de todos os #
g07kore 17/06/2016
5

O problema é #mapum filho bodye você só pode especificar alturas de porcentagem para elementos filhos se o pai tiver uma altura definida explicitamente.

<style type="text/css">
    body {
        padding-top: 60px;
        padding-bottom: 40px;
        height: 480px;
        }
    #map {
        height: 75%;
        }
</style>

Isso criaria o que você deseja, mas a área útil nunca aumentaria em mais de 75% dos 480px. Normalmente, um divrecolhimento ocorre quando não há um conteúdo, mas com o Leaflet, mesmo que seu mapa esteja divnele, ele não é calculado na renderização; portanto, é recolhido na renderização. Se você deseja que o conteúdo ocupe todo o espaço vertical, é possível consultar o tamanho da janela no carregamento da página com algum javascript e definir a altura dessa maneira.

RomaH
fonte
3

Basta adicionar um height:100%às tags htmle bodypara que elas tenham uma altura definida e possam ser usadas como referência e funcione.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Height sample</title>
<style type="text/css">
    html, body { 
        height:100%
    }
    #map {
        margin: 1em auto;
        height:70%;
        border: 2px dashed black;
    }                                                                                                                                                                                                            
</style>
</head>
<body>
    <h1>The map</h1>
    <div id="map"></div>
</body>
</html>

Referências:

pconcepcion
fonte
1
este é o caminho a percorrer.
George Silva
1

Atenção! Após testes entre navegadores, descobri que minha resposta abaixo só funcionava para mim no Chrome e não no Firefox

Eu tive o mesmo problema e consertei isso com display: table na div principal e display cell-cell em cada div, graças a esta resposta no stackoverflow :

<div class="container body-container">

  <div class="col-md-6 side-container">
    <p>some stuff to</p>
    <p>fill the</p>
    <p>first colum</p>      
  </div><!-- /other column -->
  <div class="col-md-6 side-container">
    <div id="map"></div>
  </div><!-- /leaflet column -->
</div><!-- /container -->

E o css:

.body-container {
    display: table;
}
.side-container {
  float: none;
  display: table-cell;
  height:0;
}
#map {
    height: 100%;
}
RvdBerg
fonte