1aadfc4c294a26e306467e42a3408ae8ae0a3e39
[wolnelektury.git] / src / references / templates / references / map.html
1 {% extends "2022/base.html" %}
2
3 {% load l10n %}
4
5 {% block extrahead %}
6   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
7         integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
8         crossorigin=""/>
9   <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
10           integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
11           crossorigin=""></script>
12
13   <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css">
14   <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">
15   <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
16   <style>
17    .leaflet-popup-content h2 {
18        margin-top: 0;
19        padding-top: 0;
20        border: 0;
21    }
22    .l-popup-books {
23        display: flex;
24        flex-wrap: wrap;
25        width: 100px;
26        gap: 5px;
27    }
28    .l-popup-books img {
29        display: block;
30    }
31   </style>
32 {% endblock %}
33
34 {% block global-content %}
35
36   <div id="map" style="height: calc(100vh - 68px"></div>
37
38 {% endblock %}
39
40
41 {% block extrabody %}
42   <script>
43    var map = L.map('map').setView([51.505, -0.09], 8);
44    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
45        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
46    }).addTo(map);
47    var markers = L.markerClusterGroup();
48
49
50    function showMarker(m) {
51        $.get(
52            '/pinezki/popup/' + m.target.options.mid,
53            function(data) {
54                d = $(data);
55                n = Math.min(3, ($('a', d).length));
56                w = 111 * n - 5;
57                let p = L.popup({minWidth: w}).setLatLng(m.latlng).setContent(data);
58                map.openPopup(p);
59            }
60        );
61    }
62
63
64    {% localize off %}
65    {% for e in entities %}
66    L.marker(
67        [{{ e.lat }}, {{ e.lon }}],
68        {
69            title: "{{ e.label }}",
70            alt: "{{ e.label }}",
71            mid: {{ e.pk }},
72        }
73    ).on('click', showMarker).addTo(markers);
74    {% endfor %}
75  {% endlocalize %}
76
77    map.addLayer(markers);
78
79   </script>
80 {% endblock %}