Как вывести инфо выбранного маркера leafleat js map в своём DIV вне поп-апа?

Question

[gogowq]

У меня есть карта -

// Latitude, longitude, Zoom Level
        var map = L.map('map__riot').setView([38.6245, -90.1506], 14);

        // TileLayer
        L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}.png', {
            attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            minZoom: 10,
            maxZoom: 16,
            ext: 'png'
        }).addTo(map);

        // Iterate over the markers and add them to the map
        for (var i = 0; i < sites.length; i++ ) {
            marker = new L.marker([sites[i].lat, sites[i].lng])
            .bindPopup('<p class="popup__header">'+ sites[i].address + '</p><p class="popup__description">' + sites[i].description + '</p>' )
            .addTo(map);

        }

Данные которые мне нужны,лежат тут - sites[i].description
Само собой при клике маркер (с учёта что их несколько) ,данные там меняются
Сейчас они выводятся в поп-ап окне этого скрипта.Я хочу их вывести в своём div,не в поп-апе как это сделано сейчас.
Тут-

<div class="description">
<p id="text_info"></p>
</div>

Документацию я смотрел,но ничего в Example не нашёл. Поделитесь,как мне выводить данные при клике на маркер в своём div

Answer 1

[freeExec]

У маркера есть событие на клик. Вот в нём и формируйте свой див.

Comments

[gogowq]

я пробовал так

for (var i = 0; i < sites.length; i++ ) {
        marker = new L.marker([sites[i].lat, sites[i].lng])
        .bindPopup('<p class="popup__header">'+ sites[i].address + '</p><p class="popup__description">' + sites[i].description + '</p>' )
        .on('click', () => {
                 jQuery('#text_info').text(sites[i].description)
        })
        .addTo(map);

    }

Но пишет почему то что sites[i].description is not defined

[freeExec]

gogowq, ну естественно, когда сработает клик никакого цикла с i и sites уже нет.

[gogowq]

Разобрался.спасибо

Answer 2

[gogowq]

for (const site of sites) {
                  marker = new L.marker([site.lat, site.lng], {
                        icon: greenIcon,
                     })
                   
                     .on('click', function(e) {

                        this.setIcon(redIcon);

                        document.getElementById('YOURDIV').textContent = site.address
                     })

                     .addTo(map);