Update map frontend and REST API

This commit is contained in:
Livvy Mackintosh 2017-05-23 01:12:04 +02:00
parent 2bd8775a61
commit 8a7faf7593
5 changed files with 66 additions and 9 deletions

View File

@ -0,0 +1,20 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.10.7 on 2017-05-21 06:43
from __future__ import unicode_literals
from django.db import migrations
class Migration(migrations.Migration):
dependencies = [
('map', '0002_auto_20170520_0139'),
]
operations = [
migrations.RenameField(
model_name='casestudy',
old_name='geom',
new_name='location',
),
]

View File

@ -26,7 +26,7 @@ class CaseStudy(models.Model):
) )
# Location of map pin # Location of map pin
geom = models.PointField() location = models.PointField()
project_name = models.CharField(max_length=128) project_name = models.CharField(max_length=128)
supply_chain = models.CharField( supply_chain = models.CharField(

View File

@ -1,3 +1,4 @@
{% load bootstrap3 %}
{% load i18n %} {% load i18n %}
{% load leaflet_tags %} {% load leaflet_tags %}
<!DOCTYPE html> <!DOCTYPE html>
@ -5,22 +6,48 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{% trans "Ojuso Platform Map" %}</title> <title>{% trans "Ojuso Platform Map" %}</title>
<meta name="viewport" content"width=device-width, initial-scale=2">
{% bootstrap_css %}
{% leaflet_js %} {% leaflet_js %}
{% leaflet_css %} {% leaflet_css %}
<style>
html, body, #main {
width: 100%;
height:100%;
}
</style>
</head> </head>
<body> <body>
<h1>Ojuso Platform Map</h1> <h1>Ojuso Platform Map</h1>
{% leaflet_map "main" callback="main_app_init" %} {% leaflet_map "main" callback="main_app_init" %}
<div id="modals"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" <script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"> crossorigin="anonymous">
</script> </script>
{% bootstrap_javascript %}
<script type="text/javascript"> <script type="text/javascript">
function create(htmlStr) {
var frag = document.createDocumentFragment(),
temp = document.createElement('div');
temp.innerHTML = htmlStr;
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
return frag;
}
function main_app_init(map, options) { function main_app_init(map, options) {
var dataurl = '{% url "data" %}'; $.getJSON('/api/case-studies/', function (data) {
// Download GeoJSON L.geoJson(data, {
$.getJSON(dataurl, function (data) { onEachFeature: function (feature, layer) {
L.geoJson(data).addTo(map); var modalname = "case-study-"+feature.id
layer.bindPopup(
"<h3>"+feature.properties.project_name+"</h3>"+"<button type='button' class='btn btn-primary btn-block' data-toggle='modal' data-target='#"+modalname+"'>"+"<span class='glyphicon glyphicon-file' aria-hidden='true'></span>"+"View Details"+"</button>"
);
var modal = create("<div class='modal fade' id='"+modalname+"' tabindex='-1' role='dialog' aria-labelledby='"+modalname+"-label'><div class='modal-dialog' role='document'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button><h4 class='modal-title' id='"+modalname+"-label'>"+feature.properties.project_name+"</h4></div><div class='modal-body'><p>"+feature.properties.description+"</p></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button><button type='button' class='btn btn-primary'>Save changes</button></div></div></div></div>");
document.getElementById('modals').appendChild(modal);
}
}).addTo(map);
}); });
} }
</script> </script>

View File

@ -6,5 +6,7 @@ from . import views
urlpatterns = [ urlpatterns = [
url(r'^$', views.index, name='index'), url(r'^$', views.index, name='index'),
url(r'^data.geojson$', GeoJSONLayerView.as_view(model=CaseStudy), name='data') url(r'^data.geojson$',
GeoJSONLayerView.as_view(model=CaseStudy, geometry_field='location'),
name='data')
] ]

View File

@ -1,10 +1,16 @@
appdirs==1.4.3 appdirs==1.4.3
Django==1.11.1 Django==1.10.7
django-bootstrap3==8.2.3
django-cas-server==0.8.0
django-countries==4.5 django-countries==4.5
django-crispy-forms==1.6.1 django-crispy-forms==1.6.1
django-extensions==1.7.9
django-geojson==2.10.0 django-geojson==2.10.0
django-leaflet==0.22.0 django-leaflet==0.22.0
djangorestframework==3.6.3
djangorestframework-gis==0.11.2
gunicorn==19.7.1 gunicorn==19.7.1
lxml==3.7.3
olefile==0.44 olefile==0.44
packaging==16.8 packaging==16.8
Pillow==4.1.1 Pillow==4.1.1
@ -12,4 +18,6 @@ psycopg2==2.7.1
pyparsing==2.2.0 pyparsing==2.2.0
python-memcached==1.58 python-memcached==1.58
pytz==2017.2 pytz==2017.2
requests==2.14.2
requests-futures==0.9.7
six==1.10.0 six==1.10.0