The first time I create a map based on the mapbox. In the code below, when I click on the map, I create a group with a marker and a circle.

var marker, circle, group, removeName, classGroup, idGroup = 1; map.on('click', function(e) { var nameGroup = prompt('Введіть назву маркера', 'Новый маркер '+idGroup); if (nameGroup == null) return; circle_radius = prompt('Введіть радіус маркера', 300); if (circle_radius == null) return; marker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(myLayer); circle = L.circle([e.latlng.lat, e.latlng.lng, {draggable: true}], circle_radius, circle_options).addTo(myLayer); group = L.featureGroup([marker, circle]) .bindPopup(nameGroup) .on('click', function() { map.removeLayer(this); removeName = this._leaflet_id; removeLi(removeName); }) .addTo(map); classGroup = group._leaflet_id; addLi(nameGroup, classGroup); group.on('mouseover', function(e) { e.layer.openPopup(); }); group.on('mouseout', function(e) { e.layer.closePopup(); }); idGroup++; });

After creating them, li also appears on the sidebar with the name of our marker and in the id our li is the _leaflet_id the same marker.

 function addLi(nameGroup, classGroup) { var elem = document.getElementById("item"); var div = document.createElement("li"); div.setAttribute('class', 'item'); div.setAttribute('id', classGroup); div.innerHTML = nameGroup.toString(); elem.parentNode.appendChild(div, elem); div.addEventListener('click', openPopup) }

It was conceived that when you click on our li:

 function openPopup(){ var nameMarker = $(this).attr('id'); console.log(nameMarker); var selectMarker = group._leaflet_id = nameMarker; selectMarker.openPopup(); }

our bindPopup() will pop up, but I cannot correctly refer to our group / marker by _leaflet_id

  • I found a solution: I created an array var allGroups = [] and when I created the group I pushed it into our new array: allGroups.push(group); Then I wrote a small loop: for (var i = 0; i < allGroups.length; i++) { if(allGroups[i]._leaflet_id == nameMarker) { allGroups[i].openPopup(); } } for (var i = 0; i < allGroups.length; i++) { if(allGroups[i]._leaflet_id == nameMarker) { allGroups[i].openPopup(); } } - Artem Holinka
  • add by editing your answer to your question and write what is the answer - Vasiliy Barbashev

1 answer 1

I found a solution: I created an array var allGroups = [] and when I created the group I pushed it into our new array: allGroups.push (group); Then he wrote a small function:

 function openPopup(){ var nameMarker = $(this).attr('id'); console.log(nameMarker); for (var i = 0; i < allGroups.length; i++) { if(allGroups[i]._leaflet_id == nameMarker) { allGroups[i].openPopup(); } } }