Update lots of things
This commit is contained in:
Livvy Mackintosh
@ -1,56 +1,113 @@
|
||||
{% extends "map/base_with_jumbo.html" %}
|
||||
{% load bootstrap3 %}
|
||||
{% load compress %}
|
||||
{% load i18n %}
|
||||
{% load leaflet_tags %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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 %}
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height:100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Ojuso Platform Map</h1>
|
||||
{% 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) {
|
||||
$.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'>×</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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ block.super }}
|
||||
{% leaflet_css %}
|
||||
<style> html, body, #main { width: 100; height:100%; } </style>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block title %}{% trans "Ojuso Platform Map" %}{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
<div id="main"></div>
|
||||
<div id="modals"></div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block scripts %}
|
||||
{% leaflet_map "main" callback="main_app_init" creatediv=False %}
|
||||
{% leaflet_js %}
|
||||
<script type="text/javascript">
|
||||
|
||||
// This takes HTML as a string and returns an element
|
||||
function create(htmlStr) {
|
||||
var frag = document.createDocumentFragment(),
|
||||
temp = document.createElement('div');
|
||||
temp.innerHTML = htmlStr;
|
||||
while (temp.firstChild) {
|
||||
frag.appendChild(temp.firstChild);
|
||||
}
|
||||
return frag;
|
||||
}
|
||||
|
||||
// This is called when the map is initialized
|
||||
function main_app_init(map, options) {
|
||||
|
||||
// Pull data as GeoJSON and add to map with a modal
|
||||
$.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+"'>"
|
||||
+"{% trans "Quick View" %}"+"</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='{% trans "Close" %}'>"+
|
||||
"<span aria-hidden='true'>×</span>"+
|
||||
"</button>"+
|
||||
"<h4 class='modal-title' id='"+modalname+"-label'>"+
|
||||
feature.properties.project_name+
|
||||
"</h4>"+
|
||||
"</div>"+
|
||||
"<div class='modal-body'>"+
|
||||
"<p>"+feature.properties.description+"</p>"+
|
||||
"<dl class='dl-horizontal'>"+
|
||||
"<dt>Supply Chain</dt><dd>"+feature.properties.supply_chain+"</dd>"+
|
||||
"<dt>Generation Type</dt><dd>"+feature.properties.generation_type+"</dd>"+
|
||||
"<dt>Associated Companies</dt><dd>"+feature.properties.associated_companies+"</dd>"+
|
||||
"<dt>Financiers</dt><dd>"+feature.properties.financiers+"</dd>"+
|
||||
"<dt>Important Lenders</dt><dd>"+feature.properties.important_lenders+"</dd>"+
|
||||
"<dt>Country</dt><dd>"+feature.properties.country+"</dd>"+
|
||||
"<dt>Affects Indigenous</dt><dd>"+feature.properties.affects_indigenous+"</dd>"+
|
||||
"<dt>Affects Indigenous Reason</dt><dd>"+feature.properties.affects_indigenous_reason+"</dd>"+
|
||||
"<dt>Proposed Start</dt><dd>"+feature.properties.proposed_start+"</dd>"+
|
||||
"<dt>Proposed Completion</dt><dd>"+feature.properties.proposed_completion+"</dd>"+
|
||||
"<dt>Link to Forum</dt><dd>"+feature.properties.link_to_forum+"</dd>"+
|
||||
"<dt>Image</dt><dd>"+feature.properties.image+"</dd>"+
|
||||
"<dt>References</dt><dd>"+feature.properties.references+"</dd>"+
|
||||
"<dt>Commodities</dt><dd>"+feature.properties.commodities+"</dd>"+
|
||||
"<dt>Like to Engage Developer</dt><dd>"+feature.properties.like_to_engage_developer+"</dd>"+
|
||||
"<dt>Like to Engage Investors</dt><dd"+feature.properties.like_to_engage_investors+"></dd>"+
|
||||
"<dt>Author</dt><dd>"+feature.properties.author+"</dd>"+
|
||||
"</dl>"+
|
||||
"</div>"+
|
||||
"<div class='modal-footer'>"+
|
||||
"<button type='button' class='btn btn-default' data-dismiss='modal'>"+
|
||||
"{% trans "Close" %}"+
|
||||
"</button>"+
|
||||
"<button type='button' class='btn btn-primary'>"+
|
||||
"{% trans "Save changes" %}"+
|
||||
"</button>"+
|
||||
"</div>"+
|
||||
"</div>"+
|
||||
"</div>"+
|
||||
"</div>"
|
||||
);
|
||||
document.getElementById('modals').appendChild(modal);
|
||||
}
|
||||
}).addTo(map);
|
||||
});
|
||||
|
||||
// Add an on-click listener for map click events. Show popup with button to submit a casestudy
|
||||
map.on('click', function(e) {
|
||||
var popup = L.popup()
|
||||
.setLatLng(e.latlng)
|
||||
.setContent("<a class='btn btn-primary btn-sm' href='case-study/add?lat="+e.latlng.lat+"&lng="+e.latlng.lng+"' role='button'>{% trans "Submit a Case Study" %}</a>")
|
||||
.openOn(map);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user