Какая библиотека Leaflet или обходной путь для управления размером панели инструментов

Question

Мне нужно изменить стиль панели инструментов, например размер кнопки, чтобы иметь большую сенсорную область для мобильного устройства (панель инструментов рисования и другие элементы управления).

Я уже пытался изменить размер на 48px дляширина и высота кнопки панели инструментов с использованием css.

Текущий css:

/*
  ##Device = Mobile, Tablet
*/
@media (max-width: 1024px) {
    .leaflet-bar a, a.leaflet-toolbar-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
        line-height: 45px !important;
    }
    .leaflet-touch .leaflet-draw-actions a {
        font-size: 20px;
        line-height: 44px;
        height: 44px;
    }
    .leaflet-control-zoom-display {
        width: 45px;
        height: 45px;
        font-size: 18px;
        line-height: 30px;
    }
    .leaflet-touch .leaflet-control-layers-toggle {
        width: 44px;
        height: 44px;
    }
}

Когда я изменяю размер способом css, панель инструментов больше не реагирует (фон панели инструментов рисования листочка долженсоответствовать размеру)

Он также дает сбой при нажатии на кнопку панели инструментов и показывает горизонтальную панель вспомогательных инструментов (текст перекрывается).

Кто-нибудьзнаете плагин или способ иметь большую сенсорную область для мобильного телефона?

Answer 1

Я решил свою проблему с помощью некоторых CSS

/*
  ##Devices with touch
*/
.leaflet-touch .leaflet-control-zoom-display {
  width: 48px;
  height: 48px;
  font-size: 18px;
  line-height: 30px;
}
.leaflet-touch .leaflet-bar a, .leaflet-touch .leaflet-toolbar-0 > li > a {
  width: 44px;
  height: 44px;
  font-size: 20px;
  line-height: 45px;
  background-size: 314px 30px;
}
.leaflet-touch .leaflet-draw-toolbar.leaflet-bar a {
  background-position-y: 6px;
}
.leaflet-touch .leaflet-draw-actions a, .leaflet-touch .leaflet-control-toolbar .leaflet-toolbar-1 > li > .leaflet-toolbar-icon {
  font-size: 20px;
  line-height: 44px;
  height: 44px;
}
.leaflet-touch .leaflet-draw-actions, .leaflet-touch .leaflet-toolbar-1 {
  left: 45px;
}

Для тех, кто использует плагин Custom Toolbar: если вы установите положение вправо, вспомогательная панель инструментов откроется справа (вне экрана).по:

.leaflet-right .leaflet-toolbar-1 {
  left: auto !important;
  right: 30px;
}
.leaflet-right .leaflet-toolbar-1 li:first-child > .leaflet-toolbar-icon {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.leaflet-right .leaflet-toolbar-1 li:last-child > .leaflet-toolbar-icon {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}

(со смещенной панелью инструментов и пользовательским положением панели инструментов):