How in leaflet to display a space with labels for selection on top of the map?

Question

JavaScript

It is necessary that when you click on the map, a field appears on top of the map, in which my markers are displayed. When you click on a marker, it should appear as an icon at the location of the initial click on the map. I tried to implement this through L.Control, but the click "breaks" through this field and re-clicks on the map, resulting in another field.
Should I use L.Control? Maybe there are other options?

Answer 1

I don’t know the author solved the issue or not, but he didn’t write any conclusions for such a long time.
An approximate solution to this problem can be as follows, let it lie here.

var map;
var clickCoordinates;

function set_icon(icon_type){
// Параметры иконок
  var LeafIcon = L.Icon.extend({
        options: {
          //shadowUrl: 'images/marker-shadow.png',
          iconSize:     [23, 30],
          //shadowSize:   [35, 30],
          iconAnchor:   [11,30],
          //shadowAnchor: [11, 30],
          popupAnchor:  [0, -30]
        }
      });
    
  // Свитчим иконки
  switch (icon_type){
    case 'green':
    var icon = new LeafIcon({iconUrl: 'images/green.png'})
      break
    case 'yellow':
    var icon = new LeafIcon({iconUrl: 'images/yellow.png'})
      break
    case 'blue':
    var icon = new LeafIcon({iconUrl: 'images/blue.png'})
      break	
    default:
    var icon = new LeafIcon({iconUrl: 'images/marker-icon.png'})
      break
  };
  return icon
};

function init_map(coordinates,div_id,default_zoom,type){
  //карта
  map = L.map(div_id, {zoomControl:false}).setView(coordinates, default_zoom); 
  map.spin(true);
  map.panTo(coordinates); 
  if(type == 'yandex'){
    var y = new L.Yandex('publicMap')
    map.addLayer(y);
  }else{
  // OSM карты как источник
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: ' Prog/Design &copy; <a href="https://twitter.com/" target="_blank">@POS_troi</a>'
    }).addTo(map);
  }
  map.spin(false);
  return map;

};


jQuery( document ).ready(function() {
    map = init_map([48.851952544057184,37.60173797607422],'map',15,'yandex');	
    //Обрабатываем клик поиконкам добавления		
    $('#new_marker*').click(function(e){
      var icon_type = $(this).data("icon");
      var marker_l =  new L.marker(clickCoordinates, {icon: set_icon(icon_type), draggable: 'true'});
        map.addLayer(marker_l);
        marker_l.bindPopup("Ты кликнул сюда о великий,</br>Теперь подвигай меня нежно :)").openPopup()
        $('#markerPanel').addClass('hide'); //Скроем панель обратно
        //Обработка перемещения маркера
        marker_l.on('mousedown',function(e){
          marker_l.on('dragend',function(event){
            marker = event.target;
            p = marker.getLatLng();
            marker_l.bindPopup("<button id=\"add_new_marker\" type=\"button\" class=\"btn btn-success btn-lg btn-responsive\">О да !!!</button>").openPopup()
          });
      });
    });
    //Обрабатываем клик по карте
    map.on('click', function(e) {
      $('#markerPanel').removeClass('hide'); //Показываем панель с маркерами
      clickCoordinates = e.latlng; //Получаем координаты
    });

});

<div id="map" class="col-md-12 col-lg-12 col-sm-12 col-xs-12"></div>
  
<div id="markerPanel" class="marker_panel hide">		
  <div class='col-md-12 col-lg-12 col-sm-12 col-xs-12'>
    <img id='new_marker' data-icon="green" src="./images/green.png">
    <img id='new_marker' data-icon="yellow" src="./images/yellow.png">
    <img id='new_marker' data-icon="blue" src="./images/blue.png">
  </div>

#map {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
 }

.hide{
  display:none;
}

.marker_panel{
  position: fixed;
}

I'm not a JS developer, so don't scold me for being crooked, I sketched it out in 20 minutes for an example :)