TechQA.

How to extract a geometry from PostGIS using a view and then add it to a leaflet map in a template using Django

5.3k views Asked by At

I want to extract polygon geometry data from a PostGIS database using python within a view and add it to my leaflet map within a template. The easiest way seemed to be to extract the data and convert it to GeoJSON using the postgis function ST_AsGeoJSON in my Django view and then render it to the template as context within the L.geoJSON(GEOJSON).addTo(map) function.

This does not work. On requesting the map page, the map is now blank and as it seems the GeoJSON is not recognised. I have been able to pass a hard-coded polygon from a view and add it to a map but the geometry data in my postgis database simply isn't valid.

Here is a view with a hardcoded polygon that is successfully printed on the map:

from django.shortcuts import render

def map_view(request, *args, **kwargs):
    geo_json={
        "type": "FeatureCollection",
          "features": [
            {
              "type": "Feature",
              "properties": {},
              "geometry": {
                "type": "Polygon",
                "coordinates": [
                  [
                    [
                      -0.10746002197265625,
                      51.505537109466715
                    ],
                    [
                      -0.11466979980468751,
                      51.498377681772325
                    ],
                    [
                      -0.0968170166015625,
                      51.493568479510415
                    ],
                    [
                      -0.09080886840820312,
                      51.502438390761164
                    ],
                    [
                      -0.10746002197265625,
                      51.505537109466715
                    ]
                  ]
                ]
              }
            }
          ]
        }

    return render(request ,'map.html', {'geo_json': geo_json})

The map template looks as follows:

<!DOCTYPE html>
<html>
<head>
    <title>Map Page</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <style>
        #map {  position: relative;
                width: 600px;
                height: 775px;
                border: 3px solid #000000;}
    </style>    
</head>
<body>
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([54.8,-4.45],6);

        L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=9GKOA9jJ3jCIWFUd8k00', {attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',}).addTo(map);

        L.geoJSON({{ geo_json | safe }}).addTo(map);

    </script>

</body>
</html>

Here is the leaflet map with the polygon added

Now when I try to get pass GeoJSON from my postgis database using my new view it doesn't work:

import psycopg2
from django.shortcuts import render

def map_view(request, *args, **kwargs):

    connection = psycopg2.connect(database="electio5_geekdata",user="electio5_blake", password="dummypassword", host='localhost')
    cursor = connection.cursor()
    cursor.execute("select st_AsGeoJSON(shape) from boris_constituency limit 1")
    varpoly=cursor.fetchall()

    geo_json={
        "type": "FeatureCollection",
          "features": [
            {
              "type": "Feature",
              "properties": {},
              "geometry": varpoly
            }
          ]
        }

    return render(request ,'map.html', {'geo_json': geo_json})

I notice that the format of the GeoJSON is slightly different when I output it:-

IS FINE

