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:title" content="Wakacje z Wolnymi Lekturami">
  18   <meta property="og:image" content="{% static 'references/preview.png' %}">
  19   <meta property="og:image:alt" content="Mapa miejsc w książkach na Wolnych Lekturach">
  20   <meta property="og:image:width" content="1200">
  21   <meta property="og:image:height" content="630">
  22
  23 {% endblock %}
  24
  25
  26 {% block extrabody %}
  27   <script src="{% static 'contrib/leaflet-1.9.4/leaflet.js' %}"></script>
  28   <script src="{% static 'contrib/leaflet.markercluster-1.4.1/leaflet.markercluster.js' %}"></script>
  29   <script>
  30    var map = L.map('references-map').setView([52, 20], 7);
  31    L.Icon.Default.imagePath='{{ STATIC_URL }}contrib/leaflet-1.9.4/images/'
  32
  33    if (navigator.geolocation) {
  34        navigator.geolocation.getCurrentPosition(function(position) {
  35            map.setView(
  36                [position.coords.latitude, position.coords.longitude], 8,
  37                {
  38                    animate: true,
  39                }
  40            );
  41        });
  42    }
  43
  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    function showMarker(m) {
  50        $.get(
  51            '/mapa/popup/' + m.target.options.mid,
  52            function(data) {
  53                let p = L.popup({minWidth: 340}).setLatLng(m.latlng).setContent(data);
  54                map.openPopup(p);
  55            }
  56        );
  57    }
  58
  59    {% cache 60 references-map %}
  60    {% localize off %}
  61    {% for e in entities %}
  62    L.marker(
  63        [{{ e.lat }}, {{ e.lon }}],
  64        {
  65            title: "{{ e.label }}",
  66            alt: "{{ e.label }}",
  67            mid: {{ e.pk }},
  68        }
  69    ).on('click', showMarker).addTo(markers);
  70    {% endfor %}
  71    {% endlocalize %}
  72    {% endcache %}
  73
  74    map.addLayer(markers);
  75
  76   </script>
  77 {% endblock %}
  78
  79
  80 {% block footer %}
  81 {% endblock %}