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    }
  27    .l-popup-books img {
  28        display: block;
  29    }
  30   </style>
  31 {% endblock %}
  32
  33 {% block global-content %}
  34
  35   <div id="map" style="height: calc(100vh - 68px"></div>
  36
  37 {% endblock %}
  38
  39
  40 {% block extrabody %}
  41   <script>
  42    var map = L.map('map').setView([51.505, -0.09], 8);
  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
  49    function showMarker(m) {
  50        $.get(
  51            '/pinezki/popup/' + m.target.options.mid,
  52            function(data) {
  53                d = $(data);
  54                n = Math.min(3, ($('a', d).length));
  55                w = 111 * n - 5;
  56                let p = L.popup({minWidth: w}).setLatLng(m.latlng).setContent(data);
  57                map.openPopup(p);
  58            }
  59        );
  60    }
  61
  62
  63    {% localize off %}
  64    {% for e in entities %}
  65    L.marker(
  66        [{{ e.lat }}, {{ e.lon }}],
  67        {
  68            title: "{{ e.label }}",
  69            alt: "{{ e.label }}",
  70            mid: {{ e.pk }},
  71        }
  72    ).on('click', showMarker).addTo(markers);
  73    {% endfor %}
  74  {% endlocalize %}
  75
  76    map.addLayer(markers);
  77
  78   </script>
  79 {% endblock %}