Django: Отправляйте данные агентства в контекстный словарь и используйте их для построения маркеров на карте

В моем проекте есть приложение агентства с моделью, в которой я сохраняю данные агентов по продаже компании, включая их имя и контактную информацию, а также их координаты.

Моя модель агентства: 

class Agency(models.Model):
    English = "En"
    Persian = "Fa"
    Arabic = "Ar"
    LANG_CHOICE = [
        (English, "English"),
        (Persian, "Persian"),
        (Arabic, "Arabic"),
    ]
    language = models.CharField(
        max_length=2,
        choices=LANG_CHOICE,
        default=Persian,
    )
    province = models.ForeignKey(
        Province,
        on_delete=models.SET_NULL,
        default=None,
        null=True,
    )
    city = models.ForeignKey(
        City,
        on_delete=models.SET_NULL,
        default=None,
        null=True,
    )
    title = models.CharField(
        max_length=100,
        blank=True,
        null=True,
    )
    owner_name = models.CharField(
        max_length=200,
        blank=True,
        null=True,
    )
    address = models.CharField(
        max_length=500,
        blank=True,
        null=True,
    )
    telephone = models.BigIntegerField(blank=True, null=True)
    mobile = models.BigIntegerField(blank=True, null=True)
    fax = models.BigIntegerField(blank=True, null=True)
    latitude = models.DecimalField(
        max_digits=9, decimal_places=6, blank=True, null=True
    )
    longitude = models.DecimalField(
        max_digits=9, decimal_places=6, blank=True, null=True
    )

    def __str__(self):
        return self.title

Теперь задача состоит в том, чтобы написать представление для этой модели, в котором я буду отправлять данные модели агентства в контекстном словаре на фронт, и там использовать эти данные для создания маркеров для каждого агентства рядом со списком агентств. У меня нет проблем с написанием представления, контекстный словарь будет выглядеть примерно так:

Этот пример для 1 агентства:

{
  "AgencyList":
      [
        {
          "id": 1,
          "language": "Fa",
          "province": 1,
          "city": 1,
          "title": "بنایی",
          "owner_name": "آقای بنایی",
          "address": "تبریز، خیابان یکم",
          "telephone": "041-33412345",
          "mobile": "09141234567",
          "fax": null,
          "latitude": "38.074370",
          "longitude": "46.257343"
        },
        {
          //other agencies
        }
      ]
}

Теперь у меня следующие вопросы:

  1. Как я могу генерировать маркеры для моей карты, используя широту и долготу в этом словаре?
  2. Нужно ли мне конвертировать этот словарь в данные GeoJSON, чтобы использовать его в Mapbox? Если да, то как я могу это сделать?
    3. Как я могу отслеживать клики по элементам списка агентств в боковой панели и автоматически показывать на карте агентство, на которое кликнули?

    4. P.S. Это мой первый проект без учебника, поэтому мне нужно многому научиться; поэтому ваш ответ будет очень признателен, если он будет содержать пошаговое руководство (только руководство, а не дословный код) для решения моей проблемы. Заранее спасибо.

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