[Map] event.detail.definition est undefined dans ux:map:marker:after-create, empêchant l'accès aux données extra

[JeDeveloppe]

• Comportement attendu : Selon la documentation, event.detail.definition.extra devrait être accessible dans ux:map:marker:after-create.

• Comportement observé : event.detail.definition est en fait undefined dans cet événement

En créant un marker de la sorte:
$map->addMarker(new Marker( position: new Point($shop->getCity()->getLatitude(), $shop->getCity()->getLongitude()), icon: $icon, title: $shop->getName(), infoWindow: new InfoWindow( content: $shop->getName().'('.$shop->getCm().')<p>'.$shop->getManager()->getFirstNameAndNameOnly().'<br/>'.$shop->getPhone().'</p>', ), extra: [ 'markerColor' => '#345342' ] ));

Le markerColor n'apparait pas côté client, grace un beaucoup d'AI il m'a générer un code qui fonctionne, cela permet de changer la couleur du marker à la création.

Voilà le code dans assets/mymap_controller.js:
`// assets/controllers/mymap_controller.js

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {

markerColorMap = new Map();

connect() {
    this.element.addEventListener('ux:map:pre-connect', this._onPreConnect.bind(this));
    this.element.addEventListener('ux:map:connect', this._onConnect.bind(this));
    this.element.addEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate.bind(this));
    this.element.addEventListener('ux:map:marker:after-create', this._onMarkerAfterCreate.bind(this));
    this.element.addEventListener('ux:map:info-window:before-create', this._onInfoWindowBeforeCreate.bind(this));
    this.element.addEventListener('ux:map:info-window:after-create', this._onInfoWindowAfterCreate.bind(this));
    this.element.addEventListener('ux:map:polygon:before-create', this._onPolygonBeforeCreate.bind(this));
    this.element.addEventListener('ux:map:polygon:after-create', this._onPolygonAfterCreate.bind(this));
    this.element.addEventListener('ux:map:polyline:before-create', this._onPolylineBeforeCreate.bind(this));
    this.element.addEventListener('ux:map:polyline:after-create', this._onPolylineAfterCreate.bind(this));
}

disconnect() {
    this.element.removeEventListener('ux:map:pre-connect', this._onPreConnect.bind(this));
    this.element.removeEventListener('ux:map:connect', this._onConnect.bind(this));
    this.element.removeEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate.bind(this));
    this.element.removeEventListener('ux:map:marker:after-create', this._onMarkerAfterCreate.bind(this));
    this.element.removeEventListener('ux:map:info-window:before-create', this._onInfoWindowBeforeCreate.bind(this));
    this.element.removeEventListener('ux:map:info-window:after-create', this._onInfoWindowAfterCreate.bind(this));
    this.element.removeEventListener('ux:map:polygon:before-create', this._onPolygonBeforeCreate.bind(this));
    this.element.removeEventListener('ux:map:polygon:after-create', this._onPolygonAfterCreate.bind(this));
    this.element.removeEventListener('ux:map:polyline:before-create', this._onPolylineBeforeCreate.bind(this));
    this.element.removeEventListener('ux:map:polyline:after-create', this._onPolylineAfterCreate.bind(this));
}

_onPreConnect(event) { }
_onConnect(event) { }

_onMarkerBeforeCreate(event) {
    const definition = event.detail.definition;

    if (definition && definition['@id'] && definition.extra && definition.extra.markerColor) {
        this.markerColorMap.set(definition['@id'], definition.extra.markerColor);
    }

    // Assurez-vous que l'ID est passé aux rawOptions de Leaflet
    // pour qu'il soit accessible via markerInstance.options['@id']
    definition.rawOptions = definition.rawOptions || {};
    definition.rawOptions['@id'] = definition['@id'];
}

_onMarkerAfterCreate(event) {
    const markerInstance = event.detail.marker;
    // Récupère l'ID depuis les options de l'instance Leaflet du marqueur
    const markerId = markerInstance.options ? markerInstance.options['@id'] : undefined;

    if (!markerInstance || !markerId) {
        return;
    }

    const markerColor = this.markerColorMap.get(markerId);

    if (markerColor) {
        setTimeout(() => {
            const markerElement = markerInstance.getElement();

            if (!markerElement) {
                return;
            }

            const svgElement = markerElement.querySelector('svg');
            if (svgElement) {
                svgElement.style.setProperty('color', markerColor, 'important');
                const pathElement = svgElement.querySelector('path');
                if (pathElement) {
                    pathElement.style.setProperty('fill', markerColor, 'important');
                }
            }
        }, 0);
    }

    this.markerColorMap.delete(markerId);
}

_onInfoWindowBeforeCreate(event) { }
_onInfoWindowAfterCreate(event) { }
_onPolygonBeforeCreate(event) { }
_onPolygonAfterCreate(event) { }
_onPolylineBeforeCreate(event) { }
_onPolylineAfterCreate(event) { }

}`

Cela m'a permis de changer la couleur de chaque marqueur indépendamment côté client (désolé pour l'affichage du code entre les balises je n'y arrive pas)

Peut être que cela peut être utile à quelqu'un ?

[Kocal]

Hi, it should be fixed by #2763, but it has not been released yet

[JeDeveloppe]

Oh sorry!

[Kocal]

No worries :)

I believe we will tag a new release in few hours or few days