a65224a7fdf03835f111aa786492a7c523256c73
[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 {% endblock %}
17
18
19 {% block extrabody %}
20   <script src="{% static 'contrib/leaflet-1.9.4/leaflet.js' %}"></script>
21   <script src="{% static 'contrib/leaflet.markercluster-1.4.1/leaflet.markercluster.js' %}"></script>
22   <script>
23    var map = L.map('references-map').setView([52, 20], 7);
24    L.Icon.Default.imagePath='{{ STATIC_URL }}contrib/leaflet-1.9.4/images/'
25
26    if (navigator.geolocation) {
27        navigator.geolocation.getCurrentPosition(function(position) {
28            map.setView(
29                [position.coords.latitude, position.coords.longitude], 8,
30                {
31                    animate: true,
32                }
33            );
34        });
35    }
36
37    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
38        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
39    }).addTo(map);
40    var markers = L.markerClusterGroup();
41
42    function showMarker(m) {
43        $.get(
44            '/mapa/popup/' + m.target.options.mid,
45            function(data) {
46                let p = L.popup({minWidth: 340}).setLatLng(m.latlng).setContent(data);
47                map.openPopup(p);
48            }
49        );
50    }
51
52    {% localize off %}
53    {% for e in entities %}
54    L.marker(
55        [{{ e.lat }}, {{ e.lon }}],
56        {
57            title: "{{ e.label }}",
58            alt: "{{ e.label }}",
59            mid: {{ e.pk }},
60        }
61    ).on('click', showMarker).addTo(markers);
62    {% endfor %}
63    {% endlocalize %}
64
65    map.addLayer(markers);
66
67   </script>
68 {% endblock %}
69
70
71 {% block footer %}
72 {% endblock %}