<table id="temporary-table" style="display: none;">
    {% for person in site.people %}
        <tr>
            <td>{{ person.nome }}</td>
            <td>{{ person.latitude }}</td>
            <td>{{ person.longitude }}</td>
        </tr>
    {% endfor %}
</table>

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

<script>
    document.addEventListener('DOMContentLoaded', function() {
      // Selecionar a tabela oculta
      var table = document.getElementById('temporary-table');
      var rows = table.getElementsByTagName('tr');
    
      var totalLatitude = 0;
      var totalLongitude = 0;
      var count = rows.length;
    
      // Iterar sobre as linhas da tabela para pegar os dados
      for (var i = 0; i < count; i++) {
        var cells = rows[i].getElementsByTagName('td');
        var latitude = parseFloat(cells[1].innerText); // Latitude
        var longitude = parseFloat(cells[2].innerText); // Longitude
    
        totalLatitude += latitude;
        totalLongitude += longitude;
      }
    
      // Calcular a média
      var averageLatitude = totalLatitude / count;
      var averageLongitude = totalLongitude / count;
    
      // Inicializar o mapa com a média das coordenadas
      var map = L.map('map').setView([averageLatitude, averageLongitude], 5);
    
      // Adicionar a camada de tile do OpenStreetMap
      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);
    
      // Adicionar marcadores para todas as pessoas
      for (var i = 0; i < count; i++) {
        var cells = rows[i].getElementsByTagName('td');
        var nome = cells[0].innerText; // Nome da pessoa
        var latitude = parseFloat(cells[1].innerText); // Latitude
        var longitude = parseFloat(cells[2].innerText); // Longitude
    
        L.marker([latitude, longitude]).addTo(map)
          .bindPopup(nome);
      }
    });
    </script>
    
  