Листочный пользовательский контроль с активными/неактивными состояниями для выполнения действия ⇐ CSS

[Anonymous]

Я использую листовку, и я хочу иметь кнопку с надписью «Мой контроль» в верхнем левом углу (как показано ниже), что, когда я нажимаю на нее, происходит следующее: < /p>
< ol>
Курсор становится перекрестным, а кнопка «My Control» - это «активное» состояние. < /li>
Я могу нажать один раз на карте. Когда я нажимает на карту, выполняется некоторое действие (например, печать на консоли координаты LAT-LON о том, где пользователь щелкнул). < /Li>
После выполнения этого действия « Моя кнопка «Контроль» возвращается к «неактивному» состоянию, а курсор больше не является перекрестным. /p>
Наконец, если кнопка находится в «активном» состоянии, как я могу реализовать ее, чтобы нажать кнопку снова заставило ее вернуться к «неактивному» состоянию? < /p>

Код: Выделить всё

var map = L.map('map').setView([48.86, 2.35], 11);

L.Control.MyControl = L.Control.extend({
onAdd: function(map) {
var el = L.DomUtil.create('div', 'leaflet-bar my-control');

el.innerHTML = 'My Control';

return el;
},

onRemove: function(map) {
// Nothing to do here
}
});

L.control.myControl = function(opts) {
return new L.Control.MyControl(opts);
}

L.control.myControl({
position: 'topleft'
}).addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© [url=http://osm.org/copyright]OpenStreetMap[/url] contributors'
}).addTo(map);< /code>
.my-control {
background: #fff;
padding: 5px;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/794 ... ing-action