Как в leaflet выводить поверх карты пространство с метками для выбора?

Question

[ssssergey]

Нужно, чтобы при нажатии на карту поверх карты появлялось поле, в котором отображаются мои маркеры. При нажатии на маркер он должен появиться в виде icona на месте первоначального нажатия по карте. Пытался это реализовать через L.Control, но клик "пробивает" через это поле и повторно кликает по карте, в результате чего появляется еще одно поле.
Стоит ли использовать L.Control? Может быть есть другие варианты?

Answer 1

[ТыжСисАдмин]

Не знаю автор решил вопрос или нет, но и не написал никаких выводов за столь длинный срок.
Примерное решение этой задачи может быть таким, пусть лежит тут.

Скрипт:

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; //Получаем координаты
		});

});

HTML:

<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>

CSS:

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

.hide{
  display:none;
}

.marker_panel{
  position: fixed;
}

Я не про JS разработчик так что за кривость не ругайте, набросал за 20 минут для примера :)