Interactions avec la carte

This commit is contained in:
Jean-Marie Favreau 2024-07-06 16:40:48 +02:00
parent 4db0db9ec3
commit 533d52a24e
2 changed files with 13 additions and 7 deletions

View File

@ -866,3 +866,8 @@ table .buttons {
#filters #id_city { #filters #id_city {
columns: 4; columns: 4;
} }
.vertical-max {
height: 100vh;
overflow-y: scroll;
}

View File

@ -8,7 +8,6 @@
{% block entete_header %} {% block entete_header %}
{% css_categories %} {% css_categories %}
<script src="/static/admin/js/vendor/jquery/jquery.js"></script> <script src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script src="/static/admin/js/jquery.init.js"></script>
<script src="{% static 'location_field/leaflet/leaflet.js' %}"></script> <script src="{% static 'location_field/leaflet/leaflet.js' %}"></script>
<link href="{% static 'location_field/leaflet/leaflet.css' %}" type="text/css" media="all" rel="stylesheet"> <link href="{% static 'location_field/leaflet/leaflet.css' %}" type="text/css" media="all" rel="stylesheet">
{% endblock %} {% endblock %}
@ -16,8 +15,6 @@
{% block fluid %}{% endblock %} {% block fluid %}{% endblock %}
{% block content %} {% block content %}
<article>{% include "agenda_culturel/static_content.html" with name="places" url_path="/places" %}</article>
<article> <article>
@ -33,10 +30,10 @@
<div id="map_location" style="width: 100%; aspect-ratio: 16/16"></div> <div id="map_location" style="width: 100%; aspect-ratio: 16/16"></div>
<div> <div class="vertical-max">
{% if object_list %} {% if object_list %}
{% for place in object_list %} {% for place in object_list %}
<h3><a href="{% url 'view_place' place.pk %}">{{ place.name }}</a></h3> <h3><a href="{% url 'view_place' place.pk %}">{{ place.name }}</a><a id="open-map-{{ place.id }}" href="#map_location" data-tooltip="afficher sur la carte">{% picto_from_name "map" %}</a></h3>
<ul> <ul>
<li><strong>Adresse&nbsp;:</strong> {% if place.address %}{{ place.address }}, {% endif %}{{ place.city }}</li> <li><strong>Adresse&nbsp;:</strong> {% if place.address %}{{ place.address }}, {% endif %}{{ place.city }}</li>
<li><strong>Coordonnée GPS&nbsp;:</strong> {{ place.location }}</li> <li><strong>Coordonnée GPS&nbsp;:</strong> {{ place.location }}</li>
@ -61,13 +58,17 @@
maxZoom: 19, maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map); }).addTo(map);
var markerArray = []; markerArray = [];
window.mMapping = {};
{% if object_list %} {% if object_list %}
{% for place in object_list %} {% for place in object_list %}
markerArray.push(L.marker([{{ place.location }}]).bindPopup('<a href="{% url 'view_place' place.pk %}">{{ place.name }}</a><br />{% if place.address %}{{ place.address }}, {% endif %}{{ place.city }}')); markerArray.push(L.marker([{{ place.location }}]).bindPopup('<a href="{% url 'view_place' place.pk %}">{{ place.name }}</a><br />{% if place.address %}{{ place.address }}, {% endif %}{{ place.city }}'));
window.mMapping[{{ place.id }}] = markerArray[markerArray.length - 1];
window.jQuery('a#open-map-{{ place.id }}').click(function(){ window.mMapping[{{ place.id }}].openPopup();});
{% endfor %} {% endfor %}
{% endif %} {% endif %}
var group = L.featureGroup(markerArray).addTo(map); var group = L.featureGroup(window.markerArray).addTo(map);
map.fitBounds(group.getBounds()); map.fitBounds(group.getBounds());
</script> </script>
{% endblock %} {% endblock %}