[GIS] Display GeoJSON on Leaflet web map with GeoDjango

geodjangogeojsonleaflet

I have to display my geometry data in my Leaflet based web map and I use GeoDjango to display it, I have loaded GeoJSON data and front map but I can't put my geometry data on my web map.

How can we solve it?

views.py:

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 jobs


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

def job_details(request):
    job=serialize('geojson',jobs.objects.all())
    return HttpResponse(job,content_type='json')

urls.py:

from django.conf.urls import include,url
from .views import hompage,job_details


urlpatterns=[
    url(r'^$',hompage.as_view(),name='home'),
    url(r'^work/$',job_details,name='works'),
    ]

Template.html:

<!DOCTYPE html>
<html>
{% load static %}
{% load leaflet_tags %}
<head>
{%leaflet_js%}
{%leaflet_css%}
    <title>HARISOHMNAATH</title>
    <style type="text/css">
        #gis{widht:80%;height:700px;}
</style>
<script type="text/javascript" src={% static 'dist/leaflet.ajax.js'%}>
</script>
<body>
<h1>harisohmnaath</h2>
<br>
<script type="text/javascript">
      function out_layers(map,options){
          var datasets = new L.GeoJSON.AJAX("{% url 'works' %}",{
           onEachFeature:function(feature, layer){
                 layer.bindPopup(feature.properties.name.toString());
}
});
          datasets.addTo(map);
}
</script>
{%leaflet_map "gis" callback="window.our_layers" %}

</body>
</html>

Best Answer

I struggled for awhile with your approach until I discovered these two packages: django-leaflet and django-geojson.

It's maintained and the docs and demos are great.

Related Question