Sizing Leaflet Map di dalam bootstrap

11

Saya telah mencoba mengubah ketinggian peta selebaran saya menjadi persentase di dalam bootstrap tetapi setiap kali saya melakukannya peta tidak akan menggambar. Jadi, saya selalu harus kembali ke nilai px. Saya cukup yakin ini adalah pengaturan sederhana yang saya lewatkan karena saya seorang pemula CSS. Ini css saya.

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  #map {
    height: 75%;
  }
</style>
web-mapping leaflet bootstrap-framework njackson.gis
sumber
3
berikan info lebih lanjut: bagaimana tampilan markup Anda? Bisakah Anda menghasilkan contoh minimal yang menunjukkan masalah?
atlefren

Jawaban:

12

Saya selalu memiliki masalah dengan ketinggian peta di bootstrap karena margin di atas bisa berbeda ketika lebar peta berubah untuk mendapatkan tinggi 100% (tetapi dengan bilah nav di atas) saya akhirnya menggunakan 

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

}

yang jelek tapi menyelesaikan pekerjaan.

Calvin
sumber
6

[2020 UPDATE]

Pada 2020/02/23 Flexbox memiliki dukungan browser 95% dan merupakan pilihan tepat untuk membuat Leaflet responsif menggunakan properti flex-grow.

Lihat Demo CodePen di sini

Ini diatur sehingga masih akan dirender di browser yang tidak mendukung Flexbox hanya pengguna yang harus menggulir

¯ \ _ (ツ) _ / ¯

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

[POST LAMA]

Ini berhasil untuk saya.

Catatan: Saya ingin peta saya tidak menjadi 100% lebar pada layar besar jadi saya menambahkan

.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 Maju
sumber
1
bekerja untukku. sebenarnya jawaban terbaik sama sekali
g07kore
5

Masalahnya adalah #mapanak dari bodydan Anda hanya dapat menentukan persentase tinggi untuk elemen anak jika orang tuanya memiliki ketinggian yang ditentukan secara eksplisit.

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

Ini akan menciptakan apa yang Anda inginkan, tetapi area yang dapat digunakan tidak akan pernah tumbuh lebih besar dari 75% dari 480px. Biasanya divruntuh ketika tidak ada konten, tetapi dengan Leaflet, meskipun peta Anda di divdalamnya tidak dihitung saat render, karena itu runtuh saat render. Jika Anda ingin konten mengambil semua ruang vertikal, Anda dapat meminta ukuran jendela saat memuat halaman dengan beberapa javascript dan mengatur ketinggiannya seperti itu.

RomaH
sumber
3

Tambahkan saja height:100%ke htmldan bodytag sehingga mereka memiliki ketinggian yang ditentukan dan dapat digunakan sebagai referensi dan seharusnya berfungsi.

<!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>

Referensi:

konsepsi
sumber
1
ini adalah cara untuk pergi.
George Silva
1

Peringatan! Setelah pengujian lintas browser, saya menemukan bahwa jawaban saya di bawah ini hanya berfungsi untuk saya di Chrome dan bukan di Firefox

Saya memiliki masalah yang sama dan memperbaikinya dengan tampilan: tabel pada div utama dan tampilan tabel-sel pada setiap div berkat jawaban ini pada 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 -->

Dan css:

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