ボタンを押すとモーダルで地図画面がでてくるようにしたいのですが
左上のタイルしか表示されず
マップを移動しても左上の角のタイルしか追加されません
HTMLのサイズが認識されていないのかと思い #map に width height を設定しましたがかわりません
動的に出現したDOMの中に leaflet を表示させるにはどうすればいいのでしょうか
以下のコードは bootstrap3 のモーダルのサンプルコード
http://bootstrap3.cyberlab.info/javascript/modals.html
のなかに leaflet トップのサンプル
https://leafletjs.com/
をいれただけですが状況を再現できているかと思います
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" /> <script src="https://code.jquery.com/jquery-2.1.4.min.js" data-turbolinks-eval=false></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" data-turbolinks-eval=false></script> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <style> #map { width: 80vw; height: 60vh; overflow: hidden; } </style> </head> <body> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sampleModal"> モーダル・ダイアログ 呼び出し </button> <div class="modal fade" id="sampleModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">タイトル</h4> </div> <div class="modal-body"> <div id="map"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button> </div> </div> </div> </div> </body> <script> var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); </script> </html>
回答1件
あなたの回答
tips
プレビュー