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