Leaflet не отображает карту в моем приложении django

Я разрабатываю приложение на django. На одной из страниц этого приложения я хочу отобразить карту с leaflet. Я пытаюсь отобразить базовую карту в соответствии с информацией, которую я мог бы иметь на сайте leaflet, но ничего не отображается. Нет даже сообщения об ошибке в консоли.
. templatefile.html:

{% extends 'elec_meter/base.html' %}
{% load static %}
{% block title %}Geolocalisation des compteurs - Interactiv {% endblock %}
{% block titre %} Carte {% endblock %}
{% block css %}
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
       integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
       crossorigin=""/>

    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
       integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
       crossorigin="">
    </script>
    <script src="{% static 'assets/js/main.js' %}"></script>
<style>
    <link href="{% static 'assets/css/style.css' %}" rel="stylesheet" />
</style>
{% endblock %}
{% block add %}{% endblock %}

{% block content %}
    <div class="row" onload="init">
        <div id="mapid" style="height:450;">

        </div>
    </div>
{% endblock %}

Вот содержимое моего js файла, который инициализирует карту: main.js

function init(){
    const coordGabon = {
        lat: -0.803689,
        lng: 11.609444
    }
    const zoomLevel = 13;

    const mymap = L.map('mapid').setView([coordGabon.lat, coordGabon.lng],zoomLevel);

    const mainLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 19,attribution: '© OpenStreetMap'}).addTo(mymap);
}

{% block content %}
    <div class="row" onload="init">
        <div id="mapid" style="height:450;">

        </div>
    </div>
{% endblock %}

{% block content %}
    <div class="row">
        <div id="mapid" style="height:450px;"></div>
    </div>

    <script>
      // in case the document is already rendered
      if (document.readyState !== 'loading') {
        init();
      }
      // modern browsers
      else if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', init());
      }
    </script>
{% endblock %}