Add a kml file to Django

Using Django Templates & Frontend
1

I have a map in my app and im trying to ‘paint’ some territories with kml files. I can get the outlined version if i hardcode the absolute path but since i have a kml file in each instance of the model im trying to do it with a for loop with a field.kml.path (kml being the Filefield in my model) as per django instructions but it doesnt work . Any idea how to fix that ?
view

def map(request):
    field_list = models.Field.objects.all()
    context = {
        "title": "Map",
        "field_list": field_list,
    }
    template = 'agriculture/map.html'
    return render(request, template, context)

My original map.html

var polygon = omnivore.kml("{% static '../media/kml/Arnissa_cherry.kml' %}", null, new L.GeoJSON(null, { //file url
    style: function() {
        return {
            color: 'red',
            transparent: true,
            opacity: 1,
            fillOpacity: 0.05
        } }
}));

New version that doesnt work

{% for field in field_list %}
    $(".search_area").append(new Option("{{field.friendly_name}}")); //friendly name 
   
var polygon = omnivore.kml("{% static '{{field.kml.path}}' %}", null, new L.GeoJSON(null, { //file url
    style: function() {
        return {
            color: 'red',
            transparent: true,
            opacity: 1,
            fillOpacity: 0.05
        }
    }
}));
{% endfor %}
2

It appears to me that you might be mixing up what’s happening in two different locations.

Your Django template tags execute on the server, while the JavaScript executes in the browser.

What you probably want to do first is take a really careful look at the HTML / JavaScript that was rendered in the template in your browser’s developer tools.

Also, it’s generally not a good idea to have your template render JavaScript code directly. When you want your JavaScript to process information rendered by a Django template, the safest way to do this is by using the json_script tag. You can render your data in the template, and then have your JavaScript use that data however necessary.

In this case, you could use that tag to turn field_list into the list of file names that the JavaScript needs to access, and then iterate over that list within your JavaScript code.

3

The thing is I need to access the path to where that kml file lies so i can use that to retrieve the file.How do i do that with json_script .My django template tag for the new Option works fine so I assumed the field.kml.path would work the same way as well.

4

The json_script tag gives you a script tag containing a variable that you can access from your JS code.

Appearing to “works fine”, and actually working securely and reliably are sometimes two different things.

5

I tried doing it with json_script as you said like this :

{field_list|json_script:"fields"}}
const value = JSON.parse(document.getElementById('fields').textContent);
for (field i=0;i<fields.length;i++){
    $(".search_area").append(new Option("{{field.friendly_name}}")); //friendly name 
  
var polygon = omnivore.kml("field.kml.path", null, new L.GeoJSON(null, { //file url
    style: function() {
        return {
            color: 'red',
            transparent: true,
            opacity: 1,
            fillOpacity: 0.05
        }
    }
}));
}

but obviously Im doing something wrong since Im getting error after error changing my code bit by bit. So is there a simpler- from the original post- way to access the kml.path right?

6

I’m assuming a copy/paste error, but you’re missing an opening brace ({) here.

If that’s not the problem, look at the rendered template - verify by visually inspect the html being sent to the browser to ensure you’re getting what you think you’re sending.

No, that’s why the json_script tag exists. It’s always a potential issue to directly render JS code in your template. There are just too many ways that things can go wrong…