4

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?

  • 1
    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 Sep 29 '16 at 7:54
0

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 | |
  • I'm not sure how this answers the question, why does using OSM tiles help with the issue of displaying GeoJSON? – nmtoken Oct 25 '19 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 Oct 29 '19 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 Oct 29 '19 at 10:14

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.