thrillwiki_laravel/app/Livewire/Location/LocationMapComponent.php

<?php

namespace App\Livewire\Location;

use Livewire\Component;
use Livewire\Attributes\Reactive;
use App\Services\GeocodeService;

class LocationMapComponent extends Component
{
    /**
     * The initial latitude for the map center
     */
    #[Reactive]
    public ?float $latitude = null;

    /**
     * The initial longitude for the map center
     */
    #[Reactive]
    public ?float $longitude = null;

    /**
     * The map zoom level (1-18)
     */
    #[Reactive]
    public int $zoom = 13;

    /**
     * Array of markers to display on the map
     */
    #[Reactive]
    public array $markers = [];

    /**
     * Currently selected location details
     */
    #[Reactive]
    public ?array $selectedLocation = null;

    /**
     * Whether the map is in interactive mode
     */
    #[Reactive]
    public bool $interactive = true;

    /**
     * Whether to show the map controls
     */
    #[Reactive]
    public bool $showControls = true;

    /**
     * Event listeners for the component
     */
    protected $listeners = [
        'locationSelected' => 'handleLocationSelected',
        'markerClicked' => 'handleMarkerClicked',
        'mapMoved' => 'handleMapMoved',
        'zoomChanged' => 'handleZoomChanged'
    ];

    /**
     * Mount the component
     */
    public function mount(
        ?float $latitude = null,
        ?float $longitude = null,
        ?int $zoom = null,
        array $markers = [],
        bool $interactive = true,
        bool $showControls = true
    ) {
        $this->latitude = $latitude;
        $this->longitude = $longitude;
        $this->zoom = $zoom ?? $this->zoom;
        $this->markers = $markers;
        $this->interactive = $interactive;
        $this->showControls = $showControls;
    }

    /**
     * Handle when a location is selected
     */
    public function handleLocationSelected(array $location)
    {
        $this->selectedLocation = $location;
        $this->latitude = $location['latitude'];
        $this->longitude = $location['longitude'];
        
        $this->dispatch('location-updated', [
            'latitude' => $this->latitude,
            'longitude' => $this->longitude,
            'location' => $location
        ]);
    }

    /**
     * Handle when a marker is clicked
     */
    public function handleMarkerClicked(array $marker)
    {
        $this->selectedLocation = $marker;
        
        $this->dispatch('marker-selected', [
            'marker' => $marker
        ]);
    }

    /**
     * Handle when the map is moved
     */
    public function handleMapMoved(float $latitude, float $longitude)
    {
        $this->latitude = $latitude;
        $this->longitude = $longitude;

        $this->dispatch('map-moved', [
            'latitude' => $latitude,
            'longitude' => $longitude
        ]);
    }

    /**
     * Handle when the zoom level changes
     */
    public function handleZoomChanged(int $zoom)
    {
        $this->zoom = $zoom;

        $this->dispatch('zoom-changed', [
            'zoom' => $zoom
        ]);
    }

    /**
     * Get the map configuration
     */
    protected function getMapConfig(): array
    {
        return [
            'center' => [
                'lat' => $this->latitude,
                'lng' => $this->longitude,
            ],
            'zoom' => $this->zoom,
            'markers' => $this->markers,
            'interactive' => $this->interactive,
            'showControls' => $this->showControls,
        ];
    }

    /**
     * Render the component
     */
    public function render()
    {
        return view('livewire.location.location-map', [
            'mapConfig' => $this->getMapConfig()
        ]);
    }
}