[Map] Console error when displaying a map using a Live Component

[LaurentSanson]

After update to SF UX 2.2, i've got an error with showing the map using a Live Component.

Before 2.2, I had to create the ComponentWithMapTrait in my repo, and it worked just fine, but since the update today, I've got this error in the console when trying to see a Position on the map. On my form it still works well.

stimulus.index-b5b1d…b4a1e94e3bc92a.js:7 Error connecting controller

TypeError: Cannot read properties of null (reading 'lat')
    at Object.project (leaflet.index-0fc72e…45ac26ac.js:7:14529)
    at Object.latLngToPoint (leaflet.index-0fc72e…45ac26ac.js:7:13167)
    at e.project (leaflet.index-0fc72e…45ac26ac.js:7:37903)
    at e._getNewPixelOrigin (leaflet.index-0fc72e…45ac26ac.js:7:44363)
    at e._move (leaflet.index-0fc72e…45ac26ac.js:7:40715)
    at e._resetView (leaflet.index-0fc72e…45ac26ac.js:7:40423)
    at e.setView (leaflet.index-0fc72e…45ac26ac.js:7:28465)
    at e.initialize (leaflet.index-0fc72e…45ac26ac.js:7:27756)
    at new e (leaflet.index-0fc72e…e45ac26ac.js:7:2997)
    at Module.si (leaflet.index-0fc72e…45ac26ac.js:7:48247)

<?php

namespace App\Twig\Components;

use App\Entity\Position;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;
use Symfony\UX\Map\Live\ComponentWithMapTrait;
use Symfony\UX\Map\Map;
use Symfony\UX\Map\Marker;
use Symfony\UX\Map\Point;

#[AsLiveComponent]
final class MapComponent
{
    use DefaultActionTrait;
    use ComponentWithMapTrait;

    #[LiveProp]
    public ?Position $position = null;

    protected function instantiateMap(): Map
    {
        if (!$this->position?->getLatitude() && !$this->position?->getLongitude()) {
            return (new Map())
                ->center(new Point(48.8566, 2.3522))
                ->zoom(6);
        }

        return (new Map())
            ->addMarker(
                new Marker(
                    new Point(floatval($this->position->getLatitude()), floatval($this->position->getLongitude())),
                )
            )
            ->fitBoundsToMarkers();
    }
}

<twig:DashboardCard>
                    <twig:block name="title">Localisation</twig:block>
                    <twig:block name="content">
                        {% if mission.position.latitude %}
                            <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
                                <twig:MapComponent position="{{ mission.position }}"/>
                            </div>
                        {% else %}
                            <p class="text-gray-600 dark:text-gray-400">
                                Aucune position pour cette mission
                            </p>
                        {% endif %}
                    </twig:block>
                </twig:DashboardCard>

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

export default class extends Controller
{
    L;
    map;
    markers;
    static targets = ['latitude', 'longitude'];

    connect() {
        this._onConnect = this._onConnect.bind(this);
        this._onMapClick = this._onMapClick.bind(this);
        this.element.addEventListener('ux:map:connect', this._onConnect);
    }
    disconnect() {
        this.element.removeEventListener('ux:map:connect', this._onConnect);
    }

    _onConnect(event) {
        this.L = event.detail.L;
        this.map = event.detail.map;
        this.markers = event.detail.markers;

        this.map.on('click', this._onMapClick);
    }

    _onMapClick(event) {
        this.removeAllMarkers();
        this.createMarker(event.latlng)
        if (this.latitudeTarget && this.longitudeTarget) {
            this._addPositionToForm(event.latlng);
        }
    }

    createMarker(position) {
        const marker = this.L.marker(position).addTo(this.map);
        this.markers.push(marker);
    }

    removeAllMarkers() {
        this.markers.forEach(marker => marker.remove());
        this.markers = [];
    }

    _addPositionToForm(position) {
        this.latitudeTarget.value = position.lat;
        this.longitudeTarget.value = position.lng;
    }
}

[Kocal]

Hi @LaurentSanson and sorry that.

Thanks to your reproducer, I've been able to reproduce it and I just opened #2420, can you tell me if it fixes your issue?

[LaurentSanson]

Hi Hugo, Thanks for the quick reply. I'll try tomorrow morning and let you know. Cheers, Laurent Le lun. 2 déc. 2024, 19:07, Hugo Alliaume ***@***.***> a écrit :

…

Hi @LaurentSanson <https://github.com/LaurentSanson> and sorry that. Thanks to your reproducer, I've been able to reproduce it and I just opened #2420 <#2420>, can you tell me if it fixes your issue? — Reply to this email directly, view it on GitHub <#2417 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANPER5SB6KXVN4DKM5LB6V32DSOWVAVCNFSM6AAAAABS3JHFN6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMJSGMYTONRUGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[LaurentSanson]

Morning @Kocal, I've tried it this morning and this is good for me! Well done 💪

[Kocal]

Hey Laurent, perfect :)

I will merge soon, hoping for a new release fast (can be delayed a bit due to the SymfonyCon).
For the moment I suggest you to lock your symfony/ux-map dependencies to 2.21 🙏🏻