Как отобразить карту gis_models в django templates?

Question

[Артём]

Не подгружается карта, висит просто голубая рамка.

models.py:

ADDRESS_WIDGETS = {
    # ...
    'point': gis_forms.OSMWidget(attrs={'map_width': 800, 'map_height': 500}),
}
srid = 4326

class Address(UUIDMixin, models.Model):
    city = models.ForeignKey(...)
    street = models.CharField(...)
    house_number = models.CharField(...)
    entrance_number = models.SmallIntegerField(...)
    floor = models.SmallIntegerField(...)
    flat_number = models.SmallIntegerField(...)
    point = gismodels.PointField(
        _('address geopoint'),
        srid=srid,
    )
    tours = models.ManyToManyField(...)

    class Meta:
        # db_table, verbose_name, unique_together

forms.py:

class SettingsAddressForm(forms.ModelForm):
    def __init__(self, request: HttpRequest = None, *args, **kwargs) -> None:
        super(SettingsAddressForm, self).__init__(*args, **kwargs)
        if request and isinstance(request, HttpRequest):
            user = Account.objects.get(account=request.user.id)
            self.fields['city'].initial = user.agency.address.city
            self.fields['street'].initial = user.agency.address.street
            self.fields['house_number'].initial = user.agency.address.house_number
            self.fields['entrance_number'].initial = user.agency.address.entrance_number
            self.fields['floor'].initial = user.agency.address.floor
            self.fields['flat_number'].initial = user.agency.address.flat_number
            self.fields['point'].initial = user.agency.address.point
            

    class Meta:
        model = Address
        fields = ['city', 'street', 'house_number', 'entrance_number', 'floor', 'flat_number', 'point']
        widgets = ADDRESS_WIDGETS

views.py:

def settings(request: HttpRequest) -> HttpResponse:
    request_user = request.user
    user = Account.objects.get(account=request_user.id)
    address_form = SettingsAddressForm(request)

    # ...

    return render(
        request,
        'pages/settings.html',
        {
            'request_user': request_user,
            'user': user,
            'address_form': address_form,
            'style_files': [
                'css/header.css',
                'css/body.css',
                'css/tours.css',
                'css/profile.css',
            ],
        },
    )

pages/settings.html:

{% extends 'base.html' %}
{% load static %}
{% block content %}
    <section class="home">
        <div class="container">
            {% if user.account.is_active %}
                <div class="left">
                    <!-- ... -->
                    {% if user.agency %}
                        <div class="agency_info">
                            <h3>Турагенство</h3>
                            <form method="post">
                                {% csrf_token %}
                                {{ agency_form.as_p }}
                                <!-- ↓↓↓ here ↓↓↓ -->
                                {{ address_form.as_p }}
                                <button name="agency_submit" type="submit">Save</button>
                            </form>
                        </div>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js"></script>
    <script src="http://openlayers.org/en/v3.11.2/build/ol.js"></script>
    <script src="{% static 'gis/js/OLMapWidget.js' %}"></script>
    <script>
        var base_layer = new ol.layer.Tile({source: new ol.source.OSM()});
            var options = {
                base_layer: base_layer,
                geom_name: 'Point',
                id: 'id_point',
                map_id: 'id_point_map',
                map_srid: 3857,
                name: 'point'
            };
            
        options['default_lon'] = 5;
        options['default_lat'] = 47;
        options['default_zoom'] = 12;
    
        var geodjango_point = new MapWidget(options);
    </script>
{% endblock %}

Но я получаю ошибку `Uncaught ReferenceError: ol is not defined at settings/:190:18`

setting:190:

var base_layer = new ol.layer.Tile({source: new ol.source.OSM()});

Почему ol не объявлен?

Как мне все таки отобразить карту для поля gis_models.PointField()?

Я пробовал:

Использовать leaflet:

widgets = {'point': LeafletWidget()}

# settings.py
INSTALLED_APPS = [
    # ...
    'django.contrib.gis',
    'leaflet',
    'djgeojson',
    # ...
]

LEAFLET_CONFIG = {
    'DEFAULT_CENTER': (55.751244, 37.618423),
    'DEFAULT_ZOOM': 10,
    'MIN_ZOOM': 3,
    'MAX_ZOOM': 18,
    'SCALE': 'both',
    'ATTRIBUTION_PREFIX': 'Powered by Django Leaflet',
}

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

Но тогда карта переставала корректно отображаться даже в админ-панели.

import:

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>

<script src="https://cdn.jsdelivr.net/npm/ol@6.14.1/dist/ol.js"></script>

Но результат остался тем же.