Return GeoJson with Django

Question

I am trying to return a set of coordinates to draw points/rectangles over a map. Currently I'm using Polymaps, but I'm thinking about moving to openlayers, which has examples more clear for a javascript newbie like me.

I want to send a list of coordinates plus a certain value for each one of them. And I'm also looking for sending many lists of coordinates in the same json, each one with another certain value (time), so I can represent different points/polygons over the map for each time.

I have been able to return 3 separated lists with json, one for latitude, one for longitude and another one with the value for each point. But both openlayers and Polymaps use GeoJson at their examples, which looks like the smarter choice.

The problem is, I don't know hot to generate a geoJson response with Django. I found django-geojson, but there is not a clear example to do what I want, and of course not to return many sets for different times.

Any help? I can also accept how to do it with just Json.

What I have now:

#views.py

from django.shortcuts import render_to_response
from django.template import RequestContext
import myproject.databasework as databaseWork
import json

def values(request):
    gpsTime = 1043366400
    pls = databaseWork.getValues(gpsTime)
    latitudes = []
    longitudes = []
    values = []

    for row in pls:
        pointId = row[0]
        value = row[2]
        lat, lon = databaseWork.getCoords(pointId)
        latitudes.append(lat)
        longitudes.append(lon)
        values.append(value)

    jsonObject = {'latitudeList': json.dumps(latitudes),
                  'longitudeList': json.dumps(longitudes),
                  'valuesList': json.dumps(values)}
    return render_to_response('mytemplate.html', jsonObject, context_instance=RequestContext(request))

And this is part of the html:

<script type="text/javascript">
        var po = org.polymaps;
        var map = po.map()
            .container(document.getElementById("map").appendChild(po.svg("svg")))
            .add(po.interact())
            .center({lat: 46, lon: 10})
            .zoom(4);   

        var svg = document.querySelector("svg.map");
        svg.setAttribute("width", "100%");
        svg.setAttribute("height", "100%");
        map.resize();

        map.add(po.image()
            .url(po.url("http://{S}tile.cloudmade.com"
            + "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
            + "/20760/256/{Z}/{X}/{Y}.png")
            .hosts(["a.", "b.", "c.", ""])));



        // Get values from django response
        var latitude = "{{ latitudeList }}";
        var longitude = "{{ longitudeList }}";
        var vpl = "{{ vplList }}";

        // Draw circles
        // Don't know how to do it with Polymaps yet. Example at http://polymaps.org/ex/cluster.html

   </script>

Cabinetmaker

Does what you have not work or are you specifically asking how to get the output in GeoJson format? – Cambyses

@Cambyses If you take a look at the example at polymaps.org/ex/cluster.html they directly take all the data from the json. So, as I'm receiving it in a normal json here, I don't know how to do the trick. So I don't know if it's my fault here, or that Polymaps is specificaly designed for geoJson. And I don't know how to generate a geoJson in django. So I can accept any of those 2 solutions if I receive help – Cabinetmaker

Answer 1

First of all have a look at the geojson spec. That should make pretty clear how to design you data structure.

But there are several things wrong with your approach, basically coding errors. Look at your render_to_response method. You pass the variable jsonObject which is a dict. In your template you try to assign the variable latitudeList which in fact is a key of jsonObject.

Here is an example of how I create a geojson object to display some point geometries with leaflet (a library worth checking out for you).

lati = Vsoil.objects.values_list('latitude',flat=True)
longi = Vsoil.objects.values_list('longitude',flat=True)
ids = Vsoil.objects.values_list('id',flat=True)

geo_json = [ {"type": "Feature",
                    "properties": {
                        "id":  ident,
                        "popupContent":  "id=%s" % (ident,) 
                        },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [lon,lat] }}
                    for ident,lon,lat in zip(ids,longi,lati) ] 


return render_to_response('map.html',
                          {'geo_json': geo_json},
                          context_instance=RequestContext(request))

In your template you can simply assign your object to a js variable like this

var geojsonFeature = {{ geo_json|safe }}

Herat

What is Vsoil? I haven't been able to find any information about any python library with taht name – Cabinetmaker

It is the name of a model of mine. It is a basic database query in fact. ModelName.objects.xxx – Herat

Answer 2

The right method is to use write a serializer that returns a geofeature model.

from rest_framework_gis.serializers import GeoFeatureModelSerializer
from . models import YourModel

class YourModelSerializer(GeoFeatureModelSerializer):
    class Meta:
        model = YourModel
        fields = "__all__"
        geo_field = "point"

And then in views you can use ModelViewSet:

class YourModelViewset(viewsets.ModelViewSet):
    serializer_class = YourModelSerializer
    queryset = YourModel.objects.all()

You can refer to GeoDjango for more information

Darrendarrey