Маркер отказов при наведении указателя мыши на элементы списка - PullRequest
Новая
       39

Маркер отказов при наведении указателя мыши на элементы списка

0 голосов
/ 03 июня 2019

Мне бы хотелось, чтобы маркеры на моей карте листовки отражались при наведении курсора на соответствующий элемент списка на боковой панели. Как подключить маркеры и элементы списка. Элементы списка и всплывающие окна генерируются динамически, их свойства хранятся в одном и том же файле geoJSON. 

// Dynamically created list items in sidebar

var i = 1;
const buildItemList = (data) =>  {

    for( const el of data){
        var prop = el.properties;


    var listings = document.getElementById('listings');
    var listing = listings.appendChild(document.createElement('div'));
    listing.className = 'item';
    listing.id = 'newItem_' + i++;

    var content = document.createElement('div');
    listing.appendChild(content);
    content.className = 'content';
    content.innerHTML= `<div class="space">${prop.name}</div>`+ 
                        `<span class="info">'Title: "${prop.title}" 
                         </span> 
                         <br>` +
                        `<span class="extra">${prop.extra}<br>Adress: 
                         ${prop.adress}</span><br></div>`;

    if(!prop.extra){
        content.innerHTML = `<div class="space">${prop.name}</div>`+ 
        `<span class="info">'Title: "${prop.title}"</span><br>` +
        `<span class="extra">No Info</span><br>Adress: ${prop.adress} 
         </div>`;
            }

     if(!prop.title){
        content.innerHTML = `<div class="space">${prop.name}</div>`+ 
        `<span class="info"></span>` +
        `<span class="extra2">${prop.extra}<br>Adress: ${prop.adress} 
        </span><div>`;
         }

     }                    

 }

 buildItemList(myArt);


// Markers and popups

const myLayer = L.geoJSON(art, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: redFlag});  

  },
       //Here innerHTML markup for popup

 });

 mymap.addLayer(myLayer);
...