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