Используйте Bootstrap-Icons для маркеров карты листовок ⇐ Html

[Anonymous]

Я хочу использовать значки начальной загрузки для маркеров карты в листочке. Для этого есть ряд плагинов (например, [1], [2], [3]), но они не подчиняются или не работают с последними значками начальной загрузки. Я взял маркер карты SVG «Balloon» отсюда и добавил значок над ним, используя абсолютное позиционирование.

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

const map = L.map('map').setView([51.505, -0.09], 8);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© [url=https://www.openstreetmap.org/copyright]OpenStreetMap[/url]'
}).addTo(map);

const icon = L.divIcon({  // leaflet default marker is 25px x 41px
html: `




[i][/i]
`,
iconSize: [25, 41],
iconAnchor: [25/2, 41],
className: 'icon'
});

L.marker([51.5, -0.09], { icon: icon }).addTo(map);< /code>

.icon { position: relative; }
.icon path { fill: var(--bs-primary); stroke: var(--bs-dark); }
.bi { position: absolute; top: 1px; left: 4px; font-size: 1rem; color: var(--bs-light); }< /code>

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

Подробнее здесь: https://stackoverflow.com/questions/783 ... ap-markers