[Map] Unable to customize the icon of a marker with bridgeOptions

[ker0x]

In bridge documentations (Google, Leaflet), it state that we can customize the marker icon with bridgeOptions.

However, based on this line, it would seem that this is not the case.

For now my solution is to delete the icon key from the definition object:

delete definition.icon;

But adding a check would improve DX!

if (icon && !Object.hasOwn(rawOptions, 'icon') && !Object.hasOwn(bridgeOptions, 'icon')) {
    this.doCreateIcon({ definition: icon, element: marker });
}

[Kocal]

Hi, I'm not sure to understand the issue, on a project using Leaflet, I'm able to customize the icon:

1. through definition.bridgeOptions = { icon: L.divIcon(...) }, for advanced usage
2. or through Marker(icon: Icon::ux('...')), for simplified usage

Can you show us some code?

[ker0x]

Ho I see, that's because i'm using both methods to customize the icon!

First, I generate the icon with Icon::ux('...') and then I customize it using the generated html and wrap it in a div with custom classes:

foreach ($markers ?? [] as $marker) {
    if (!isset($marker['icon'])) {
        $marker['icon'] = Icon::ux('lucide:store')
            ->width(16)
            ->height(16)
            ->toArray()
        ;
    }

    $map->addMarker(Marker::fromArray($marker));
}

private onMarkerBeforeCreate(event: CustomEvent) {
    const { definition, L } = event.detail;
    const icon = L.divIcon({
      html: definition.icon._generated_html,
      iconSize: [32, 32],
      popupAnchor: [0, -32],
      className: 'flex! justify-center items-center size-8 bg-background rounded-full shadow-xs',
    });

    definition.bridgeOptions = {
      icon: icon,
    };

    delete definition.icon;
  }

[Kocal]

That's a very hacky solution and definitely not something we want to support.
If you really want to pass extra data, you can give a try to extra parameter from Marker constructor parameter.

[Kocal]

Or most simple and lighter, directly embed your SVG content into the JavaScript, this is what I am doing on my website:

    _onMarkerBeforeCreate(event) {
        const { L, definition } = event.detail;

        definition.bridgeOptions = {
            icon: L.divIcon({
                html: `
<div class="relative">
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linecap="round" clip-rule="evenodd" viewBox="0 0 500 820">
        <defs>
           <linearGradient id="__sf_ux_map_gradient_marker_fill" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 -37.57 37.57 0 416.45 541)" gradientUnits="userSpaceOnUse">
               <stop offset="0" stop-color="#126FC6" />
               <stop offset="1" stop-color="#4C9CD1" />
           </linearGradient>
           <linearGradient id="__sf_ux_map_gradient_marker_border" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 -19.05 19.05 0 414.48 522.49)" gradientUnits="userSpaceOnUse">
               <stop offset="0" stop-color="#2E6C97" />
               <stop offset="1" stop-color="#3883B7" />
           </linearGradient>
        </defs>
        <path fill="url(#__sf_ux_map_gradient_marker_fill)" stroke="url(#__sf_ux_map_gradient_marker_border)" stroke-width="1.1" d="M416.54 503.61c-6.57 0-12.04 5.7-12.04 11.87 0 2.78 1.56 6.3 2.7 8.74l9.3 17.88 9.26-17.88c1.13-2.43 2.74-5.79 2.74-8.74 0-6.18-5.38-11.87-11.96-11.87Z" transform="translate(-7889.1 -9807.44) scale(19.54)"/>
    </svg>

    <img src="${definition.extra.icon_mask_uri}" alt="" class="absolute" style="width: 12px; top: 8px; transform: translate3d(50%, 0, 0); filter: invert(1)" />
</div>
`,
                iconSize: [25, 41],
                iconAnchor: [12.5, 41],
                popupAnchor: [0, -41],
                className: "",
            }),
        };
    }

[ker0x]

Yes, that's a solution if all your markers have the same SVG.

Before migrating to UX map, I was using fragment template to do it:

<template id="map-marker" data-map-target="marker">
    <div class="flex justify-center items-center size-8 bg-white rounded-full shadow-xs text-gray-900 hover:text-white hover:bg-primary-500">
        <twig:Ux:Icon name="lucide:store" class="size-4" />
    </div>
</template>

private createMarker(location: Location): Marker<any> {
    const fragment: HTMLElement = this.markerTarget.content.firstElementChild?.cloneNode(true) as HTMLElement

    const marker: Marker<any> = new Marker(this.getLatLng(location.coordinates), {
        //...
        icon: new DivIcon({
            html: fragment,
            iconSize: [32, 32],
            popupAnchor: [0, -32],
        }),
    })

    return marker
}