Prettify map pin popups. Closes #18.
This commit is contained in:
parent
ee440617d9
commit
9ab6366d37
@ -5,116 +5,159 @@
|
|||||||
{% load static %}
|
{% load static %}
|
||||||
|
|
||||||
{% block stylesheets %}
|
{% block stylesheets %}
|
||||||
{{ block.super }}
|
{{ block.super }}
|
||||||
{% leaflet_css %}
|
{% leaflet_css %}
|
||||||
<style>
|
<style>
|
||||||
html, body, #main {
|
html, body, #main {
|
||||||
width: 100; height:100%;
|
width: 100;
|
||||||
}
|
height: 100%;
|
||||||
.leaflet-popup-content > a{
|
}
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
|
.leaflet-popup-content > a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-head h5 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-head p {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-labels {
|
||||||
|
margin: 10px auto 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-labels .label {
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% block title %}{% trans "Ojuso Platform Map" %}{% endblock %}
|
{% block title %}{% trans "Ojuso Platform Map" %}{% endblock %}
|
||||||
|
|
||||||
|
|
||||||
{% block inner_content %}
|
{% block inner_content %}
|
||||||
<div id="main"></div>
|
<div id="main"></div>
|
||||||
<div id="modals"></div>
|
<div id="modals"></div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|
||||||
{% block scripts %}
|
{% block scripts %}
|
||||||
{% leaflet_map "main" callback="main_app_init" creatediv=False %}
|
{% leaflet_map "main" callback="main_app_init" creatediv=False %}
|
||||||
{% leaflet_js %}
|
{% leaflet_js %}
|
||||||
<script type="text/javascript" src="{% static 'map/plugins/leaflet-hash.js' %}"></script>
|
<script type="text/javascript" src="{% static 'map/plugins/leaflet-hash.js' %}"></script>
|
||||||
<script type="text/javascript">
|
<script>
|
||||||
|
|
||||||
// This takes HTML as a string and returns an element
|
function getLabelClass(pos_or_neg) {
|
||||||
function create(htmlStr) {
|
if (pos_or_neg == "N") {
|
||||||
var frag = document.createDocumentFragment(),
|
return "danger";
|
||||||
temp = document.createElement('div');
|
} else {
|
||||||
temp.innerHTML = htmlStr;
|
return "success";
|
||||||
while (temp.firstChild) {
|
}
|
||||||
frag.appendChild(temp.firstChild);
|
}
|
||||||
}
|
|
||||||
return frag;
|
|
||||||
}
|
|
||||||
|
|
||||||
// This is called when the map is initialized
|
function popup(feature, layer) {
|
||||||
function main_app_init(map, options) {
|
layer.bindPopup(
|
||||||
var hash = new L.hash(map);
|
"<img src='"+feature.properties.image+"' width='100%'>"+
|
||||||
// Pull data as GeoJSON and add to map with a modal
|
"<div class='popup-head'>"+
|
||||||
$.getJSON('/api/case-studies/', function (data) {
|
"<h5>"+feature.properties.entry_name+"</h5>" +
|
||||||
L.geoJson(data, {
|
"<i>"+feature.properties.country_name+"</i>"+
|
||||||
onEachFeature: function (feature, layer) {
|
"</div>"+
|
||||||
var modalname = "case-study-"+feature.id
|
"<div class='popup-labels'>"+
|
||||||
layer.bindPopup(
|
"<span class='label label-default'>"+feature.properties.sector_of_economy+"</span> "+
|
||||||
"<p>"+feature.properties.entry_name+"</p>"+
|
"<span class='label label-"+getLabelClass(feature.properties.positive_or_negative)+"'>"+ feature.properties.positive_or_negative_display+"</span>"+
|
||||||
"<a class='btn btn-primary' href='case-study/"+feature.properties.slug+"' role='button'>"
|
"</div>"+
|
||||||
+"{% trans "View" %}"+"</a>"
|
"<a class='btn btn-sm btn-primary' href='case-study/"+feature.properties.slug+"'>{% trans "View full case study" %}</a>"
|
||||||
);
|
);
|
||||||
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-->
|
// This is called when the map is initialized
|
||||||
<!--map.on('click', function(e) {-->
|
function main_app_init(map, options) {
|
||||||
<!--var popup = L.popup()-->
|
var hash = new L.hash(map);
|
||||||
<!--.setLatLng(e.latlng)-->
|
|
||||||
<!--.setContent("<a class='btn btn-primary btn-sm' href='{% url 'create' %}?lat="+e.latlng.lat+"&lng="+e.latlng.lng+"' role='button'>{% trans "Submit a Case Study" %}</a>")-->
|
// Pull data as GeoJSON and add to map with a modal
|
||||||
<!--.openOn(map);-->
|
$.getJSON('/api/case-studies/', function(data) {
|
||||||
<!--});-->
|
L.geoJson(data, {
|
||||||
}
|
onEachFeature: popup
|
||||||
</script>
|
}).addTo(map)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
<script type="text/comment">
|
||||||
|
|
||||||
|
// removed from <script> section above
|
||||||
|
// This takes HTML as a string and returns an element
|
||||||
|
function create(htmlStr) {
|
||||||
|
var frag = document.createDocumentFragment();
|
||||||
|
var temp = document.createElement('div');
|
||||||
|
|
||||||
|
temp.innerHTML = htmlStr;
|
||||||
|
while (temp.firstChild) {
|
||||||
|
frag.appendChild(temp.firstChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
return frag;
|
||||||
|
}
|
||||||
|
|
||||||
|
var modalname = "case-study-" + feature.id
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
// 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='{% url 'create' %}?lat="+e.latlng.lat+"&lng="+e.latlng.lng+"' role='button'>{% trans "Submit a Case Study" %}</a>")
|
||||||
|
// .openOn(map);
|
||||||
|
// });
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -34,10 +34,24 @@ class UserViewSet(viewsets.ModelViewSet):
|
|||||||
|
|
||||||
|
|
||||||
class CaseStudySerializer(gis_serializers.GeoFeatureModelSerializer):
|
class CaseStudySerializer(gis_serializers.GeoFeatureModelSerializer):
|
||||||
|
sector_of_economy = serializers.CharField(source='get_sector_of_economy_display')
|
||||||
|
country_name = serializers.CharField(source='get_country_display')
|
||||||
|
positive_or_negative_display = serializers.CharField(source='get_positive_or_negative_display')
|
||||||
|
|
||||||
class Meta:
|
class Meta:
|
||||||
model = CaseStudy
|
model = CaseStudy
|
||||||
geo_field = "location"
|
geo_field = "location"
|
||||||
fields = '__all__'
|
fields = (
|
||||||
|
'country',
|
||||||
|
'country_name',
|
||||||
|
'entry_name',
|
||||||
|
'image',
|
||||||
|
'location',
|
||||||
|
'positive_or_negative',
|
||||||
|
'positive_or_negative_display',
|
||||||
|
'sector_of_economy',
|
||||||
|
'slug'
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
class CaseStudyViewSet(viewsets.ModelViewSet):
|
class CaseStudyViewSet(viewsets.ModelViewSet):
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user