LigaDasOrquideas/_layouts/peoples.html

---
layout: default
---
<table id="temporary-table" style="display: none;">
        <tr>
            <td>{{ page.title }}</td>
            <td>{{ page.latitude }}</td>
            <td>{{ page.longitude }}</td>
        </tr>
</table>



<div class="hero">
    <div class="pessoal-page">
        <div class="box">
            <div class="box-image">
                {% assign nome = page.path | split: '/' | last | split: '.' | first %}
                <img src="{{ site.baseurl }}/people/{{ nome }}.png">
                <!-- <img src="{{ site.baseurl }}/{{ imagem_author }}" alt="Imagem do Autor" class="author-img"> -->
            </div>

            <div class="box-info">
                <h1>{{ page.title }}</h1>
                <hr>
                <h3>{{ page.formacao }}</h3>
                <hr>
                <h3>{{ page.instituicao }}</h3>
                <hr>
                <h3>{{ page.atuacao }}</h3>
                <hr>
                {% if page.lattes %}
                    <a href='{{ page.lattes }}'>
                        <img src="{{ site.baseurl }}/Assets/logos/Lattes-Logos/lattesNBG.png" alt="Lattes">
                    </a>
                {% endif %}
               
            </div>
        </div>
        
        <div class="info">
            <div class="info-content">
                <h1>Sobre {{ page.title | split: ' ' | first }}</h1>
                <p>{{ content }}</p>
            </div>

            <div class="info-map">
                <div id="map"></div>
            </div>
        </div>
    </div>
</div>


<script>
    // Inicializa o mapa e define o ponto inicial e o nível de zoom
    var map = L.map('map').setView([-23.55052, -46.6333], 13);

    // Adiciona a camada de mapas do OpenStreetMap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // Função para adicionar o marcador a partir da tabela
    function addMarkerFromTable() {
        var table = document.getElementById('temporary-table');
        var row = table.getElementsByTagName('tr')[0];
        var cells = row.getElementsByTagName('td');

        var title = cells[0].textContent;
        var lat = parseFloat(cells[1].textContent);
        var lng = parseFloat(cells[2].textContent);

        // Adiciona o marcador ao mapa
        L.marker([lat, lng]).addTo(map)
            .bindPopup(title)
            .openPopup(); // Abre o pop-up automaticamente ao carregar
    }

    // Chama a função para adicionar o marcador
    addMarkerFromTable();
</script>