meetup-events map

app/Http/Livewire/Meetup/MeetupEventTable.php

@@ -16,6 +16,18 @@ class MeetupEventTable extends Component
     public function render()
     {
         return view('livewire.meetup.meetup-event-table', [
+            'markers' => MeetupEvent::query()
+                                    ->with([
+                                        'meetup.city.country',
+                                    ])
+                                    ->whereHas('meetup.city.country',
+                                        fn($query) => $query->where('countries.code', $this->country->code))
+                                    ->get()
+                                    ->map(fn($event) => [
+                                        'id'     => $event->id,
+                                        'name'   => $event->meetup->name.': '.$event->location,
+                                        'coords' => [$event->meetup->city->latitude, $event->meetup->city->longitude],
+                                    ]),
             'events'  => MeetupEvent::query()
                                     ->get()
                                     ->map(fn($event) => [

resources/views/livewire/meetup/meetup-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"/>
@@ -69,6 +70,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: 800px"></div>
+                    </div>
+                </div>
+            </div>
 
             <livewire:tables.meetup-event-table :country="$country->code"/>
         </div>