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?

treii28OP•11/20/24, 9:08 PM

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

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:

The Filament Step form schema is rather basic:

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•11/20/24, 10:08 PM

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•11/21/24, 12:00 AM

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

treii28OP•11/21/24, 2:39 PM

see, if the documentation was worth a pat-oootie, I would have known that! Thanks bardolf

Aawcodes Maybe one of these will work for you or at least give you some insight if you so...

treii28OP•11/21/24, 3:37 PM

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.

Ttreii28 source diving those may be an option but I already looked at both of them for fu...

awcodes•11/21/24, 3:39 PM

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•11/21/24, 3:44 PM

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.

treii28OP•11/21/24, 3:48 PM

lulz joy, location picker doesn't support filament v3 - back to spelunking and/or cut-pasting

awcodes•11/21/24, 10:44 PM

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.