{'type': 'FeatureCollection', 'features': [{'type': 'Feature', 'properties': {}, 'geometry': {'type': 'Polygon', 'coordinates' and so on and so on

IS A PROBLEM

{'type': 'FeatureCollection', 'features': [{'type': 'Feature', 'properties': {}, 'geometry': [('{"type":"MultiPolygon","coordinates" and so on and so on

The problematic GeoJSON has extra brackets and a quote preceding the second "type" key

So my question is:-

1/ Is it possible to reformat the problematic GeoJSON? I had difficulty stripping out the unwanted characters which wrap the list

2/ Or can I extract just the co-ordinates and pass those to the relevant part of geo_json?

3/ Or any way at all I can extract the polygon data from postgis and add it to the leaftlet map

btw you may wonder why I'm using a cursor rather than using the Django model object which has a GeoJSON method. This approach gave me a GDAL error due to the libraries not being properly configured and is a problem for another day!

Big thanks for your attention to this.

Phil #anoobintrouble

django geometry leaflet postgis geojson
Original Q&A
2

There are 2 answers

1
blake On BEST ANSWER

I was given the answer by "cabesuon" as you will see in the comments above. But I'll consolidate everything to hopefully help future users. Here is a way you can extract geometry (polygon) data from a PostGIS database and then render it to a template and add it to a leaflet map using the Django web framework.

The view below extracts the data, converts it to GeoJSON and then returns it to the map.html template:-

from django.shortcuts import render
import json
import psycopg2

def map_view(request, *args, **kwargs):

    connection = psycopg2.connect(database="electio5_geekdata",user="electio5_blake", password="adummypassword", host='localhost')
    cursor = connection.cursor()
    cursor.execute("select name, st_AsGeoJSON(shape) from boris_constituency limit 1")

    varcons=cursor.fetchone()

    geo_json={
              "type": "Feature",
              "name": varcons[0],
              "properties": {},
              "geometry": json.loads(varcons[1])
            }

    return render(request ,'map.html', {'geo_json': geo_json})

The map template below picks up the geo_json context and adds it to the leaflet map, plotting the polygon geometry (which in this case is the UK parliamentary constituency of "Aldershot"):-

<!DOCTYPE html>
<html>
<head>
    <title>Map Page</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <style>
        #map {  position: relative;
                width: 600px;
                height: 775px;
                border: 3px solid #000000;}
    </style>    
</head>
<body>
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([54.8,-4.45],6);

        L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=9GKOA9jJ3jCIWFUd8k00', {attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',}).addTo(map);

        L.geoJSON({{ geo_json | safe }}).addTo(map);

    </script>

    {{ geo_json }}

</body>
</html>

here is the geometry plotted on the map

A couple of notes:-

1/ I have used pure python to access the database. I really should be using GeoDjango , calling the geometry like so:-

from boris.models import constituency
obj=constituency.objects.get(id=1)
geo_json=obj.shape.geojson

but got a GDAL_ERROR 1: b'PROJ: proj_create_from_database: Cannot find proj.db'

I believe the GDAL library isn't configured properly - I may try and fix this

2/ I now intend to make this application interactive, letting the user select constituencies, regions or finding their constituency based on their location and returning as much interesting information as I can.

Feel free to comment, correct and add anything useful.

Phil #anoobinneed

1
Francis Odero On

1.model created

from django.db import models
from django.contrib.gis.db import models

# Create your models here.

class Locate(models.Model):
    name=models.CharField(max_length=200)
    location =models.PointField(srid=4326)

2.create a geojson in views tobe dispalyed

from django.shortcuts import render
from django.views.generic import TemplateView
from django.core.serializers import serialize
from django.http import HttpResponse
from .models import Locate

# Create your views here.

class HomePageView(TemplateView):
    template_name='index.html'

# county views

def locate_datasets(request):
    locate=serialize('geojson',Locate.objects.all())
    return HttpResponse(locate,content_type='application/json')

3.create a url in your app/urls.py

from django.conf.urls import url from djgeojson.views import GeoJSONLayerView from .views import HomePageView,locate_datasets

#create your urls here


urlpatterns=[
    url(r'^$',HomePageView.as_view(),name='home'),
    url(r'^locate_data/$',locate_datasets,name='locate'),

]

4.template

using geojson ajax to load our data

<!DOCTYPE html>
<html lang="en">

{% load static %}
{% load leaflet_tags %}

<head>

    {% leaflet_js %}
    {% leaflet_css %}
</head>


<body>

<script>
 function our_layers(map,options){

 var locate = new L.GeoJSON.AJAX("{% url 'locate' %}",{}).addTo(map);

</script>

 {% leaflet_map "map" callback="window.our_layers" %}

</body>
 <script src="{% static 'leaflet.ajax.js' %}"></script>
</html>

Hope this solves your problem

Related Questions in DJANGO

Related Questions in GEOMETRY

Related Questions in LEAFLET

Related Questions in POSTGIS

Related Questions in GEOJSON

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions