autonomic-cooperative/ojuso-map
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prettify map pin popups. Closes #18.

Browse Source
This commit is contained in:
Anna Sidwell 2018-03-31 22:12:06 +11:00
parent ee440617d9
commit 9ab6366d37
2 changed files with 158 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
apps/map/templates/map/index.html
View File

@ -5,59 +5,106 @@
{% load static %}
{% block stylesheets %}
{{ block.super }}
{% leaflet_css %}
<style>
html, body, #main {
width: 100; height:100%;
}
.leaflet-popup-content > a{
{{ block.super }}
{% leaflet_css %}
<style>
html, body, #main {
width: 100;
height: 100%;
}
.leaflet-popup-content > a {
color: #fff;
}
</style>
}
.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 inner_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" src="{% static 'map/plugins/leaflet-hash.js' %}"></script>
<script type="text/javascript">
{% leaflet_map "main" callback="main_app_init" creatediv=False %}
{% leaflet_js %}
<script type="text/javascript" src="{% static 'map/plugins/leaflet-hash.js' %}"></script>
<script>
function getLabelClass(pos_or_neg) {
if (pos_or_neg == "N") {
return "danger";
} else {
return "success";
}
}
function popup(feature, layer) {
layer.bindPopup(
"<img src='"+feature.properties.image+"' width='100%'>"+
"<div class='popup-head'>"+
"<h5>"+feature.properties.entry_name+"</h5>" +
"<i>"+feature.properties.country_name+"</i>"+
"</div>"+
"<div class='popup-labels'>"+
"<span class='label label-default'>"+feature.properties.sector_of_economy+"</span> "+
"<span class='label label-"+getLabelClass(feature.properties.positive_or_negative)+"'>"+ feature.properties.positive_or_negative_display+"</span>"+
"</div>"+
"<a class='btn btn-sm btn-primary' href='case-study/"+feature.properties.slug+"'>{% trans "View full case study" %}</a>"
);
};
// This is called when the map is initialized
function main_app_init(map, options) {
var hash = new L.hash(map);
// Pull data as GeoJSON and add to map with a modal
$.getJSON('/api/case-studies/', function(data) {
L.geoJson(data, {
onEachFeature: popup
}).addTo(map)
});
}
</script>
{% 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');
// 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) {
var hash = new L.hash(map);
// 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(
"<p>"+feature.properties.entry_name+"</p>"+
"<a class='btn btn-primary' href='case-study/"+feature.properties.slug+"' role='button'>"
+"{% trans "View" %}"+"</a>"
);
var modal = create(
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'>"+
@ -102,19 +149,15 @@
"</div>"+
"</div>"+
"</div>"
);
document.getElementById('modals').appendChild(modal);
}
}).addTo(map);
});
);
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>
{% endblock %}
// 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>

16
ojusomap/urls.py
View File

@ -34,10 +34,24 @@ class UserViewSet(viewsets.ModelViewSet):
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:
model = CaseStudy
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):