[JavaScript]Problem z szarym tłem na mapie (mapa źle się wczytuje) Opcje

[northwest]

Witam serdecznie.
Mam mapkę w Open Street Maps: http://serwer1356363.home.pl/pub/test/mapa.html
Podgląd: https://ibb.co/x8mqR62


Mój kod wygląda następująco:

[HTML] pobierz, plaintext 
 
<script type="text/javascript">
 
            function onLocationFound(e) {
                var radius = e.accuracy / 2;
                lat = e.latlng.lat;
                lng = e.latlng.lng;
 
                L.marker(e.latlng).addTo(map).bindPopup("Tutaj jesteś!!!");
                //L.circle(e.latlng, radius).addTo(map);
 
                map.setView([lat, lng], 12);
            }
 
            function onLocationError(e) {
                //alert(e.message);
                console.log(e.message);
            }
 
 
            var map = L.map('mapdiv', {
                editable: true,
                fadeAnimation: false
            }).setView([54.35070881441067, 18.641191756395074], 12);
            L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            // L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
                maxZoom: 18, zoomControl: true, detectRetina: true
            }).addTo(map);
 
 
 
 
 
            let myFilter = ['grayscale:100%'];
 
            let myTileLayer = L.tileLayer.colorFilter('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
                attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
                filter: myFilter,
            }).addTo(map);
 
 
            // lc = L.control.locate({
            //     strings: {
            //         title: "Pokaż gdzie jestem"
            //     }
            // }).addTo(map);
 
 
            var LeafIcon = L.Icon.extend({
                options: {
                    iconSize: [25, 29],
                    iconAnchor: [25, 29],
                    popupAnchor: [-12, -22]
                }
            });
 
 
            L.icon = function (options) {
                return new L.Icon(options);
            };
 
 
            var icons = {
                greenIcon: new LeafIcon({iconUrl: '{{asset('assets/images/ikon19.png')}}'}),
                redIcon: new LeafIcon({iconUrl: '{{asset('assets/images/ikon20.png')}}'}),
                blackIcon: new LeafIcon({iconUrl: '{{asset('assets/images/ikon20.png')}}'})
            }
 
 
            var image = '';
            $.ajax({
                url: '{{url('/getPointForMap')}}',
                method: 'get',
                cache: false,
                success: function (data) {
                    $.each(JSON.parse(data), function(i, poi) {
                        if (poi.photo != ''){
                            image = '<img src="'+poi.photo+'" class="mapImgF"><br/>';
                        }
                        L.marker([poi.lat, poi.lng], {icon: icons[poi.marker]}).addTo(map).addTo(map).bindPopup('<a href="'+poi.url+'">' + image + '<div class="mapTitleF">' + poi.name + '</div>' + '<div class="mapDescF"> ocena: ' + poi.score + '<br/>' + poi.price + ' </div></a>', {maxWidth: "auto", closeOnClick: true});
                    });
                }
            });
 
            map.on('locationfound', onLocationFound);
            map.on('locationerror', onLocationError);
            map.locate({setView: true, maxZoom: 18});
 
        </script>
 
        <style type="text/css">
            #mapdiv {
                height: 600px;
                width:100%;
            }
 
        </style>
[HTML] pobierz, plaintext 

W jaki sposób można naprawić to szare tło?

[nospor]

Gdy nawet lekko sie zmieni obszar przegladarki to mapa sie "naprawia". Wyglada wiec to na to, ze na poczatku ma zle wymiary.

Sprobuj moze przeniesc o to
<style type="text/css">
#mapdiv {
height: 600px;
width:100%;
}

</style>

przed tworzeniem mapy a nie po