reynir
/
bornhack-website
1
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

add map to backoffice facility list page

This commit is contained in:
Thomas Steen Rasmussen 2020-06-22 19:28:26 +02:00
parent 8a76d58211
commit ce4e7e9013
1 changed files with 33 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/backoffice/templates/facility_list_backoffice.html
View File

@ -1,10 +1,19 @@
{% extends 'base.html' %}
{% load static %}
{% load leaflet_tags %}
{% block title %}
Facilities | BackOffice | {{ block.super }}
{% endblock %}
{% block extra_head %}
{% leaflet_css %}
<script src="{% static 'js/leaflet-1.6.0.js' %}" type="text/javascript"></script>
<script src="{% static 'js/proj4.js' %}" type="text/javascript"></script>
<script src="{% static 'js/proj4leaflet.js' %}" type="text/javascript"></script>
<script src="{% static 'js/leaflet-color-markers.js' %}" type="text/javascript"></script>
{% endblock extra_head %}
{% block content %}
<div class="panel panel-default">
<div class="panel-heading">
@ -47,6 +56,30 @@ Facilities | BackOffice | {{ block.super }}
</tr>
{% endfor %}
</table>
<p>
<div id="map" class="map"></div>
</div>
</div>
<script type="text/javascript">
function MapReadyCallback() {
// loop over facilities and add a marker for each,
// include a popup in the marker
var markers = new Array();
{% for facility in facility_list %}
{% url "backoffice:facility_detail" camp_slug=facility.camp.slug facility_uuid=facility.uuid as detail %}
marker = L.marker([{{ facility.location.y }}, {{ facility.location.x }}], {icon: {{ facility.facility_type.marker }}}).bindPopup("<b>{{ facility.name }}</b><br><p>{{ facility.description }}</p><p>Responsible team: {{ facility.facility_type.responsible_team.name }} Team</p>{% if request.user.is_authenticated %}<p><a href='{{ detail }}' class='btn btn-primary' style='color: white;'><i class='fas fa-search'></i> Details</a></p>{% endif %}").addTo(this);
markers.push(marker.getLatLng());
{% endfor %}
var markerBounds = L.latLngBounds(markers);
// fitBounds appears to not respect maxZoom from the tilelayer,
// leading to the "Error: Attempted to load an infinite number of tiles" mess,
// so hardcode maxZoom to 13 here
this.fitBounds(markerBounds, {maxZoom: 13});
};
</script>
<script src="{% static 'js/kfmap.js' %}" type="text/javascript"></script>
{% endblock %}