114 lines
4.6 KiB
HTML
114 lines
4.6 KiB
HTML
{% extends "map/base_with_jumbo.html" %}
|
|
{% load bootstrap3 %}
|
|
{% load compress %}
|
|
{% load i18n %}
|
|
{% load leaflet_tags %}
|
|
|
|
|
|
{% 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 %}
|