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 dispalyed 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?