Leaflet map doesn't render properly in bootstrap 4 modal

Question

I have some problem. I'm using leaflet map and I want to open a leaflet map in a bootstrap 4 modal but the map is not showing properly and the tiles are not fully loading.

Leaflet map script :

<script type="text/javascript">
            var mymap = L.map('map1', {
                center: [-2.203021, 117.524841],
                zoom: 4.5,
                zoomControl: false,
                touchZoom: false,
                doubleClickZoom: false,
                scrollWheelZoom: false,
                boxZoom: false,
                tap: false
             });

             L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
                 attribution: 'DPDRI',
                 maxZoom: 18,
                 id: 'mapbox.outdoors',
                 accessToken: 'pk.eyJ1Ijoic3Vhcm1pbnJhaXMiLCJhIjoiY2ptamltYXAxMGFqeDNrcWw1MGo3NGphOSJ9.Y5PaXcFwhuhMZJ3StW-dpg'
             }).addTo(mymap);

             var anggota = [
               [5.550000, 95.316670],
               [3.666670, 98.666670],
               [-0.955560, 100.360560],
               [0.533330, 101.450000],
               [0.910762, 104.476987],
               [-1.590000, 103.610000],
               [-3.795560, 102.259170],
               [-2.983330, 104.764440],
               [-2.100000, 106.100000],
               [-5.429440, 105.262500],
               [-6.120000, 106.150280],
               [-6.950000, 107.566670],
               [-6.173292, 106.841036],
               [-6.966670, 110.416670],
               [-7.801390, 110.364440],
               [-7.233330, 112.733330],
               [-8.650000, 115.216670],
               [-8.583330, 116.116670],
               [-10.163610, 123.590280],
               [2.800000, 117.450000],
               [0.000000, 109.333330],
               [-2.200000, 113.833300],
               [-3.333330, 114.583330],
               [-0.502220, 117.153610],
               [0.550000, 123.050000],
               [1.493060, 124.841260],
               [-2.683330, 118.900000],
               [-0.900000, 119.833330],
               [-5.133330, 119.431110],
               [-3.967500, 122.594720],
               [0.734134, 127.559996],
               [-3.705000, 128.170000],
               [-0.862910, 134.064020],
               [-3.000000, 139.950000]
             ];

             var daerah = [
             "Aceh",
             "Sumatera-Utara",
             "Sumatera-Barat",
             "Riau",
             "Kepulauan-Riau",
             'Jambi',
             'Bengkulu',
             'Sumatera-Selatan',
             'Kepulauan-Bangka-Belitung',
             'Lampung',
             'Banten',
             'Jawa-Barat',
             'DKI-Jakarta',
             'Jawa-Tengah',
             'DI-Yogyakarta',
             'Jawa-Timur',
             'Bali',
             'Nusa-Tenggara-Barat',
             'Nusa-Tenggara-Timur',
             'Kalimantan-Utara',
             'Kalimantan-Barat',
             'Kalimantan-Tengah',
             'Kalimantan-Selatan',
             'Kalimantan-Timur',
             'Gorontalo',
             'Sulawesi-Utara',
             'Sulawesi-Barat',
             'Sulawesi-Tengah',
             'Sulawesi-Selatan',
             'Sulawesi-Tenggara',
             'Maluku-Utara',
             'Maluku',
             'Papua-Barat',
             'Papua'
             ];

             for (var i = 0; i< anggota.length; i++){
               var marker = L.marker(anggota[i]).addTo(mymap);
               marker.bindPopup("<b>Provinsi</b><br>" + daerah[i] + "<br><a target='_blank' href='<?=base_url('Fanggota/Anggota')?>/"+daerah[i]+"'>Buka</a>");
             }

           </script>

Bootstrap modal code :

    <div class="modal fade" id="modalRegister" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="vertical-alignment-helper">
       <div class="modal-dialog vertical-align-center" role="document">
           <div style="width: 1300px;height: 520px;" class="modal-content">
               <div class="modal-header brown darken-3 white-text">
                 <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
               </div>
               <div class="modal-body">
               <div id="map1" style="width: 1250px;height: 450px;"> 
             </div>
            </div>
           </div>
       </div>
       </div>
     </div>

Link to image of the issue: myprojectimage

How can I solve this? I'm looking solution to fix it Any help much appreciated, thanks