Render Geojson object to django templates and display it in a map.
741 views
Skip to first unread message
jenelyn refamonte
Mar 5, 2014, 1:24:35 AM3/5/14
to geod...@googlegroups.com
hi everyone, do you have an idea how to achieve rendering geojson object to the django templates (like index.html) and display it in a map,?? . I am using django-leaflet library, so my basemap is an openstreetmap.
I already convert my polygons stored in a postgis database to geojson object,. I just converted a single polygon and here is the geojson code of this polygon.
{
"crs": null,
"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
779734.2109438615, 989559.9281161543
],
[
779732.9813480034, 989544.5388196829
],
[
779732.335844744, 989544.119402064
],
[
779731.5943902703, 989543.9667496774
],
[
779716.3425077881, 989544.3043183808
],
[
779715.0241633449, 989560.676719971
],
[
779734.2109438615, 989559.9281161543
]
]
]
]
},
"type": "Feature",
"id": 1,
"properties": {"NewPin": "162-01-0001-002-30"}
}
]
}
This is the functions of my views.py named def display() that encode the geometry into geojson object.
def display(request):
boundary_detail = Butuan_City.objects.filter(id=1)
dif = Django.Django(geodjango = 'geometry', properties=['NewPin'])
geoj = GeoJSON.GeoJSON()
s = geoj.encode(dif.decode(boundary_detail))
return render_to_response('index.html', {'places': s})
This is the index.html that render and display the converted geojson object as text.
<html>
{% load leaflet_tags %}
<head>
{% leaflet_js plugins="ALL" %}
{% leaflet_css plugins="ALL" %}
{% leaflet_js %}
{% leaflet_css %}
</head>
<style>
.leaflet-container { /* all maps */
width: 50%;
height: 50%;
}
#specialbigmap {
height: 800px;
}
</style>
<body>
<script type="text/javascript">
window.addEventListener("map:init", function (e) {
var detail = e.detail;
L.marker([50.5, 30.5]).addTo(detail.map);
}, false);
</script>
{% leaflet_map "map" callback="window.map_init_basic" %}
</br>
</br>
<h4>{{ places }}</h4>
</body>
</html>
This is the output:
Now, i want the circled geojson code will be then converted as polygon and overlay it to the openstreetmap,. Is anyone knows how to do it??? Thanks in advance.
Max Demars
Mar 7, 2014, 9:07:12 AM3/7/14
to geod...@googlegroups.com
Hi!
I am not familiar with Leaflet but there is probably a geojson reader in the api.
So you have to pass your geojson from your view to your template
#in your view:
def geojsonRenderer(request):
features = MyFeatures.objects.all().geojson()
render_to_response("my_template.html", {'geojson':features}, context_instance=RequestContext(request))
you can get your geojson just by calling it like this: {{ geojson }}
then you have to refer to Leaflet API documentation to find how to create the geojson renderer in javascript
-Max Demars
I am not familiar with Leaflet but there is probably a geojson reader in the api.
So you have to pass your geojson from your view to your template
#in your view:
def geojsonRenderer(request):
features = MyFeatures.objects.all().geojson()
render_to_response("my_template.html", {'geojson':features}, context_instance=RequestContext(request))
you can get your geojson just by calling it like this: {{ geojson }}
then you have to refer to Leaflet API documentation to find how to create the geojson renderer in javascript
-Max Demars
jenelyn refamonte
Mar 9, 2014, 10:02:41 PM3/9/14
to geod...@googlegroups.com
hello Max,. thanks very much,. I got it.. I already displayed my polygon to the openstreetmap :)
Reply all
Reply to author
Forward
0 new messages