3c6fadcf70
* add maps app, add proxy view for kortforsyningen services, add static_src/js/kfmap.js to create leaflet maps with tiles from kortforsyningen, adjust facility views to use the new map, add marker field to FacilityType model to specify marker colour, add js and marker pngs for coloured markers * remove debug print Co-authored-by: Thomas Steen Rasmussen <tykling@bornhack.org>
72 lines
3.4 KiB
HTML
72 lines
3.4 KiB
HTML
{% extends 'program_base.html' %}
|
|
{% load leaflet_tags %}
|
|
{% load static %}
|
|
|
|
{% 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 title %}
|
|
Facilities of type {{ facilitytype }} | {{ block.super }}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Facilities of type {{ facilitytype }}</h3>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="list-group">
|
|
{% for facility in facility_list %}
|
|
{% if request.user.is_authenticated %}
|
|
<a href="{% url 'facilities:facility_detail' camp_slug=camp.slug facility_type_slug=facility.facility_type.slug facility_uuid=facility.uuid %}" class="list-group-item">
|
|
{% else %}
|
|
<div class="list-group-item">
|
|
{% endif %}
|
|
<h4 class="list-group-item-heading">
|
|
<i class="{{ facility.facility_type.icon }} fa-2x fa-pull-left fa-fw"></i> {{ facility.name }}
|
|
<img class="pull-right" src="{% static 'img/leaflet/marker-icon-'|add:facility.facility_type.marker|slice:"-4"|add:'.png' %}">
|
|
</h4>
|
|
<p class="list-group-item-text">{{ facility.description }}</p>
|
|
<p class="list-group-item-text"><i>Location: Lat {{ facility.location.y }} Long {{ facility.location.x }}</i></p>
|
|
{% if request.user.is_authenticated %}
|
|
</a>
|
|
{% else %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
<p>
|
|
<div id="map" class="map"></div>
|
|
</div>
|
|
<a href="{% url "facilities:facility_type_list" camp_slug=camp.slug %}" class="btn btn-primary"><i class="fas fa-list"></i> Back to facility type list</a>
|
|
</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 "facilities:facility_detail" camp_slug=facility.camp.slug facility_type_slug=facility.facility_type.slug facility_uuid=facility.uuid as detail %}
|
|
{% url "facilities:facility_feedback" camp_slug=facility.camp.slug facility_type_slug=facility.facility_type.slug facility_uuid=facility.uuid as feedback %}
|
|
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><a href='{{ feedback }}' class='btn btn-primary' style='color: white;'><i class='fas fa-comment-dots'></i> Feedback</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 %}
|
|
|