src/references/templates/references/map.html

   1 {% extends "2022/base.html" %}
   2 {% load l10n %}
   3
   4 {% block global-content %}
   5
   6   <div id="references-map"></div>
   7
   8 {% endblock %}
   9
  10
  11 {% block extrabody %}
  12   <script>
  13    var map = L.map('references-map').setView([52, 20], 7);
  14
  15    if (navigator.geolocation) {
  16        navigator.geolocation.getCurrentPosition(function(position) {
  17            map.setView(
  18                [position.coords.latitude, position.coords.longitude], 8,
  19                {
  20                    animate: true,
  21                }
  22            );
  23        });
  24    }
  25
  26    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  27        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  28    }).addTo(map);
  29    var markers = L.markerClusterGroup();
  30
  31    function showMarker(m) {
  32        $.get(
  33            '/mapa/popup/' + m.target.options.mid,
  34            function(data) {
  35                let p = L.popup({minWidth: 340}).setLatLng(m.latlng).setContent(data);
  36                map.openPopup(p);
  37            }
  38        );
  39    }
  40
  41
  42    {% localize off %}
  43    {% for e in entities %}
  44    L.marker(
  45        [{{ e.lat }}, {{ e.lon }}],
  46        {
  47            title: "{{ e.label }}",
  48            alt: "{{ e.label }}",
  49            mid: {{ e.pk }},
  50        }
  51    ).on('click', showMarker).addTo(markers);
  52    {% endfor %}
  53    {% endlocalize %}
  54
  55    map.addLayer(markers);
  56
  57   </script>
  58 {% endblock %}
  59
  60
  61 {% block footer %}
  62 {% endblock %}