src/references/templates/references/map.html

   1 {% extends "2022/base.html" %}
   2
   3 {% load l10n %}
   4
   5 {% block extrahead %}
   6   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   7         integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   8         crossorigin=""/>
   9   <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
  10           integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  11           crossorigin=""></script>
  12
  13   <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css">
  14   <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">
  15   <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
  16   <style>
  17     .leaflet-popup-content h2 {
  18         margin-top: 0;
  19         padding-top: 0;
  20         border: 0;
  21     }
  22    .l-books {
  23        width: 100px;
  24    }
  25   </style>
  26 {% endblock %}
  27
  28 {% block global-content %}
  29
  30   <div id="map" style="height: calc(100vh - 68px"></div>
  31
  32 {% endblock %}
  33
  34
  35 {% block extrabody %}
  36   <script>
  37    var map = L.map('map').setView([51.505, -0.09], 8);
  38    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  39        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  40    }).addTo(map);
  41    var markers = L.markerClusterGroup();
  42
  43
  44    function showMarker(m) {
  45        $.get(
  46            '/pinezki/popup/' + m.target.options.mid,
  47            function(data) {
  48                let p = L.popup({minWidth: 106}).setLatLng(m.latlng).setContent(data);
  49                map.openPopup(p);
  50            }
  51        );
  52    }
  53
  54
  55    {% localize off %}
  56    {% for e in entities %}
  57    L.marker(
  58        [{{ e.lat }}, {{ e.lon }}],
  59        {
  60            title: "{{ e.label }}",
  61            alt: "{{ e.label }}",
  62            mid: {{ e.pk }},
  63        }
  64    ).on('click', showMarker).addTo(markers);
  65    {% endfor %}
  66  {% endlocalize %}
  67
  68    map.addLayer(markers);
  69
  70   </script>
  71 {% endblock %}