Filament•14mo ago

Building a custom form field to manage a collection of coordinates using Leaflet

Hey, Thanks for building Filament this is awesome work. I'm currently working on a custom form field to manage a collection of coordinates using leaflet. The idea is that the user should be able to click on the map to add coordinates to the collection and click on a coordinate to delete it. The data is stored in a single JSON field in DB. I already created a view component :

Forms\Components\ViewField::make('coordinates')
  ->view('filament.forms.components.race-map')
  ->columnSpanFull()

Forms\Components\ViewField::make('coordinates')
  ->view('filament.forms.components.race-map')
  ->columnSpanFull()

But I'm now stuck at writing the actual content of filament.forms.components.race-map, should I write a specific Alpine directive to manage the whole thing ? Any directions ?

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">
        <pre x-text="JSON.stringify(JSON.parse(state))"></pre> <!-- "[[1, 2], [3, 4]]" -->
        <!-- What should I do ? --> 
    </div>
</x-dynamic-component>

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">
        <pre x-text="JSON.stringify(JSON.parse(state))"></pre> <!-- "[[1, 2], [3, 4]]" -->
        <!-- What should I do ? --> 
    </div>
</x-dynamic-component>

Thanks in advance !

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Building a custom form field to manage a collection of coordinates using Leaflet