ИНТЕРАКТИВНАЯ КАРТА DJANGO

Интерактивная карта веб-приложения на Django может быть очень полезным модулем для отображения географических данных. С помощью Django-leaflet мы можем легко создать интерактивную карту с пользовательскими маркерами и другими элементами управления. Кроме того, фреймворк Django GeoJSON позволяет работать с геоданными в формате GeoJSON, что упрощает их хранение и обработку.

Для создания карты нам понадобится установить несколько дополнительных пакетов, используя pip:

pip install django-leaflet
pip install django-geojson

Для примера создадим модель Place, имеющую название, географические координаты и описание:

class Place(models.Model):
 name = models.CharField(max_length=200)
 location = models.PointField()
 description = models.TextField()

Затем, мы можем создать представление, чтобы отображать все объекты Place на карте:

from django.views.generic import TemplateView
from django.views.generic.detail import DetailView
from django.contrib.gis.geos import Point
from django.contrib.gis.db.models.functions import Distance
from .models import Place

class PlaceListView(TemplateView):
 template_name = 'map.html'

 def get_context_data(self, **kwargs):
  context = super().get_context_data(**kwargs)

  places = Place.objects.all()
  context['places'] = places

  return context

Наконец, создадим шаблон HTML с использованием Django-leaflet:

<{% extends "base.html" %}>

<{% block content %}>

 <div id="mapid" style="height: 400px;"></div>

 <script type="text/javascript">
  var map = L.map('mapid').setView([45.5231, -122.6765], 13);
  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmF0aGFuZ2VudCIsImEiOiJja3Foczl5bjAwMW9tMzFseWFza2x4Y3MzIn0.pk9bUVJrDymnZ6KdE1QwNg', {
   maxZoom: 18,
   attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
   '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
   "Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>",
   id: 'mapbox/streets-v11',
   accessToken: 'your.mapbox.access.token'
  }).addTo(map);

  {% for place in places %}
  var marker = L.marker([{{ place.location.y }}, {{ place.location.x }}]).addTo(map);
  marker.bindPopup("<b>{{ place.name }}</b><br>{{ place.description }}");
  {% endfor %}
 </script>

<{% endblock %}>