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
geom = models.PointField()
location = models.PointField()
project_name = models.CharField(max_length=128)
supply_chain = models.CharField(

View File

@ -1,3 +1,4 @@
{% load bootstrap3 %}
{% load i18n %}
{% load leaflet_tags %}
<!DOCTYPE html>
@ -5,22 +6,48 @@
<head>
<meta charset="UTF-8">
<title>{% trans "Ojuso Platform Map" %}</title>
<meta name="viewport" content"width=device-width, initial-scale=2">
{% bootstrap_css %}
{% leaflet_js %}
{% leaflet_css %}
{% leaflet_css %}
<style>
html, body, #main {
width: 100%;
height:100%;
}
</style>
</head>
<body>
<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"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
{% bootstrap_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) {
var dataurl = '{% url "data" %}';
// Download GeoJSON
$.getJSON(dataurl, function (data) {
L.geoJson(data).addTo(map);
$.getJSON('/api/case-studies/', function (data) {
L.geoJson(data, {
onEachFeature: function (feature, layer) {
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>

View File

@ -6,5 +6,7 @@ from . import views
urlpatterns = [
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
Django==1.11.1
Django==1.10.7
django-bootstrap3==8.2.3
django-cas-server==0.8.0
django-countries==4.5
django-crispy-forms==1.6.1
django-extensions==1.7.9
django-geojson==2.10.0
django-leaflet==0.22.0
djangorestframework==3.6.3
djangorestframework-gis==0.11.2
gunicorn==19.7.1
lxml==3.7.3
olefile==0.44
packaging==16.8
Pillow==4.1.1
@ -12,4 +18,6 @@ psycopg2==2.7.1
pyparsing==2.2.0
python-memcached==1.58
pytz==2017.2
requests==2.14.2
requests-futures==0.9.7
six==1.10.0