add map to backoffice facility list page

src/backoffice/templates/facility_list_backoffice.html

@@ -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 %}