Bulmaで画面いっぱいにLeafletの地図を表示

2856 ワード
Bulma leaflet leaflet テキストリンク

is-fullheightのHeroを使う

Hero

HTML

heroクラスを持つsectionを作成します。idはmapにしました

<section id="map" class="hero is-fullheight">
</section>

JS

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();