book case world map added

app/Http/Livewire/BookCase/WorldMap.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Livewire\BookCase;
+
+use App\Models\BookCase;
+use App\Models\Country;
+use Livewire\Component;
+
+class WorldMap extends Component
+{
+    public Country $country;
+
+    public function render()
+    {
+        return view('livewire.book-case.world-map', [
+            'mapData' => BookCase::query()
+                                 ->select(['id', 'latitude', 'longitude'])
+                                 ->withCount('orangePills')
+                                 ->get()
+                                 ->map(fn($bookCase) => [
+                                     'lat' => $bookCase->latitude,
+                                     'lng' => $bookCase->longitude,
+                                     'url' => url()->route('bookCases.table.bookcases',
+                                         [
+                                             'country'   => $this->country,
+                                             'bookcases' => [
+                                                 'filters' => [
+                                                     'byids' => $bookCase->id,
+                                                 ]
+                                             ]
+                                         ]),
+                                     'op'  => $bookCase->count_orange_pills,
+                                 ])
+                                 ->toArray(),
+        ]);
+    }
+}

resources/views/livewire/book-case/world-map.blade.php

@@ -0,0 +1,54 @@
+<div
+    id="matrix"
+    class="h-screen justify-between relative">
+    {{-- HEADER --}}
+    <livewire:frontend.header :country="$country" bgColor="bg-transparent"/>
+    {{-- MAIN --}}
+    <section class="w-full mb-12">
+        <div class="max-w-screen-2xl mx-auto px-2 sm:px-10">
+
+            <h1 class="text-xl font-bold py-4 text-gray-200">
+                {{ __('World Map') }}
+            </h1>
+
+            <div
+                x-data="{
+                    data: @js($mapData),
+                    init() {
+
+                        var baseLayer = L.tileLayer(
+                            'https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png',{
+                                attribution: 'Map tiles by <a href=\'http://stamen.com\'>Stamen Design</a>, <a href=\'http://creativecommons.org/licenses/by/3.0\'>CC BY 3.0</a> &mdash; Map data &copy; <a href=\'http://www.openstreetmap.org/copyright\'>OpenStreetMap</a>',
+                            }
+                        );
+
+                        var map = new L.Map($refs.map, {
+                            preferCanvas: true,
+                            center: new L.LatLng(51.1642,10.4541194),
+                            zoom: 6,
+                            layers: [baseLayer]
+                        });
+
+                        this.data.forEach(element => {
+                            if(element.op > 0) {
+                                const marker = L.circleMarker([element.lat, element.lng], {color: '#f7931a', radius: 8});
+                                marker.url = element.url;
+                                marker.addTo(map).on('click', e => window.open(e.target.url, '_blank'));
+                            } else {
+                                const marker = L.circleMarker([element.lat, element.lng], {color: '#111827', radius: 8});
+                                marker.url = element.url;
+                                marker.addTo(map).on('click', e => window.open(e.target.url, '_blank'));
+                            }
+                        });
+
+                    }
+                }"
+            >
+                <div x-ref="map" style="height: 70vh;"></div>
+            </div>
+
+        </div>
+    </section>
+    {{-- FOOTER --}}
+    <livewire:frontend.footer/>
+</div>

resources/views/livewire/frontend/header.blade.php

@@ -82,6 +82,10 @@
                                    class="{{ request()->routeIs('bookCases.table.bookcases') ? 'text-amber-500 underline' : 'text-gray-400' }} mr-5 font-medium leading-6 hover:text-gray-300">
                                     {{ __('Bookcases') }}
                                 </a>
+                                <a href="{{ route('bookCases.world', ['country' => $c]) }}"
+                                   class="{{ request()->routeIs('bookCases.world') ? 'text-amber-500 underline' : 'text-gray-400' }} mr-5 font-medium leading-6 hover:text-gray-300">
+                                    {{ __('World Map') }}
+                                </a>
                                 <a href="{{ route('bookCases.heatmap', ['country' => $c]) }}"
                                    class="{{ request()->routeIs('bookCases.heatmap') ? 'text-amber-500 underline' : 'text-gray-400' }} mr-5 font-medium leading-6 hover:text-gray-300">
                                     {{ __('Heatmap') }}

routes/web.php

@@ -125,6 +125,9 @@ Route::middleware([])
          Route::get('/heatmap', \App\Http\Livewire\BookCase\Heatmap::class)
               ->name('heatmap');
 
+         Route::get('/world-map', \App\Http\Livewire\BookCase\WorldMap::class)
+              ->name('world');
+
          Route::get('/overview', \App\Http\Livewire\BookCase\BookCaseTable::class)
               ->name('table.bookcases');