Как убрать границы меток в Leaflet на JavaScript?

Оффтоп javascript
1

Привет, форумчане! У меня возникла проблема с Leaflet на JavaScript. Я смог уменьшить размер круглого маркера до маленькой зеленой точки, но белое пространство и граница метки все еще закрывают мою область исследования. Как мне убрать границы метки moylabel, оставив только текст? В R я знаю, как это сделать, но с JavaScript пока не очень знаком. Вот пример кода:

let map = L.map('map').setView([38.1341, -121.2722], 10);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

let marker = L.circleMarker([37.79577, -121.58426], {
    radius: 2,
    color: 'green'
}).addTo(map);

marker.bindTooltip('moylabel', {
    permanent: true,
    direction: 'right'
});

Буду благодарен за любую помощь!

2

Понял твою проблему. Вот что можно сделать: добавь опцию className в bindTooltip, а потом стилизуй через CSS. Примерно так:

marker.bindTooltip('moylabel', {
    permanent: true,
    direction: 'right',
    className: 'no-background'
});

И в CSS:

.leaflet-tooltip.no-background {
    background: none;
    border: none;
    box-shadow: none;
}

Это уберет фон и границу, оставив только текст. Попробуй - должно сработать.

3

Попробуй назначить своему tooltip новый класс и избавься от лишних стилей через CSS. Например, добавь опцию className:‘my-tooltip’ в bindTooltip, а затем переопредели стили .my-tooltip для удаления границы и фона. Как думаешь, это сработает?

4

у меня была похожая проблема недавно. решил так - использовал L.divIcon вместо обычного маркера. это позволяет создать полностью кастомную метку без лишних элементов. вот пример:

let customIcon = L.divIcon({
  html: '<div>moylabel</div>',
  className: 'my-div-icon'
});

L.marker([37.79577, -121.58426], {icon: customIcon}).addTo(map);

в css добавь стили для .my-div-icon, чтобы настроить внешний вид по своему вкусу. этот способ дает полный контроль над меткой. попробуй, должно помочь!