f21b70b8b788a9ed4225fd9eb50605471d9010ff
[wolnelektury.git] / src / references / templates / references / map.html
1 {% extends "2022/base.html" %}
2 {% load cache %}
3 {% load static %}
4 {% load l10n %}
5
6 {% block global-content %}
7
8   <div id="references-map"></div>
9
10 {% endblock %}
11
12
13 {% block extrahead %}
14   <link rel="stylesheet" type="text/css" media="all" href="{% static 'contrib/leaflet-1.9.4/leaflet.css' %}">
15   <link rel="stylesheet" type="text/css" media="all" href="{% static 'contrib/leaflet.markercluster-1.4.1/MarkerCluster.css' %}">
16   <link rel="stylesheet" type="text/css" media="all" href="{% static 'contrib/leaflet.markercluster-1.4.1/MarkerCluster.Default.css' %}">
17   <meta property="og:type" content="website">
18   <meta property="og:title" content="Wakacje z Wolnymi Lekturami">
19   <meta property="og:image" content="{% static 'references/preview.png' %}">
20   <meta property="og:image:alt" content="Mapa miejsc w książkach na Wolnych Lekturach">
21   <meta property="og:image:width" content="1200">
22   <meta property="og:image:height" content="630">
23
24 {% endblock %}
25
26
27 {% block extrabody %}
28   <script src="{% static 'contrib/leaflet-1.9.4/leaflet.js' %}"></script>
29   <script src="{% static 'contrib/leaflet.markercluster-1.4.1/leaflet.markercluster.js' %}"></script>
30   <script>
31    var map = L.map('references-map').setView([52, 20], 7);
32    L.Icon.Default.imagePath='{{ STATIC_URL }}contrib/leaflet-1.9.4/images/'
33
34    if (navigator.geolocation) {
35        navigator.geolocation.getCurrentPosition(function(position) {
36            map.setView(
37                [position.coords.latitude, position.coords.longitude], 8,
38                {
39                    animate: true,
40                }
41            );
42        });
43    }
44
45    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
46        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
47    }).addTo(map);
48    var markers = L.markerClusterGroup();
49
50    function showMarker(m) {
51        $.get(
52            '/mapa/popup/' + m.target.options.mid,
53            function(data) {
54                let p = L.popup({minWidth: 340}).setLatLng(m.latlng).setContent(data);
55                map.openPopup(p);
56            }
57        );
58    }
59
60    {% cache 60 references-map %}
61    {% localize off %}
62    {% for e in entities %}
63    L.marker(
64        [{{ e.lat }}, {{ e.lon }}],
65        {
66            title: "{{ e.label }}",
67            alt: "{{ e.label }}",
68            mid: {{ e.pk }},
69        }
70    ).on('click', showMarker).addTo(markers);
71    {% endfor %}
72    {% endlocalize %}
73    {% endcache %}
74
75    map.addLayer(markers);
76
77   </script>
78 {% endblock %}
79
80
81 {% block footer %}
82 {% endblock %}