Используйте значки начальной загрузки для маркеров на картах листовок. ⇐ CSS

[Anonymous]

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

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

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

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

.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); }

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

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

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