PHP code example of dotswan / filament-map-picker

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

dotswan / filament-map-picker example snippets

namespace App\Filament\Resources;
use Filament\Resources\Resource;
use Filament\Resources\Forms\Form;
use Dotswan\MapPicker\Fields\Map;
...

class FilamentResource extends Resource
{
    ...
    public static function form(Form $form)
    {
        return $form->schema([
            Map::make('location')
                ->label('Location')
                ->columnSpanFull()
                // Basic Configuration
                ->defaultLocation(latitude: 40.4168, longitude: -3.7038)
                ->draggable(true)
                ->clickable(true) // click to move marker
                ->zoom(15)
                ->minZoom(0)
                ->maxZoom(28)
                ->tilesUrl("https://tile.openstreetmap.de/{z}/{x}/{y}.png")
                ->detectRetina(true)
                
                // Marker Configuration
                ->showMarker(true)
                ->markerColor("#3b82f6")
                ->markerHtml('<div class="custom-marker">...</div>')
                ->markerIconUrl('/path/to/marker.png')
                ->markerIconSize([36, 36])
                ->markerIconClassName('my-marker-class')
                ->markerIconAnchor([18, 36])
                
                // Controls
                ->showFullscreenControl(true)
                ->showZoomControl(true)
                
                // Location Features
                ->liveLocation(true, true, 5000)
                ->showMyLocationButton(true)
                ->boundaries(true, 49.5, -11, 61, 2) // Example for British Isles
                ->rangeSelectField('distance')
                
                // GeoMan Integration
                ->geoMan(true)
                ->geoManEditable(true)
                ->geoManPosition('topleft')
                ->drawCircleMarker(true)
                ->rotateMode(true)
                ->drawMarker(true)
                ->drawPolygon(true)
                ->drawPolyline(true)
                ->drawCircle(true)
                ->drawRectangle(true)
                ->drawText(true)
                ->dragMode(true)
                ->cutPolygon(true)
                ->editPolygon(true)
                ->deleteLayer(true)
                ->setColor('#3388ff')
                ->setFilledColor('#cad9ec')
                ->snappable(true, 20)
                
                // Extra Customization
                ->extraStyles([
                    'min-height: 150vh',
                    'border-radius: 50px'
                ])
                ->extraControl(['customControl' => true])
                ->extraTileControl(['customTileOption' => 'value'])
                
                // State Management
                ->afterStateUpdated(function (Set $set, ?array $state): void {
                    $set('latitude', $state['lat']);
                    $set('longitude', $state['lng']);
                    $set('geojson', json_encode($state['geojson']));
                })
                ->afterStateHydrated(function ($state, $record, Set $set): void {
                    $set('location', [
                        'lat' => $record->latitude,
                        'lng' => $record->longitude,
                        'geojson' => json_decode(strip_tags($record->description))
                    ]);
                })
        ]);
    }
    ...
}

use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\Actions;
use Filament\Support\Enums\VerticalAlignment;

Actions::make([
    Action::make('Set Default Location')
        ->icon('heroicon-m-map-pin')
        ->action(function (Set $set, $state, $livewire): void {
            $set('location', ['lat' => '52.35510989541003', 'lng' => '4.883422851562501']);
            $set('latitude', '52.35510989541003');
            $set('longitude', '4.883422851562501');
            $livewire->dispatch('refreshMap');
        })
])->verticalAlignment(VerticalAlignment::Start);

Map::make('location')
  ->defaultLocation(latitude: 40.4168, longitude: -3.7038)
  ->showMarker(true)
  ->clickable(true)
  ->tilesUrl("https://tile.openstreetmap.de/{z}/{x}/{y}.png")
  ->zoom(12)

Fieldset::make('Location')
    ->schema([
        Select::make('membership_distance')
            ->enum(MembershipDistance::class)
            ->options(MembershipDistance::class)
            ->omControl()
            ->tilesUrl("https://tile.openstreetmap.de/{z}/{x}/{y}.png")
            ->zoom(12)
            ->detectRetina()
            ->rangeSelectField('membership_distance')
            ->setFilledColor('#cad9ec'),
    ])
    ->columns(1),

Map::make('location')
    ->liveLocation(true, true, 10000)  // Updates live location every 10 seconds
    ->showMarker()
    ->draggable()

Map::make('location')
    ->showMarker()
    ->boundaries(true,49,11.1,61.0,2.1)
    ->draggable()

use Dotswan\MapPicker\Infolists\MapEntry;

public static function infolist(Infolist $infolist): Infolist
{
    return $infolist
        ->schema([
            MapEntry::make('location')
                // Basic Configuration
                ->defaultLocation(latitude: 40.4168, longitude: -3.7038)
                ->draggable(false) // Usually false for infolist view
                ->zoom(15)
                ->minZoom(0)
                ->maxZoom(28)
                ->tilesUrl("https://tile.openstreetmap.de/{z}/{x}/{y}.png")
                ->detectRetina(true)
                
                // Marker Configuration
                ->showMarker(true)
                ->markerColor("#22c55eff")
                ->markerHtml('<div class="custom-marker">...</div>')
                ->markerIconUrl('/path/to/marker.png')
                ->markerIconSize([36, 36])
                ->markerIconClassName('my-marker-class')
                ->markerIconAnchor([18, 36])
                
                // Controls
                ->showFullscreenControl(true)
                ->showZoomControl(true)
                
                // GeoMan Integration (if needed for viewing)
                ->geoMan(true)
                ->geoManEditable(false) // Usually false for infolist view
                ->geoManPosition('topleft')
                ->drawCircleMarker(true)
                ->drawMarker(true)
                ->drawPolygon(true)
                ->drawPolyline(true)
                ->drawCircle(true)
                ->drawRectangle(true)
                ->drawText(true)
                
                // Styling
                ->extraStyles([
                    'min-height: 50vh',
                    'border-radius: 50px'
                ])
                
                // State Management
                ->state(fn ($record) => [
                    'lat' => $record?->latitude,
                    'lng' => $record?->longitude,
                    'geojson' => $record?->geojson ? json_decode($record->geojson) : null
                ])
        ]);
}

$table->double('latitude')->nullable();
$table->double('longitude')->nullable();

->afterStateHydrated(function ($state, $record, Set $set): void {
    $set('location', ['lat' => $record?->latitude, 'lng' => $record?->longitude]);
})

TextInput::make('latitude')
    ->hiddenLabel()
    ->hidden(),

TextInput::make('longitude')
    ->hiddenLabel()
    ->hidden()

class YourModel extends Model
{
    protected function location(): Attribute
    {
        return Attribute::make(
            get: fn (mixed $value, array $attributes) => [
                'latitude' => $attributes['latitude'],
                'longitude' => $attributes['longitude']
            ],
            set: fn (array $value) => [
                'latitude' => $value['latitude'],
                'longitude' => $value['longitude']
            ],
        );
    }
}