d4569c73e987a260765fd64b27edf163f8e77626
[wolnelektury.git] / src / references / templates / references / map.html
1 {% extends "2022/base.html" %}
2 {% load l10n %}
3
4 {% block global-content %}
5
6   <div id="references-map"></div>
7
8 {% endblock %}
9
10
11 {% block extrabody %}
12   <script>
13    var map = L.map('references-map').setView([52, 20], 7);
14
15    if (navigator.geolocation) {
16        navigator.geolocation.getCurrentPosition(function(position) {
17            map.setView(
18                [position.coords.latitude, position.coords.longitude], 8,
19                {
20                    animate: true,
21                }
22            );
23        });
24    }
25
26    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
27        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
28    }).addTo(map);
29    var markers = L.markerClusterGroup();
30
31    function showMarker(m) {
32        $.get(
33            '/mapa/popup/' + m.target.options.mid,
34            function(data) {
35                let p = L.popup({minWidth: 340}).setLatLng(m.latlng).setContent(data);
36                map.openPopup(p);
37            }
38        );
39    }
40
41
42    {% localize off %}
43    {% for e in entities %}
44    L.marker(
45        [{{ e.lat }}, {{ e.lon }}],
46        {
47            title: "{{ e.label }}",
48            alt: "{{ e.label }}",
49            mid: {{ e.pk }},
50        }
51    ).on('click', showMarker).addTo(markers);
52    {% endfor %}
53    {% endlocalize %}
54
55    map.addLayer(markers);
56
57   </script>
58 {% endblock %}
59
60
61 {% block footer %}
62 {% endblock %}