src/references/templates/references/map.html

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