[Map] Console error when displaying a map using a Live Component #2417
Description
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;
}
}