Leaflet Map Not Visible After State Binding in a Custom Filament v3 Component

[adiartawibawa]

Package

Form builder

Package Version

v3.0.0

How can we help you?

Hi everyone,

I'm working on a custom form component for Filament v3 that integrates a Leaflet map with Livewire and Alpine.js. The goal is to allow users to interact with the map (e.g., add markers) and have the data synchronized with Livewire state. The map should also render any existing GeoJSON data from the database.

However, I'm facing an issue where the map becomes invisible after successfully binding data to the Livewire state. The browser console throws the following error:

Uncaught TypeError: t.parentNode is null

What I've Implemented So Far:

1. I created a custom component called MapPicker with Livewire state synchronization. It is used in the form like this:

   Forms\Components\Textarea::make('coordinate'),
   MapPicker::make('lokasi')
       ->columnSpanFull()
       ->afterStateUpdated(function (Set $set, $state): void {
           $set('coordinate', $state); // Sync map data to 'coordinate' field
       })
       ->afterStateHydrated(function (Set $set, $record, $state): void {
           $set('lokasi', json_decode($record->state)); // Load map data from the database
       })
       ->defaultLocation(-8.6028207, 115.1376671)
       ->geoManOptions([
           'editMode: true',
           'dragMode: true',
           'deleteLayer: true',
       ])
       ->singleFeature(true),

2. GeoJSON data, like the example below, is used to represent the map's state:

   [{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[115.131226,-8.623114]}}]

3. Here's the Blade code rendering the map:

   <x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
       <div x-data="mapPicker({
           state: $wire.$entangle('{{ $getStatePath() }}'), 
           options: {{ json_encode($getExtraData()) }}, 
       })" x-init="initializeMap();" class="w-full {{ $getExtraData()['mapHeight'] ?? 'h-96' }}">
           <div id="{{ $getStatePath() }}-map" class="w-full h-full"></div>
       </div>
   </x-dynamic-component>

4. The initializeMap() function in my Alpine.js script:

   initializeMap() {
       setTimeout(() => {
           const mapElement = document.getElementById('{{ $getStatePath() }}-map');
           if (!mapElement) {
               console.error('Map element not found');
               return;
           }
   
           if (this.map) {
               this.map.remove(); // Reset the map instance
           }
   
           this.map = L.map(mapElement).setView([115.131226, -8.623114], 13);
   
           L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(this.map);
   
           // Load GeoJSON from state
           if (state && state.length > 0) {
               const geoJsonData = JSON.parse(state);
               geoJsonData.forEach((geoJson) => {
                   const layer = L.geoJSON(geoJson).addTo(this.map);
                   this.layers.push(layer);
                   this.addDragListener(layer);
               });
           }
       }, 100);
   }

The Problem:

• After binding the GeoJSON data to the Livewire state, the map is no longer visible.
• The console logs the error: Uncaught TypeError: t.parentNode is null.

Questions:

1. What could cause the error Uncaught TypeError: t.parentNode is null in Leaflet when working with Livewire and Alpine.js?
2. Is there a more reliable way to ensure that the map container is ready before initializing Leaflet?
3. How can I best handle re-rendering or reinitializing the map after Livewire state updates in Filament v3?
4. Is my usage of afterStateHydrated and afterStateUpdated correct for this use case, or is there a better way to bind and rehydrate the state?

Any guidance or suggestions would be greatly appreciated! Thank you in advance. 😊