From 3276983123b2b6c99285d2a10820255f433deec8 Mon Sep 17 00:00:00 2001
From: Radek Czajka <rczajka@rczajka.pl>
Date: Sat, 10 Jun 2023 20:34:06 +0200
Subject: [PATCH] map

---
 src/references/templates/references/map.html  | 94 +++++++++++++------
 .../templates/references/popup.html           | 11 +++
 src/references/urls.py                        |  1 +
 src/references/views.py                       | 13 ++-
 4 files changed, 88 insertions(+), 31 deletions(-)
 create mode 100644 src/references/templates/references/popup.html

diff --git a/src/references/templates/references/map.html b/src/references/templates/references/map.html
index 620483712..e97ccbfb7 100644
--- a/src/references/templates/references/map.html
+++ b/src/references/templates/references/map.html
@@ -1,35 +1,71 @@
+{% extends "2022/base.html" %}
+
 {% load l10n %}
 
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
-   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
-       crossorigin=""/>
+{% block extrahead %}
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+        crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
-   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+          integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
           crossorigin=""></script>
 
-<div id="map" style="height: 100%"></div>
-<script>
-  var map = L.map('map').setView([51.505, -0.09], 8);
-  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-  }).addTo(map);
-
- {% localize off %}
- {% for e in entities %}
- L.marker(
-     [{{ e.lat }}, {{ e.lon }}],
-     {
-         title: "{{ e.label }}",
-         alt: "{{ e.label }}",
-     }
- ).bindPopup("\
-<h1>{{ e.label }}</h1>\
-{% for ref in e.reference_set.all %}\
-<a href='/katalog/lektura/{{ ref.book.slug }}.html#{{ ref.first_section }}'>\
-  {{ ref.book.title }}\
-</a>\
-{% endfor %}\
- ").addTo(map);
- {% endfor %}
+  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">
+  <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
+  <style>
+    .leaflet-popup-content h2 {
+        margin-top: 0;
+        padding-top: 0;
+        border: 0;
+    }
+   .l-books {
+       width: 100px;
+   }
+  </style>
+{% endblock %}
+
+{% block global-content %}
+
+  <div id="map" style="height: calc(100vh - 68px"></div>
+
+{% endblock %}
+
+
+{% block extrabody %}
+  <script>
+   var map = L.map('map').setView([51.505, -0.09], 8);
+   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+   }).addTo(map);
+   var markers = L.markerClusterGroup();
+
+
+   function showMarker(m) {
+       $.get(
+           '/pinezki/popup/' + m.target.options.mid,
+           function(data) {
+               let p = L.popup({minWidth: 106}).setLatLng(m.latlng).setContent(data);
+               map.openPopup(p);
+           }
+       );
+   }
+
+
+   {% localize off %}
+   {% for e in entities %}
+   L.marker(
+       [{{ e.lat }}, {{ e.lon }}],
+       {
+           title: "{{ e.label }}",
+           alt: "{{ e.label }}",
+           mid: {{ e.pk }},
+       }
+   ).on('click', showMarker).addTo(markers);
+   {% endfor %}
  {% endlocalize %}
-</script>
+
+   map.addLayer(markers);
+
+  </script>
+{% endblock %}
diff --git a/src/references/templates/references/popup.html b/src/references/templates/references/popup.html
new file mode 100644
index 000000000..506cb3292
--- /dev/null
+++ b/src/references/templates/references/popup.html
@@ -0,0 +1,11 @@
+{% load thumbnail %}
+<h2 class="header">{{ entity.label }}</h2>
+
+<div class="l-book_list">
+{% for ref in entity.reference_set.all %}
+  <a href='/katalog/lektura/{{ ref.book.slug }}.html#{{ ref.first_section }}' target="_blank">
+    {% thumbnail ref.book.cover_clean '150x150' as th %}
+    <img src="{{ th.url }}" alt="{{ ref.book.pretty_title }}" title="{{ ref.book.pretty_title }}">
+    {% endthumbnail %}
+  </a>
+{% endfor %}
diff --git a/src/references/urls.py b/src/references/urls.py
index 5bd2a62cc..bc6c10499 100644
--- a/src/references/urls.py
+++ b/src/references/urls.py
@@ -4,4 +4,5 @@ from . import views
 
 urlpatterns = [
     path('mapa/', views.map),
+    path('popup/<int:pk>', views.popup),
 ]
diff --git a/src/references/views.py b/src/references/views.py
index b98d181f1..773a37d1c 100644
--- a/src/references/views.py
+++ b/src/references/views.py
@@ -1,9 +1,18 @@
-from django.shortcuts import render
+from django.views.decorators.cache import never_cache
+from django.shortcuts import render, get_object_or_404
 from . import models
 
 
 def map(request):
     return render(request, 'references/map.html', {
         'entities': models.Entity.objects.exclude(lat=None).exclude(lon=None),
+        'funding_no_show_current': True,
     })
-                  
+
+@never_cache
+def popup(request, pk):
+    e = get_object_or_404(models.Entity, pk=pk)
+    return render(request, 'references/popup.html', {
+        'entity': e,
+    })
+    
-- 
2.20.1