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?


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):

def job_details(request):
    return HttpResponse(job,content_type='json')


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



<!DOCTYPE html>
{% load static %}
{% load leaflet_tags %}
    <style type="text/css">
<script type="text/javascript" src={% static 'dist/leaflet.ajax.js'%}>
<script type="text/javascript">
      function out_layers(map,options){
          var datasets = new L.GeoJSON.AJAX("{% url 'works' %}",{
           onEachFeature:function(feature, layer){
{%leaflet_map "gis" callback="window.our_layers" %}

  • Please paste above any errors seen on the developer tools console. Try replacing content_type='json' with content_type='application/json'. What do you get when browsing to /work? – Udi Dec 30 '17 at 20:08
  • I'm getting my geojson data when i use and getting my leaflet map when but I cant overlap both both the data – harisohmnaath Dec 31 '17 at 13:56
  • Did you fix the content type? – Udi Dec 31 '17 at 14:59

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.

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.


I have a solution. You can load the geojson files using jquery. for this you have to add jquery in your program; i.e.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

And replace your code by:

$.getJSON("{% url 'work' %}", function(data){
   var geojson = L.geoJson(data, {
   onEachFeature: function(feature, layer) {
       layer.bindPopup('pop-up content');

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.