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

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:

<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>

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

Być może coś się gryzie let myFilter = ['grayscale:100%']; z #mapdiv { height: 600px;} weź tam sprawdź te wartości w devtoolsach.

Usunięcie tego kodu:

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);

Nie pomaga :(