copy embed code

app/Http/Livewire/Meetup/Embed/CountryMap.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Http\Livewire\Meetup\Embed;
+
+use App\Models\Country;
+use App\Models\Meetup;
+use Livewire\Component;
+use RalphJSmit\Laravel\SEO\Support\SEOData;
+
+class CountryMap extends Component
+{
+    public Country $country;
+
+    public function render()
+    {
+        return view('livewire.meetup.embed.country-map', [
+            'markers' => Meetup::query()
+                               ->with([
+                                   'city.country',
+                               ])
+                               ->whereHas('city.country',
+                                   fn($query) => $query->where('countries.code', $this->country->code))
+                               ->get()
+                               ->map(fn($meetup) => [
+                                   'id'     => $meetup->id,
+                                   'name'   => $meetup->name,
+                                   'coords' => [$meetup->city->latitude, $meetup->city->longitude],
+                                   'url'    => url()->route('meetup.landing', [
+                                       'country' => $meetup->city->country->code,
+                                       'meetup'  => $meetup,
+                                   ]),
+                               ]),
+        ])->layout('layouts.app', [
+            'SEOData' => new SEOData(
+                title: __('Meetups'),
+                description: __('Bitcoiner Meetups are a great way to meet other Bitcoiners in your area. You can learn from each other, share ideas, and have fun!'),
+                image: asset('img/screenshot.png')
+            ),
+        ]);
+    }
+}

app/Http/Livewire/Meetup/MeetupTable.php

@@ -11,6 +11,14 @@ class MeetupTable extends Component
 {
     public Country $country;
 
+    public string $mapEmbedCode = '';
+
+    public function mount()
+    {
+        $this->mapEmbedCode = '<iframe src="'.url()->route('meetup.embed.countryMap',
+                ['country' => $this->country->code]).'" width="100%" height="500" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>';
+    }
+
     public function filterByMarker($id)
     {
         $meetup = Meetup::with(['city.country'])

resources/views/livewire/meetup/embed/country-map.blade.php

@@ -0,0 +1,50 @@
+<div class="h-full">
+    @php
+        $focus = '';
+        $map = $country->code . '_merc';
+        if (!\File::exists(public_path('vendor/jvector/maps/' . $country->code . '.js'))) {
+            $map = 'europe_merc';
+            $focus = 'focusOn: {lat:'.$country->latitude.',lng:'.$country->longitude.',scale:8,animate:true},';
+        }
+    @endphp
+    <div
+        wire:ignore
+        class="w-full flex justify-center h-full"
+        x-data="{
+            init() {
+                let markers = {{ Js::from($markers) }};
+
+                $('#map').vectorMap({
+                    {{ $focus }}
+                    zoomButtons : true,
+                    zoomOnScroll: true,
+                    map: '{{ $map }}',
+                    backgroundColor: 'transparent',
+                    markers: markers.map(function(h){ return {name: h.name, latLng: h.coords, url: h.url} }),
+                    onMarkerClick: function(event, index) {
+                        window.open(
+                          markers[index].url,
+                          '_blank'
+                        );
+                    },
+                    markerStyle: {
+                        initial: {
+                            image: '{{ asset('img/btc.png') }}',
+                        }
+                    },
+                    regionStyle: {
+                        initial: {
+                            fill: '#151515'
+                        },
+                        hover: {
+                            'fill-opacity': 1,
+                            cursor: 'default'
+                        },
+                    }
+                });
+            }
+        }"
+    >
+        <div id="map" style="width: 100%; height: 100vh;" class="my-4 sm:my-0"></div>
+    </div>
+</div>

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

@@ -5,6 +5,7 @@
     <section class="w-full mb-12">
         <div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4 py-4">
             <div class="w-full flex justify-end">
+                <div class="flex flex-col space-y-2">
                     <x-button
                         x-data="{
                     textToCopy: '{{ route('meetup.ics', ['country' => $country]) }}',
@@ -14,6 +15,16 @@
                         <i class="fa fa-thin fa-calendar-arrow-down mr-2"></i>
                         {{ __('Calendar Stream-Url for all meetup events') }}
                     </x-button>
+                    <x-button
+                        x-data="{
+                        textToCopy: '{{ $mapEmbedCode }}',
+                    }"
+                        @click.prevent="window.navigator.clipboard.writeText(textToCopy);window.$wireui.notify({title:'{{ __('Embed code for the map copied!') }}',icon:'success'});"
+                        amber>
+                        <i class="fa fa-thin fa-code mr-2"></i>
+                        {{ __('Copy embed code for the map') }} <img class="h-6 rounded" src="{{ asset('vendor/blade-country-flags/4x3-'. $country->code .'.svg') }}" alt="{{ $country->code }}">
+                    </x-button>
+                </div>
             </div>
             <div class="flex flex-col sm:flex-row">
                 @php

routes/web.php

@@ -294,6 +294,9 @@ Route::middleware([])
          Route::get('overview', \App\Http\Livewire\Meetup\MeetupTable::class)
               ->name('table.meetup');
 
+         Route::get('embed', \App\Http\Livewire\Meetup\Embed\CountryMap::class)
+              ->name('embed.countryMap');
+
          Route::get('/meetup/form/{meetup?}', \App\Http\Livewire\Meetup\Form\MeetupForm::class)
               ->name('meetup.form')
               ->middleware([