Implement LocationDisplayComponent and LocationMapComponent for interactive map features; add event handling and state management

app/Livewire/Location/LocationMapComponent.php

@@ -0,0 +1,162 @@
+<?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()
+        ]);
+    }
+}