58 lines
2.0 KiB
HTML
58 lines
2.0 KiB
HTML
<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: '© <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>
|
|
|
|
|