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