Mapbox Добавление маркера по умолчанию на веб-карту - django

context. Используя Add a default marker to a web map, я хочу добавить несколько точек в качестве маркеров. В файле views.py в разделе 'marker format' я использую формат маркера

const marker6 = new mapboxgl.Marker() .setLngLat([12.554729, 55.70651]) .addTo(map);

как шаблон для каждой итерации цикла.

Problem
. Тег p с идентификатором 'test' приводит к следующему результату

const marker0 = new mapboxgl.Marker().setLngLat([-2.97,53.43890841]).addTo(map);

const marker1 = new mapboxgl.Marker().setLngLat([-2.29,53.46303566]).addTo(map);

Однако использование того же кода "{{context.vf|join:"
"}}", который выдает выше, который имеет тот же формат, что и рабочие маркеры, не приводит к появлению маркеров.

Спросите
. Возможно ли сделать это более эффективным способом?

Views.py

from django.shortcuts import render
from django.views.generic import TemplateView
import requests
from datetime import date
from datetime import timedelta

from .models import Regions



class HomePageView(TemplateView):
    # template_name = 'home.html'
    def get(self,request):

        # current date is start date
        start_date = date.today()
        # end date
        end_date = start_date #+ timedelta(days=3)

        # footbal api
        url = "http://api.football-data.org/v2/matches"
        querystring = {"dateFrom": start_date, "dateTo": end_date}
        headers = {'X-Auth-Token': "", }
        response = requests.request(
            "GET", url, headers=headers, params=querystring).json()

        #### extract data
        # count of returned fixtures
        count = response['count']
        # count of premier league games
        plist = []
        for i in range(0, count):
            if response['matches'][i]['competition']['name'] == 'Premier League':
                plist.append(response['matches'][i]['homeTeam']['name'])
        pcount = len(plist)

        # data from response
        premierleague = []
        for i in range(0, count):
            comp = response['matches'][i]['competition']['name']
            if comp == 'Premier League':
                home = response['matches'][i]['homeTeam']['name']
                away = response['matches'][i]['awayTeam']['name']
                Lat = Regions.objects.values_list('Lat', flat=True).filter(API_team=home)[0]
                Long = Regions.objects.values_list('Long', flat=True).filter(API_team=home)[0]
                premierleague.append({
                                    'Lat': Lat,
                                    'Long': Long,
                                    })


        # marker format
        vf=[]
        for i in range(len(premierleague)):
            for q,w in premierleague:
                pa = f"const {'marker' + str(i)} = new mapboxgl.Marker().setLngLat([{premierleague[i]['Long']}, {premierleague[i]['Lat']}]).addTo(map);"
        
            vf.append(pa)


        context = {
            'vf': vf,
                    }

        return render(request, 'home.html', {'context': context})

Шаблон

{% extends 'base.html' %} 

{% block content %}


<!-- test marker format -->
<p id=test>
  {{context.vf|join:"<br>"}}
</p>

<div id='map' style='width: container; height: 500px;'></div>

 
<div class="map-overlay">
<fieldset>
<input id="feature-filter" type="text" placeholder="Filter results by name">
</fieldset>
<div id="feature-listing" class="listing"></div>
</div>
 
<script>
    mapboxgl.accessToken = '';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-2, 53.3],
zoom: 4
});


// Create a default Marker and add it to the map.
   const marker6 = new mapboxgl.Marker()
    .setLngLat([12.554729, 55.70651])
    .addTo(map);
 
// Create a default Marker, colored black, rotated 45 degrees.
   const marker2 = new mapboxgl.Marker({ color: 'black', rotation: 45 })
     .setLngLat([12.65147, 55.608166])
     .addTo(map);

// this marker does not work {{context.vf|join:"<br>"}}
</script>

{% endblock %}

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