polishing map fixes

[wolnelektury.git] / src / references / templates / references / map.html

diff --git a/src/references/templates/references/map.html b/src/references/templates/references/map.html
index 6204837..b182b9c 100644 (file)
--- a/src/references/templates/references/map.html
+++ b/src/references/templates/references/map.html
@@ -1,35 +1,81 @@
+{% extends "2022/base.html" %}
+{% load cache %}
+{% load static %}
 {% load l10n %}
 
-<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=="
-          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 %}
- {% endlocalize %}
-</script>
+{% block global-content %}
+
+  <div id="references-map"></div>
+
+{% endblock %}
+
+
+{% block extrahead %}
+  <link rel="stylesheet" type="text/css" media="all" href="{% static 'contrib/leaflet-1.9.4/leaflet.css' %}">
+  <link rel="stylesheet" type="text/css" media="all" href="{% static 'contrib/leaflet.markercluster-1.4.1/MarkerCluster.css' %}">
+  <link rel="stylesheet" type="text/css" media="all" href="{% static 'contrib/leaflet.markercluster-1.4.1/MarkerCluster.Default.css' %}">
+  <meta property="og:title" content="Wakacje z Wolnymi Lekturami">
+  <meta property="og:image" content="{% static 'references/preview.png' %}">
+  <meta property="og:image:alt" content="Mapa miejsc w książkach na Wolnych Lekturach">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+
+{% endblock %}
+
+
+{% block extrabody %}
+  <script src="{% static 'contrib/leaflet-1.9.4/leaflet.js' %}"></script>
+  <script src="{% static 'contrib/leaflet.markercluster-1.4.1/leaflet.markercluster.js' %}"></script>
+  <script>
+   var map = L.map('references-map').setView([52, 20], 7);
+   L.Icon.Default.imagePath='{{ STATIC_URL }}contrib/leaflet-1.9.4/images/'
+
+   if (navigator.geolocation) {
+       navigator.geolocation.getCurrentPosition(function(position) {
+           map.setView(
+               [position.coords.latitude, position.coords.longitude], 8,
+               {
+                   animate: true,
+               }
+           );
+       });
+   }
+
+   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(
+           '/mapa/popup/' + m.target.options.mid,
+           function(data) {
+               let p = L.popup({minWidth: 340}).setLatLng(m.latlng).setContent(data);
+               map.openPopup(p);
+           }
+       );
+   }
+
+   {% cache 60 references-map %}
+   {% 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 %}
+   {% endcache %}
+
+   map.addLayer(markers);
+
+  </script>
+{% endblock %}
+
+
+{% block footer %}
+{% endblock %}