No se pueden mostrar datos geojson en un mapa de folletos en una aplicación Django

Question

Estoy desarrollando una aplicación Django usando Django-leaflet y Postgresql / PostGIS. Recupero los datos en views.py y los convierto en formato GeoJSON usando el serializador de Django. Mi views.py:

from geonode.geoloc.models import Transport
from django.template import RequestContext
from django.core.serializers import serialize
import json, ast

class LookupView(FormView):
    template_name = 'geoloc/lookupresults.html'
    form_class = LookupForm

    def get(self, request):
        return render_to_response('geoloc/lookup.html',  RequestContext(request))

    def form_valid(self, form):
        # Get data
        latitude = form.cleaned_data['latitude']
        longitude = form.cleaned_data['longitude']

        # Look up roads
        roads =  Transport.objects.all()[0:5]

        roads_json = serialize('geojson', roads,
               fields=('geom',))

        # I remove crs key because it is not recommended by http://geojsonlint.com/
        new_roads_json = json.loads(roads_json)
        new_roads_json.pop('crs', None)
        new_roads_json = json.dumps(new_roads_json)

        # Render the template
        return self.render_to_response({
                          'new_roads_json': new_roads_json
                         })

Mi plantilla cuando el formulario es válido:

{% extends "geoloc/geoloc_base.html" %}
{% block content %}
{% load leaflet_tags %}
{% leaflet_js %}
{% leaflet_css %}

<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
  var geojsonFeature = ["{{ new_roads_json }}"];
  var mymap = L.map('mapid').setView([51.505, -0.09], 13);
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(mymap);

  var myroads = L.geoJSON().addTo(mymap);
  myroads.addData(geojsonFeature);

  </script>
{% endblock %}

Y mi models.py:

from django.contrib.gis.db import models

class Transport(models.Model):
    gid = models.AutoField(primary_key=True)
    aa = models.SmallIntegerField(blank=True, null=True)
    name = models.CharField(max_length=100, blank=True, null=True)
    geom = models.MultiLineStringField(srid=2100, blank=True, null=True)
    objects = models.GeoManager()

    class Meta:
        managed = False
        db_table = 'transport'

    def __str__(self):
        return self.name

    def __unicode__(self):
        return self.name or u''

Cuando envío los datos mientras el contenido geojson es válido, no se muestra nada en el mapa del folleto. Además, no hay errores en las herramientas de desarrollo del navegador / firebug o en mi servidor de desarrollo django. Para probar si el objeto geojson que crea el serializador es válido, envié los datos como un texto con:

document.getElementById("id").innerHTML = geojsonFeature 

Ese texto geojson, que publiqué en http://geojsonlint.com/ y la geometría se mostró en el mapa sin errores.

¿Alguna sugerencia?

Answer 1

Por fin he conseguido resolver el problema. El problema venía de la siguiente línea:

var geojsonFeature = ["{{ new_roads_json }}"];

He puesto los corchetes porque sin ellos daba error de objetos no válidos. Así, pensé que era la sintaxis correcta. Finalmente, descubrí que el verdadero problema era que el sistema traducía las comillas " como ". Así que añadí el filtro 'safe' de Django. El segundo problema era que no necesita las comillas ni los corchetes. Así que convertí la línea anterior en

var geojsonFeature = {{ new_roads_json|safe }};

Y el problema resuelto. Dos enlaces muy útiles que me ayudaron a resolver el problema: https://stackoverflow.com/questions/298772/django-template-variables-and-javascript https://docs.djangoproject.com/en/1.11/ref/templates/builtins/