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-popup-books {
  23        display: flex;
  24        flex-wrap: wrap;
  25        gap: 5px;
  26        max-height: 350px;
  27        overflow-y: scroll;
  28    }
  29    .l-popup-books img {
  30        display: block;
  31    }
  32    .l-popup-books .c-search-result-fragment {
  33        padding: 0 0 20px 0;
  34        border-width: 0;
  35        border-radius: 0;
  36    }
  37    .l-popup-book-header {
  38        display: flex;
  39        gap: 16px;
  40    }
  41   </style>
  42 {% endblock %}
  43
  44 {% block global-content %}
  45
  46   <div id="map" style="height: calc(100vh - 68px)"></div>
  47
  48 {% endblock %}
  49
  50
  51 {% block extrabody %}
  52   <script>
  53    var map = L.map('map').setView([52, 20], 7);
  54    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  55        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  56    }).addTo(map);
  57    var markers = L.markerClusterGroup();
  58
  59
  60    function showMarker(m) {
  61        $.get(
  62            '/pinezki/popup/' + m.target.options.mid,
  63            function(data) {
  64                d = $(data);
  65                n = Math.min(3, ($('a', d).length));
  66                w = 111 * n - 5;
  67                let p = L.popup({minWidth: w}).setLatLng(m.latlng).setContent(data);
  68                map.openPopup(p);
  69            }
  70        );
  71    }
  72
  73
  74    {% localize off %}
  75    {% for e in entities %}
  76    L.marker(
  77        [{{ e.lat }}, {{ e.lon }}],
  78        {
  79            title: "{{ e.label }}",
  80            alt: "{{ e.label }}",
  81            mid: {{ e.pk }},
  82        }
  83    ).on('click', showMarker).addTo(markers);
  84    {% endfor %}
  85  {% endlocalize %}
  86
  87    map.addLayer(markers);
  88
  89   </script>
  90 {% endblock %}