Объединение Mapbox, Django и Javascript для создания маркеров карты

Question

У меня есть модель django под названием PicData.Он содержит имя файла JPEG, дату, когда была сделана фотография, а также широту и долготу, где она была сделана.У меня есть файл JPEG, хранящийся в статическом файле / файл изображения.Будет добавляться периодически.Я использую Mapbox, чтобы создать карту с маркером, который использует координаты модели, и файл jpg в качестве фонового изображения.Я не уверен, как комбинировать Django с Mapbox.

Я использую Django 2.2.У меня карта работает, когда координаты и фоновое изображение жестко запрограммированы.Когда я пытаюсь создать цикл по записям модели, я получаю сообщение об ошибке: Незакрытый тег в строке 62: «для».Ищу одно из: empty, endfor.

Я провел исследование Mapbox, Javascript и Django, но ничего не ответил на мой точный вопрос.Я новичок в Django, поэтому заранее прошу прощения, если это слишком просто.

models.py
from django.db import models

class PicData(models.Model):
    FileName = models.CharField(max_length=200)
    DateTaken = models.DateField()
    Lat = models.FloatField()
    Long = models.FloatField()

Соответствующая часть index.html

{% for pic in PicData %}
var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [{{pic.long}}, {{pic.lat}}]
    },
    properties: {
      title: {{pic.FileName}},
      description: {{pic.DateTaken}}
    }
    .marker {
background-image: url("{% static "NatureMapper/images/{{pic.FileName}}" %}");
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}