Привязанные таблицы данных для карт листовок в django

Я хочу связать карту листания с таблицей данных according с помощью django. Я только что погуглил и не уверен, что использовал правильные слова. В конце я хочу взаимодействовать в первой попытке, так что:

1. щелчок на элементе таблицы данных увеличивает масштаб до элемента карты листа и
2. границы отображаемых объектов на картах - фильтрует таблицу данных

Для отображения характеристик на карте я использую geojson. Какова наилучшая практика для этого случая использования?

мой обработчик map.js

const attribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
const map = L.map('map', {
    center: [52.39886, 13.06566],
    zoom: 10
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: attribution }).addTo(map);
const markers = JSON.parse(document.getElementById('markers-data').textContent);
let feature = L.geoJSON(markers, {
    onEachFeature: function (feature, layer) {

        if(feature.properties.kategorie == 1){
            layer.setStyle({color :'black'});
        } else {

        }

        layer.bindPopup('<strong>Parkname: </strong>'+layer.feature.properties.name.toString() +
        '<br /> <strong>Kategorie: </strong>' + layer.feature.properties.kategorie.toString());

    }
}).addTo(map)

my views.py

from django.shortcuts import render
import json
import logging
from django.views.generic.base import TemplateView
from django.core.serializers import serialize
from .models import NotusProjekte
from django.db.models import Q

logger = logging.getLogger(__name__)


class MarkersMapView(TemplateView):
    """Markers map view."""

    template_name = "map.html"

    def get_context_data(self, **kwargs):
        """Return the view context data."""
        query = NotusProjekte.objects.using('spatial').filter(Q(kategorie=1) | Q(kategorie=2))
        context = super().get_context_data(**kwargs)
        context["markers"] = json.loads(serialize("geojson", query))
        logger.debug(context["markers"])
        return context

Вернуться на верх