Django assigning model FloatField coordinate points to marker coordinates using Mapbox

Question

For my project I have a model that had two FloatFields called lat and lng for coordinate value which I would like to display on an interactive map. Just starting with Django and API’s so still very new to a lot of this.

animal = models.CharField(max_length=32, choices=ANIMALS, default=BISON)
image = models.ImageField(upload_to='images', null=True, blank=True)
description = models.TextField(null=True, blank=True)
lat = models.FloatField(blank=True, null=True)
lng = models.FloatField(blank=True, null=True)

def __str__(self):
    return self.animal

I am not sure how to access these values from my views page so that I am able to use them as {{ Django variables }} within my html template.

My views:

def homePage(request):
    if request.method == 'POST':
        form = PostForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
    else:
        form = PostForm()

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

I want to use a {% for n in posts %} {% endfor %} loop to loop through all the posts in my database add new markers the the map via:

var marker = new mapboxgl.Marker()
            .setLngLat([-110.5885, 44.4280])
            .addTo(map);

However, these .setLngLat([-110.5885, 44.4280]) values need to be the ones specified from the posts.

Asked By: Floris Kruger

||

Source

Answer 1

I was able to figure out how to access these float values in order to use them in an html template for the user to see. First I needed to add the following line to my views.py: pst = Post.objects.all()

def homePage(request):
if request.method == 'POST':
    form = PostForm(request.POST, request.FILES)
    if form.is_valid():
        form.save()
else:
    form = PostForm()

pst = Post.objects.all() #this line right here

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

With this I was able to access any of my Post Model field variables on the html template for all of the Post items in my database. I did this using a {% for loop %} for p in pst.

{% for p in pst %}
        var pop = new mapboxgl.Popup({offset: [0, -15]})
            .setHTML(
                        `<div">
                            <div>
                                <h2>{{ p.animal }}</h2>
                                <h3>image</h3>
                                <img src="{{ p.image_url }}" style="width: 190px"/>
                                <h3>description</h3>
                                <p>{{ p.description }}</p>
                            </div>
                        </div>`
                        )

        var marker = new mapboxgl.Marker({draggable: true})
            .setLngLat([{{ p.lng }}, {{ p.lat }}])
            .setPopup(pop)
            .addTo(map);
        {% endfor %}

This does give me red lines (warnings?) under my for loop brackets and also under {{p.lng}} and {{p.lat}} in some places but everything still works just fine.

Answered By: Floris Kruger

Django assigning model FloatField coordinate points to marker coordinates using Mapbox

Question:

Answers: