Add custom icons with markers

Replicates the MapLibre example Add custom icons with markers. Each upstream Marker({ element }) with a hand-built div becomes a markers: entry with an icon: URL.

The complete document

add-custom-icons-with-markers.yaml

# yaml-language-server: $schema=https://docs.maplibre-yaml.org/schema/latest/map.schema.json
# Gallery twin of https://maplibre.org/maplibre-gl-js/docs/examples/add-custom-icons-with-markers/
# icon: swaps the default pin for any image URL; a failed load falls back
# to the pin with one console note.
type: map
id: add-custom-icons-with-markers
config:
  center: [-65.017, -16.457]
  zoom: 5
  mapStyle: "https://demotiles.maplibre.org/style.json"
markers:
  - at: [-66.324462, -16.024695]
    icon: "https://commons.wikimedia.org/wiki/Special:FilePath/Cat_silhouette.svg?width=64"
    size: 1
  - at: [-61.21582, -15.971891]
    icon: "https://commons.wikimedia.org/wiki/Special:FilePath/Dog_silhouette.svg?width=64"
    size: 1.4

What to notice

• icon: swaps the default pin for any image URL; size: scales it.
• A failed icon load falls back to the default pin with one console note — never a blank marker.
• On export, mlym emit --with-fallbacks fetches each icon URL into the document sprite, so the emitted symbol layer renders the same images (markers as a whole remain a lossy fallback — dragging and popups don’t compile).