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 %}