Django: Send agency data in a context dictionary and use it to build markers on map

I have an agency app in my project with a model in which I save company's sale agenies' data including their name and contact info and their coordinates.

My agency model:

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

Now the goal is to write a view for this model in which I'll be sending agency model data in the context dic to the front, and there, use the data to create markers for each agency side by side with a list of agencies. I have no problem writing the view, context dictionary would be something like this:

This example is for 1 agency:

{
  "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
        }
      ]
}

Now I have the following questions:

1. How can I generate markers for my map using the latitude and longitude in this dictionary?
2. Do I have to convert this dictionary into GeoJSON data in order to use it in Mapbox? If I do, how can I do this?
3. How can I track clicks on the items in the sidebar agency list and show the agency that has been clicked on automatically on the map?

P.S. This is my first non-tutorial project, so I have a lot to learn; So your answer is much appreciated if it contained step-by-step guide (just guide, not the literal code) for my problem. Thank you in advance.

Back to Top