5

I want to display GeoJSON data on map in geodjango.

When I use the below code only GeoJSON data like:

{
  "type": "FeatureCollection",
  "features": [{
        "type": "Feature",
        "properties": {
          "model": "pft.pft"
        },
        "id": 1,
        "geometry": {
          "type": "Point",
          "coordinates": [76.996944, 31.58]
        }
      }, {
        "type": "Feature",
        "properties": {
          "model": "pft.pft"
        },
        "id": 2,
        "geometry": {
          "type": "Point",
          "coordinates": [76.670778, 31.487083]
        }
      }, {
        "type": "Feature",
        "properties": {
          "model": "pft.pft"
        },
        "id": 3,
        "geometry": {
          "type": "Point",
          "coordinates": [77.253, 30.651722]
        }
      },

is getting displayed on my webpage, but I want to display it on map.

template/map.html

{% load leaflet_tags %}
<html>
<head>
    {% leaflet_js %}
    {% leaflet_css %}
    <!--  <script src="OpenLayers.js" type="text/javascript"></script> -->

<style>
header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;     
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:503px;
    width:240px;
    float:left;
    padding:5px;          
}
section {
    width:579px;
    float:left;
    padding:10px;   
    height:494px;
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;         
}
</style>
</head>
    <body>
    {% leaflet_map "main" callback="main_map_init" %}
    <header>
    <h2>Plant Functional Types</h2>
    </header>
<nav>
<a href="{% url 'geojson_provinces'%}"><button type="button" onclick=>Actual plant functional type</button> 
<button type="button" >Potential plant functional type</button>
<button type="button" > Plant functional types likely to change</button>
<a href="{% url 'add_multiple_accounts' %}"><button type="button" > Upload species data</button></a>
</nav>

<div id="map" class="map" style="width:1080px; height:512px;float:right;" ></div>
<script type="text/javascript">
     function main_map_init (map, options) {

    var dataurl = '{% url "data" %}';
    // Download GeoJSON via Ajax
    $.getJSON(dataurl, function (data) {
        // Add GeoJSON layer
        L.geoJson(data).addTo(map);
    });

}

</script>
<footer>
</footer>
       </body>
</html>

views.py

def geojson_provinces(request):
    conn = psycopg2.connect(dbname="geodjango",host='localhost',user='postgres', password='postgres', port=5433)
    dict_cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
    cur=conn.cursor()
    res = dict_cur.execute("SELECT ST_AsGeoJson(geom) AS json FROM pft_pft LIMIT 10;")

    points=dict_cur.fetchall()
    print (points)
    json_res  = []
    for row in points:
        json_obj  = row['json']
        print (json_obj)
        json_res.append(json_obj)
        print(json_res)
    #json = simplejson.dumps(data)

    dict_cur.close()
    data = {'geojson':  mark_safe(json_res)}
    return render(request, 'map.html', data)

urls.py

 url(r'^data/$', GeoJSONLayerView.as_view(model=PFT), name='data'),

models.py

class PFT(models.Model):
    species=models.CharField(max_length=50)
    # GeoDjango-specific: a geometry field (MultiPolygonField)
    geom = models.PointField(srid=4326)
    objects=models.GeoManager()
    # Returns the string representation of the model.
    def __str__(self):              # __unicode__ on Python 2
        return '%s %s %s' % (self.species, self.geom.x, self.geom.y)

How to solve this?

Improve this question
2
  • 3
    How to solve what? You have lots of code here, but you haven't got any real explanation of the issues you are encountering, are you getting errors, what are they? When you say you the geoJSON is getting displayed on my webpage, but I want to display it on map. what do you mean? A screen shot would help.
    – nmtoken
    Commented Sep 29, 2016 at 7:54
  • check out this link gis.stackexchange.com/questions/325217/…
    – Francis Odero
    Commented Apr 25, 2021 at 15:03

3 Answers 3

Reset to default
1

change your Views.py file in your app

#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 County

# Create your views here.

class HomePageView(TemplateView):
    template_name='index.html'  #the template name in template folder


#state dataset

def state_datasets(request):
    state=serialize('geojson',State.objects.all()) #converts the shapefile loaded to geojson
    return HttpResponse(state,content_type='application/json')

#beat dataset


def beat_datasets(request):
    beat=serialize('geojson',Beat.objects.all()) #converts the shapefile loaded to geojson
    return HttpResponse(beat,content_type='application/json')

Add the following to your urls.py file

#urls.py

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




urlpatterns=[
    url(r'^$',HomePageView.as_view(),name='home'),
    url(r'^state_data/$',state_datasets,name='state') #state url
    url(r'^beat_data/$',beat_datasets,name='beat') #the url beat
]

Make sure you add this line below in your setting at the template:

'DIRS': [os.path.join(BASE_DIR,'templates')],

Then create a templates folder with index.html file:

#index.html

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

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

<head>

    {% leaflet_js %}
    {% leaflet_css %}
   
    <title>map</title>
  
<style>
    #gis{
        width:76%;
        height:550px;
    }
</style>

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

</head>

<body>
          <script>
                function our_layers(map,options){

                    // adding open street map

                    var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}{y}{x}.png');
                    // loading state geojson

                    var state = new L.GeoJSON.AJAX("{% url 'state' %}",{

                    });
                    state.addTo(map);

                     var beat = new L.GeoJSON.AJAX("{% url 'beat' %}",{

                    });
                    beat.addTo(map);


                }
        </script>

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

</body>
</html>

Make sure you have leaflet ajax plugin ,django-leaflet (pip install django-leaflet)

Improve this answer
-1

In template/map.html add the below code instead of the code you have. The below code draws the GeoJSON data on OSM map tiles with are free to use.

var map = L.map('map').setView([0,0], 1);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
{maxZoom: 20 }).addTo(map);
function main_map_init (map, options) {

var dataurl = '{% url "data" %}';
// Download GeoJSON via Ajax
$.getJSON(dataurl, function (data) {
    // Add GeoJSON layer
    L.geoJson(data).addTo(map);
});
Improve this answer
3
  • I'm not sure how this answers the question, why does using OSM tiles help with the issue of displaying GeoJSON?
    – nmtoken
    Commented Oct 25, 2019 at 8:57
  • I think you have to read it again. He has said "GeoJSON is getting displayed on my webpage, but I want to display it on map". I guess this answers that.
    – Harivignesh
    Commented Oct 29, 2019 at 5:24
  • Not really, the GeoJSON by itself can be the map, and the OP already has the code you have for showing GeoJSON. My reading of the question is that there's an issue with the dataurl, or literal GeoJSON is being shown, not GeoJSON rendered as a map.
    – nmtoken
    Commented Oct 29, 2019 at 10:14
-2

Loading multiple shapefiles in GeoDjango? here is a link I did in loading geojson data from your created models.

Improve this answer
7
  • 3
    Please don't add the link of an existing answer as an answer. Or add some details.
    – Kadir Şahbaz
    Commented Apr 25, 2021 at 15:29
  • the link to direct the member to an already answered question rather than redoing all codes and it is already
    – Francis Odero
    Commented Apr 26, 2021 at 15:46
  • still an answer is an answer
    – Francis Odero
    Commented Apr 26, 2021 at 15:46
  • On the contrary, it makes sense to write a similar answer here instead of adding the link as an answer. Links to other answers should be added as a comment, not answer.
    – Kadir Şahbaz
    Commented Apr 26, 2021 at 16:10
  • Thanks noted,next time it will be done job
    – Francis Odero
    Commented Apr 26, 2021 at 18:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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