5

Is it possible to add a GeoDjango PolygonField to a Leaflet map? I've tried to do that by adding the js code below to my template, but I get a TypeError: t is null instead:

<script type="text/javascript">
    function map_init(map, options) {
        // zoom to point
        map.setView([51.9923, -2.1580], 12);

        // get polygon
        var polygon = "{{ obj.geometry.geojson }}";
        var polygon = L.polygon(polygon).addTo(map);
    }
</script>

In the code above, obj is my Django object and the PolygonField is called geometry. So I thought maybe I should use the coords property instead. But the same error persisted.

I can add a polygon normally if it's hardcoded like in the official tutorial:

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);)

Edit:

Strangely enough, if I turn the tuple string of {{ obj.geometry.coords }} into a list string and then json.parse it the code works, although there's a problem with the reversed (lat, lon) since this area which is supposed to appear in the UK, now shows somewhere in the Indian Ocean near Kenya:

<script type="text/javascript">
    function map_init(map, options) {
        // parse geojson
        var polygon_str = "{{ obj.geometry.coords }}";
        polygon_str = polygon_str.replace(/\(/g, '[').replace(/\)/g, ']')
        var polygon = JSON.parse(polygon_str);

        // zoom to point
        //map.setView([51.9923, -2.1580], 12);
        map.setView([-2.1580, 51.9923], 12);

        // get polygon
        L.polygon(polygon).addTo(map);
    }
</script>
6
  • What happens if you log that object to the console, console.log("{{ obj.geometry.geojson }}" Is it an actual geojson object? – Alex Leith Feb 26 '18 at 21:11
  • No it's apparently a string, the error might be caused by that. I've tried JSON.parse() but got this error: SyntaxError: JSON.parse: expected property name or '}' at line 1 column 3 of the JSON data. I don't think there's a problem with the formatting of the geojson returned, because it displays well on the Leaflet map on the Django backend. – Hakim Feb 27 '18 at 8:46
  • 1
    Note that Leaflet uses Lon, Lat as the order, and so your object you've got there looks like it's in the wrong order. (Most things do use Lon, Lat order, as it fits the X, Y order.) – Alex Leith Feb 27 '18 at 11:43
  • When I open with a text editor the GeoJSON file, I've transferred to the PostgreSQL database table (with ogr2ogr), I see that the order is correct ([ -2.185909173008958, 52.013298980833333 ]). I'm not sure though about leaflet using the (lon, lat) order, because when I've added a marker point the order had to be (lat, lon) instead. – Hakim Feb 27 '18 at 12:09
  • 1
    Hey @hakim, looking at the docs, it seem markers and such need lat, lon for leaflet, but GeoJSON should be lon, lat. – Alex Leith Feb 27 '18 at 23:41
5

I ended up using Mapbox instead of Leaflet since the former uses the same order lonlat as GeoJSON.

On the Django-side, the object passed as a GeoJSON from the view to the template wasn't escaped, to avoid having all the quotes (") replaced with a '& amp ;' (See this question):

View:

return render(request, 'maps/detail.html', {
    'obj_json': obj.geometry.geojson
})

Template:

<script>
    // parse geojson string
    var obj_json = '{{ obj_json | safe }}';
    var polygon = JSON.parse(obj_json);
</script>
1

Can you please try it without the quotes, so:

var polygon = {{ obj.geometry.geojson }};

You may need to transform it first, like:

var polygon = {{ obj.geom.transform(4326).geojson }};

(From this answer.)

1
  • 1
    Thanks Alex, but obj.geometry.srid already returns 4326 without any transformation. I don't think the problem is on Django's side, as the error returned is a Javascript error (Leaflet-related). I would say it's because the js variable polygon is a string not an array, though it would be weird that no straightforward way is available to fix it. – Hakim Mar 1 '18 at 11:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.