Карта листовки отображается неправильно

Я пытаюсь добавить карту Leaflet на свою веб-страницу, но она отображается неправильно. Когда я загружаю страницу, она просто отображается как серая рамка, и я ничего не вижу, пока не начну уменьшать масштаб. Вероятно, это что-то основное, что мне не хватает, что я не могу найти для поиска.

Я добавил координаты long, lat для Новой Зеландии, но это не сработало, поэтому я изменил порядок на lat, как предложил кто-то другой, и это тоже не сработало. Я также добавил маркер, чтобы проверить, где это будет отображаться, он должен быть в Веллингтоне, Новая Зеландия, но, похоже, он появляется где-то посреди океана. Я также не уверен, какой масштаб мне следует использовать. Я пробовал разные числа, но они всегда выглядят одинаково, ничего нет, пока я не уменьшу масштаб, а затем он окажется в милях от моей цели в Новой Зеландии.

JS:

// initialize the map on the "map" div with a given center and zoom
var mymap = L.map('mapContainer').setView([40.9006, 174.8860], 5);

var Esri_WorldGrayCanvas = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
    maxZoom: 18
}).addTo(mymap);

var marker = L.marker([41.2784, 174.7767]).addTo(mymap)
.bindPopup('The Beehive Wellington, house of Parliament')

HTML:

    <link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/leaflet.css" integrity = "sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ= = " crossorigin = ""/>
    <!--CSS STYLE SHEET REFERENCE-->
    <link rel = "stylesheet" href = "ass

<!--SCRIPTS-->
    <script src = "https://code.jquery.com/jquery-3.4.1.min.js" integrity = "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo = " crossorigin = "anonymous"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous"></script>
    <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>
    <script src = "https://unpkg.com/[email protected]/dist/leaflet.js" integrity = "sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og= = " crossorigin = ""></script>
    <script type = "text/javascript" src = "https://cdn.emailjs.com/sdk/2.3.2/email.min.js"></script>
    <script type = "text/javascript">
        (function() {
        emailjs.init("user_6IJi6iUGTMBKBwowkfsSh");
        })();
    </script>
    <script src = "assets/js/sendEmail.js"></script>
    <script type = "text/javascript" src = "assets/js/script.js"></script>

<!--START OF MAP-->
        <div class = "mymap col-lg-8 col-md-12 col-sm-12">
            <!--START OF DROPDOWN-->
            <div class = "search-options">
                <div class = "dropdown">
                    <select class = "select-box">
                        <option>North Island</option>
                        <option>South Island</option>
                    </select>
                </div>
                <div class = "radio-buttons">
                    <form>
                        <input class = "radio" type = "radio" name = "option" value = "track" checked> Track<br>
                        <input class = "radio" type = "radio" name = "option" value = "Hut"> Hut<br>
                        <input class = "radio" type = "radio" name = "option" value = "Campsite"> Campsite<br>
                    </form>
                </div>
            </div>
            <!--END OF DROPDOWN-->
            <!--START OF LEAFLET MAP-->
            <div id = "mapContainer"></div>
            <!--END OF LEAFLET MAP-->
        </div>  

Я ожидал увидеть карту Новой Зеландии саму по себе, когда страница отобразится, и маркер Веллингтона внизу Северного острова. Когда он визуализируется, он настолько увеличен, что я ничего не вижу, и мне приходится уменьшать масштаб, но тогда это далеко не Новая Зеландия, а маркер Веллингтона находится на вершине Тихого океана.