og

[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 1ea6508..04d3e80 100644 (file)
--- a/src/references/templates/references/map.html
+++ b/src/references/templates/references/map.html
@@ -1,65 +1,60 @@
 {% extends "2022/base.html" %}
-
+{% load static %}
 {% load l10n %}
 
-{% 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=="
-          crossorigin=""></script>
-
-  <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-popup-books {
-       display: flex;
-       flex-wrap: wrap;
-       gap: 5px;
-   }
-   .l-popup-books img {
-       display: block;
-   }
-  </style>
+{% block global-content %}
+
+  <div id="references-map"></div>
+
 {% endblock %}
 
-{% block global-content %}
 
-  <div id="map" style="height: calc(100vh - 68px"></div>
+{% 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('map').setView([51.505, -0.09], 8);
+   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(
-           '/pinezki/popup/' + m.target.options.mid,
+           '/mapa/popup/' + m.target.options.mid,
            function(data) {
-               d = $(data);
-               n = Math.min(3, ($('a', d).length));
-               w = 111 * n - 5;
-               let p = L.popup({minWidth: w}).setLatLng(m.latlng).setContent(data);
+               let p = L.popup({minWidth: 340}).setLatLng(m.latlng).setContent(data);
                map.openPopup(p);
            }
        );
    }
 
-
    {% localize off %}
    {% for e in entities %}
    L.marker(
@@ -71,9 +66,13 @@
        }
    ).on('click', showMarker).addTo(markers);
    {% endfor %}
- {% endlocalize %}
+   {% endlocalize %}
 
    map.addLayer(markers);
 
   </script>
 {% endblock %}
+
+
+{% block footer %}
+{% endblock %}