{% extends "2022/base.html" %}
{% load static %}
{% load l10n %}

{% block global-content %}

  <div id="references-map"></div>

{% endblock %}


{% block extrahead %}
  <link rel="stylesheet" type="text/css" media="all" href="{% static 'contrib/leaflet-1.9.4/leaflet.css' %}">
  <link rel="stylesheet" type="text/css" media="all" href="{% static 'contrib/leaflet.markercluster-1.4.1/MarkerCluster.css' %}">
  <link rel="stylesheet" type="text/css" media="all" href="{% static 'contrib/leaflet.markercluster-1.4.1/MarkerCluster.Default.css' %}">
{% endblock %}


{% block extrabody %}
  <script src="{% static 'contrib/leaflet-1.9.4/leaflet.js' %}"></script>
  <script src="{% static 'contrib/leaflet.markercluster-1.4.1/leaflet.markercluster.js' %}"></script>
  <script>
   var map = L.map('references-map').setView([52, 20], 7);

   if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(function(position) {
           map.setView(
               [position.coords.latitude, position.coords.longitude], 8,
               {
                   animate: true,
               }
           );
       });
   }

   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
   }).addTo(map);
   var markers = L.markerClusterGroup();

   function showMarker(m) {
       $.get(
           '/mapa/popup/' + m.target.options.mid,
           function(data) {
               let p = L.popup({minWidth: 340}).setLatLng(m.latlng).setContent(data);
               map.openPopup(p);
           }
       );
   }

   {% localize off %}
   {% for e in entities %}
   L.marker(
       [{{ e.lat }}, {{ e.lon }}],
       {
           title: "{{ e.label }}",
           alt: "{{ e.label }}",
           mid: {{ e.pk }},
       }
   ).on('click', showMarker).addTo(markers);
   {% endfor %}
   {% endlocalize %}

   map.addLayer(markers);

  </script>
{% endblock %}


{% block footer %}
{% endblock %}