Q&A
画面のタイトル名を表示した下に、leaflet画面を隙間無く表示したいと考えております。
現状
CSSで'style="height:100vh"'を指定したのですが、マップ下が画面からはみ出し、クレジット表記が見えなくなってしまいます。また、左上「＋ボタン」で縮尺を変えた際に、マップが画面一杯となりタイトルが消えてしまいます。
行いたいこと
常にタイトルを表示し、ブラウザサイズを変えても、タイトル下にマップが常に画面一杯となり、マップ下にはクレジット表記が常にされている状態にしたいと考えております。
HTMLCSS
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 6 <title>Leaflet Map</title> 7 8 <!-- leaflet --> 9 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" 10 integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="crossorigin=""/> 11 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" 12 integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" 13 crossorigin=""></script> 14 </head> 15 16 <body> 17 <div id="app"> 18 <h1>title</h1> 19 <div id="map" style="height:100vh"></div> 20 </div> 21 22 <script> 23 var map = L.map('map').setView([51.505, -0.09], 13); 24 25 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 26 attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' 27 }).addTo(map); 28 </script> 29 30 </body> 31</html>
回答1件
0
ベストアンサー
h1で表示しているテキスト分の高さを考慮していないから、そうなっています。
リサイズする処理を設けて、innerHeightからh1要素の高さ分を引いたのを与えるようにすればよいかと。
どこの記事を参考に書いたか忘れましたが、ウィンドウのリサイズイベントを捉えて
マップ表示している#mainのサイズ変更を仕込んでいました。
ネット検索すると、地図の親コンテナに対してリサイズを捉えて実装するってのを見かけますね。
javascript
1 function size() { 2 // リサイズ時の処理 3 var h = $(window).height() - $('#header-container').height() - 2; 4 $('#main').css('height', h); 5 var w = $(window).width() - $('#layer-menu').width(); 6 $('#main').css('width', w); 7 } 8 size(); 9 $(window).on("resize", function() { size(); });
投稿2021/01/28 00:39
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/01 11:51