map for events

app/Http/Livewire/BitcoinEvent/BitcoinEventTable.php

@@ -24,6 +24,18 @@ class BitcoinEventTable extends Component
     public function render()
     {
         return view('livewire.bitcoin-event.bitcoin-event-table', [
+            'markers' => BitcoinEvent::query()
+                               ->with([
+                                   'venue.city.country',
+                               ])
+                               ->whereHas('venue.city.country',
+                                   fn($query) => $query->where('countries.code', $this->country->code))
+                               ->get()
+                               ->map(fn($event) => [
+                                   'id'     => $event->id,
+                                   'name'   => $event->name,
+                                   'coords' => [$event->venue->city->latitude, $event->venue->city->longitude],
+                               ]),
             'events' => BitcoinEvent::query()
                                     ->get()
                                     ->map(fn($event) => [
@@ -36,6 +48,18 @@ class BitcoinEventTable extends Component
         ]);
     }
 
+    public function filterByMarker($id)
+    {
+        return to_route('bitcoinEvent.table.bitcoinEvent', [
+            'country' => $this->country->code,
+            'table'   => [
+                'filters' => [
+                    'byid' => $id,
+                ],
+            ]
+        ]);
+    }
+
     public function popover($content, $ids)
     {
         return to_route('bitcoinEvent.table.bitcoinEvent', [

resources/views/livewire/bitcoin-event/bitcoin-event-table.blade.php

@@ -4,7 +4,8 @@
     {{-- MAIN --}}
     <section class="w-full mb-12">
         <div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4" id="table">
-            <div class="">
+            <div class="flex items-start">
+                <div class="w-1/2">
 
                     <link rel="stylesheet" type="text/css"
                           href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css"/>
@@ -73,6 +74,46 @@
                         <div x-ref="calendar"></div>
                     </div>
                 </div>
+                <div class="w-1/2">
+                    <div
+                        wire:ignore
+                        class="w-full flex justify-center"
+                        x-data="{
+                            init() {
+                                let markers = {{ Js::from($markers) }};
+                                console.log(markers);
+
+                                $('#map').vectorMap({
+                                    zoomButtons : false,
+                                    zoomOnScroll: true,
+                                    map: '{{ $country->code }}_merc',
+                                    backgroundColor: 'transparent',
+                                    markers: markers.map(function(h){ return {name: h.name, latLng: h.coords} }),
+                                    onMarkerClick: function(event, index) {
+                                        $wire.call('filterByMarker', markers[index].id)
+                                    },
+                                    markerStyle: {
+                                        initial: {
+                                            image: '{{ asset('img/btc.png') }}',
+                                        }
+                                    },
+                                    regionStyle: {
+                                        initial: {
+                                            fill: '#151515'
+                                        },
+                                        hover: {
+                                            'fill-opacity': 1,
+                                            cursor: 'default'
+                                        },
+                                    }
+                                });
+                            }
+                        }"
+                    >
+                        <div id="map" style="width: 100%; height: 400px"></div>
+                    </div>
+                </div>
+            </div>
 
             <livewire:tables.bitcoin-event-table :country="$country->code"/>
         </div>

resources/views/livewire/meetup/meetup-table.blade.php

@@ -13,6 +13,7 @@
             <p class="px-0 mb-6 text-lg text-gray-600 md:text-xl lg:px-24"> Finde Bitcoiner in deiner Stadt und lerne
                 sie auf einem der Meetups kennen. </p>
             <div
+                wire:ignore
                 class="w-full flex justify-center"
                 x-data="{
                     init() {