Filament•2mo ago

Trying to modify filament form fields from custom Livewire Field component.

I want to be able to update a couple of fields in a filament 'step' based form by using a google-maps-api clickable map. I'm trying to learn livewire a bit more while doing it and am loading the map code into a livewire component, but I can't seem to figure out how you are supposed to take data coming back from the map 'click' listener event and then have filament update the lat and lng fields in the form. Since I strongly suspect all my attempts have been blind shots in the dark or are offtrack. So does anyone have any suggestions on how to do this?

7 Replies

treii28OP•2mo ago

First I create a rather bare-bones extension of 'Field' that points to a blade template:

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }" x-init="await fetchGoogle('initializeMap')">
        @livewire('click-map')
    </div>
</x-dynamic-component>

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }" x-init="await fetchGoogle('initializeMap')">
        @livewire('click-map')
    </div>
</x-dynamic-component>

fetchGoogle is just a promise based series of steps that first gets my API key, then downloads the google.maps api code using the key, then launches my initializeMap function. The map code works fine, but I don't know how to handle the 'click' listener or how to grab any of the resulting details back in filament to update the form:

// Configure the click listener.
window.clickmap.addListener("click", (mapsMouseEvent) => {
    this.state = {
        lat: mapsMouseEvent.latLng.lat(),
        lng: mapsMouseEvent.latLng.lng()
    };
});

// Configure the click listener.
window.clickmap.addListener("click", (mapsMouseEvent) => {
    this.state = {
        lat: mapsMouseEvent.latLng.lat(),
        lng: mapsMouseEvent.latLng.lng()
    };
});

The Filament Step form schema is rather basic:

protected function getSteps(): array
{
    return [
        FormComponents\Wizard\Step::make('Blind Location')
            ->description('Where is the blind located?')
            ->schema([
                AppFormComponents\GmapLocation::make('location')
                    ->live()
                    ->afterStateUpdated(function (Set $set, $state) {
                        set('lat', $state['location']['lat']);
                        set('lng', $state['location']['lng']);
                    })
                    ->label('Blind Location'),
                FormComponents\TextInput::make('lat')
                    ->reactive()
                    ->required(),
                FormComponents\TextInput::make('lng')
                    ->reactive()
                    ->required(),
            ])
            ->icon('heroicon-o-map-pin'),

protected function getSteps(): array
{
    return [
        FormComponents\Wizard\Step::make('Blind Location')
            ->description('Where is the blind located?')
            ->schema([
                AppFormComponents\GmapLocation::make('location')
                    ->live()
                    ->afterStateUpdated(function (Set $set, $state) {
                        set('lat', $state['location']['lat']);
                        set('lng', $state['location']['lng']);
                    })
                    ->label('Blind Location'),
                FormComponents\TextInput::make('lat')
                    ->reactive()
                    ->required(),
                FormComponents\TextInput::make('lng')
                    ->reactive()
                    ->required(),
            ])
            ->icon('heroicon-o-map-pin'),

the 'afterStateUpdated code never seems to run, so I'm not sure how to update the lat and lng fields using the map click. Any help is appreciated.

awcodes•2mo ago

Maybe one of these will work for you or at least give you some insight if you source dive. https://filamentphp.com/plugins?search=Maps

Filament

Plugins - Filament

Community made packages for Filament projects, which give you access to awesome new features.

bardolf_6969•2mo ago

one thing.. looking at your step you are using ->reactive(), in filament v3 use ->live() instead. reactive was v1 and v2 I believe

treii28OP•2mo ago

see, if the documentation was worth a pat-oootie, I would have known that! Thanks bardolf source diving those may be an option but I already looked at both of them for functionality and didn't see anything about overlays. The tool I'm toying with overlays a map the organization has used for almost a century over a google map. There's also an issue that I am marking locations in an undeveloped area of land. Not street addresses. Most of these tools are built for handling numeric addresses primarily. Finally there's the reason I'm doing this - to learn how the interaction between laravel/filament/livewire works. Using a pre-built tool that could solve the problem wouldn't necessarily teach me what I need to know.

awcodes•2mo ago

Sure, certainly not recommending them if they don’t suit your needs. But going through their code and seeing how it all hooks up and syncs back to the form / other fields could be a good learning experience.

treii28OP•2mo ago

locationpickr seems to have what I need within it - still spelunking the code to find the hand-off of the data, but it is similar enough to what I'm doing it shouldn't take me long to find it. worst case, I may fork it or cut-paste and just add the overlay to their code or add overlay functionality to it. Thanks. lulz joy, location picker doesn't support filament v3 - back to spelunking and/or cut-pasting

awcodes•2mo ago

Fork it. I’m sure they would appreciate a PR to make it work with v3. Or they might just turn it over to you if they have abandoned it.

Gaming

Programming

Trying to modify filament form fields from custom Livewire Field component.