load map

app/Livewire/Nostr/Start.php

@@ -2,16 +2,33 @@
 
 namespace App\Livewire\Nostr;
 
+use App\Models\Meetup;
 use App\Models\User;
 use Livewire\Component;
 
 class Start extends Component
 {
     public ?User $user = null;
+    public array $geoJsons = [];
 
     public function setUser($value)
     {
-        $this->user = User::query()->with(['meetups'])->where('nostr', $value['npub'])->first();
+        $this->user = User::query()
+            ->with([
+                'meetups.city',
+            ])
+            ->where('nostr', $value['npub'])
+            ->first();
+
+        $this->geoJsons = Meetup::query()
+            ->with([
+                'city',
+            ])
+            ->get()
+            ->pluck('city.simplified_geojson')
+            ->filter()
+            ->values()
+            ->toArray();
     }
 
     public function render()

resources/views/components/layouts/app.blade.php

@@ -14,6 +14,8 @@
     {{-- Fonts --}}
     @googlefonts
     {{-- Scripts --}}
+    @mapscripts
+    @include('components.layouts.scripts')
     <script src="https://kit.fontawesome.com/866fd3d0ab.js" crossorigin="anonymous"></script>
     <x-embed-styles/>
     @wireUiScripts

resources/views/components/layouts/guest.blade.php

@@ -14,6 +14,8 @@
     {{-- Fonts --}}
     @googlefonts
     {{-- Scripts --}}
+    @mapscripts
+    @include('components.layouts.scripts')
     <script src="https://kit.fontawesome.com/866fd3d0ab.js" crossorigin="anonymous"></script>
     <x-embed-styles/>
     @wireUiScripts

resources/views/components/layouts/scripts.blade.php

@@ -0,0 +1,4 @@
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+      crossorigin=""/>
+<script src="{{ asset('dist/leaflet-providers.js') }}"></script>

resources/views/livewire/nostr/start.blade.php

@@ -1,12 +1,46 @@
 <div x-data="nostrStart(@this)">
+    <div class="p-16">
+        <div
+            wire:ignore
+            x-data="{
+                geoJsons: @entangle('geoJsons'),
+                map: null,
+                init() {
+                    this.map = L.map(this.$refs.map).setView([51.1642, 10.4541194], 6);
+                    var baseLayer = L.tileLayer(
+                        'https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png',{
+                            attribution: '&copy; <a href=\'https://www.openstreetmap.org/copyright\'>OpenStreetMap</a> contributors &copy; <a href=\'https://carto.com/attributions\'>CARTO</a>',
+                        }
+                    ).addTo(this.map);
 
-    <div class="flex flex-col">
+                    function generateSimilarColor(baseColor, variance) {
-        @if($user)
+                        var baseR = parseInt(baseColor.slice(1, 3), 16);
-           @foreach($user->meetups as $meetup)
+                        var baseG = parseInt(baseColor.slice(3, 5), 16);
-               <div>
+                        var baseB = parseInt(baseColor.slice(5, 7), 16);
-                   {{ $meetup->name }}
+                        var newR = Math.floor((Math.random() - 0.5) * variance + baseR).toString(16).padStart(2, '0');
-               </div>
+                        var newG = Math.floor((Math.random() - 0.5) * variance + baseG).toString(16).padStart(2, '0');
-           @endforeach
+                        var newB = Math.floor((Math.random() - 0.5) * variance + baseB).toString(16).padStart(2, '0');
-        @endif
+                        return `#${newR}${newG}${newB}`;
+                    }
+
+                    this.$watch('geoJsons', (geoJsons) => {
+                        geoJsons.forEach((geoJson) => {
+                            L.geoJSON(geoJson, {
+                                style: function (feature) {
+                                    return {
+                                        color: generateSimilarColor('#0d579b', 20),
+                                        fillColor: generateSimilarColor('#f7931a', 20),
+                                        weight: 1,
+                                        opacity: 1,
+                                    };
+                                },
+                            }).addTo(this.map);
+                        });
+                    });
+                }
+            }"
+        >
+            <div class="w-full" x-ref="map" style="height: 70vh;"></div>
+        </div>
     </div>
 </div>