add map to backoffice facility list page
This commit is contained in:
parent
8a76d58211
commit
ce4e7e9013
|
@ -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 %}
|
||||
|
|
Loading…
Reference in a new issue