Leaflet タイルが左上しか表示更新されない

ボタンを押すとモーダルで地図画面がでてくるようにしたいのですが
左上のタイルしか表示されず
マップを移動しても左上の角のタイルしか追加されません

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>&times;</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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

</script>
</html>