merge with geojson easify repo

.env.example

@@ -23,7 +23,7 @@ SESSION_LIFETIME=120
 
 MEMCACHED_HOST=127.0.0.1
 
-REDIS_HOST=127.0.0.1
+REDIS_HOST=redis
 REDIS_PASSWORD=null
 REDIS_PORT=6379
 
@@ -55,3 +55,5 @@ VITE_PUSHER_HOST="${PUSHER_HOST}"
 VITE_PUSHER_PORT="${PUSHER_PORT}"
 VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
 VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+
+CIPHERSWEET_KEY=b130a919cba9b7745d4b0144533308f2ffa38476cf562175aab8ca9f0e9648f1

README.md

@@ -20,21 +20,21 @@ docker run --rm \
 
 ```vendor/bin/sail up -d```
 
+### Migrate and seed the database
+
+```./vendor/bin/sail artisan migrate:fresh --seed```
+
 #### Install node dependencies
 
 ```vendor/bin/sail yarn install```
 
-#### Start compiling watcher
+#### Start just in time compiler
 
 ```vendor/bin/sail yarn dev```
 
-#### Compile assets
-
-```vendor/bin/sail yarn build```
-
 #### Update dependencies
 
-```vendor/bin/sail yarn install```
+```vendor/bin/sail yarn```
 
 ## Contributing
 

app/Http/Livewire/Meetup/PrepareForBtcMapItem.php

@@ -3,6 +3,7 @@
 namespace App\Http\Livewire\Meetup;
 
 use App\Models\Meetup;
+use Illuminate\Http\Client\Pool;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Storage;
 use Livewire\Component;
@@ -14,138 +15,322 @@ class PrepareForBtcMapItem extends Component
 
     public Meetup $meetup;
 
+    public $model;
+
+    public string $search = '';
+
     public $population;
-    public $population_date;
+    public $population_date = '';
-    public $osmSearchResults;
-    public $osmSearchResultsState;
-    public $osmSearchResultsCountry;
 
-    public $selectedItem;
+    public ?int $osm_id = null;
 
-    public function rules()
+    public array $osmSearchResults = [];
+
+    public $selectedItemOSMPolygons;
+
+    public $selectedItemOSMBoundaries;
+
+    public $selectedItemPolygonsOSMfr;
+
+    public $polygonsOSMfrX = 0.020000;
+
+    public $polygonsOSMfrY = 0.005000;
+
+    public $polygonsOSMfrZ = 0.005000;
+
+    public $currentPercentage = 100;
+
+    public bool $OSMBoundaries = false;
+
+    public bool $polygonsOSMfr = false;
+
+    protected $queryString = [
+        'search' => ['except' => ''],
+        'osm_id' => ['except' => null],
+    ];
+
+    public function rules(): array
     {
         return [
-            'population'      => 'required',
+            'search'            => 'required|string',
+            'currentPercentage' => 'required|numeric',
+
+            'model.simplified_geojson' => 'nullable',
+
+            'OSMBoundaries' => 'bool',
+            'polygonsOSMfr' => 'bool',
+
+            'population'      => 'required|numeric',
             'population_date' => 'required|string',
+
+            'polygonsOSMfrX' => 'numeric|max:1',
+            'polygonsOSMfrY' => 'numeric|max:1',
+            'polygonsOSMfrZ' => 'numeric|max:1',
         ];
     }
 
-    public function mount()
+    public function mount(): void
     {
-        $response = Http::acceptJson()
+        $this->model = $this->meetup->city;
-                        ->get(
+        $this->population = $this->model->population;
-                            'https://nominatim.openstreetmap.org/search?city='.$this->meetup->city->name.'&format=json&polygon_geojson=1'
+        $this->population_date = $this->model->population_date;
-                        );
+        $this->getSearchResults();
-        $this->osmSearchResults = $response->json();
+        if ($this->osm_id) {
-
+            $this->selectedItemOSMPolygons = collect($this->osmSearchResults)
-        $response = Http::acceptJson()
+                ->firstWhere('osm_id', $this->osm_id);
-                        ->get(
+            $this->executeMapshaper($this->currentPercentage);
-                            'https://nominatim.openstreetmap.org/search?state='.$this->meetup->city->name.'&format=json&polygon_geojson=1'
-                        );
-        $this->osmSearchResultsState = $response->json();
-
-        $response = Http::acceptJson()
-                        ->get(
-                            'https://nominatim.openstreetmap.org/search?country='.$this->meetup->city->name.'&format=json&polygon_geojson=1'
-                        );
-        $this->osmSearchResultsCountry = $response->json();
-
-        if ($this->meetup->city->osm_relation) {
-            $this->selectedItem = $this->meetup->city->osm_relation;
         }
-        $this->population = $this->meetup->city->population;
+    }
-        $this->population_date = $this->meetup->city->population_date;
+
+    private function getSearchResults(): void
+    {
+        $responses = Http::pool(fn(Pool $pool) => [
+            $pool->acceptJson()
+                 ->get(
+                     sprintf('https://nominatim.openstreetmap.org/search?q=%s&format=json&polygon_geojson=1&polygon_threshold=0.0003&email='.config('services.nominatim.email'),
+                         $this->search)
+                 ),
+        ]);
+
+        $this->osmSearchResults = collect($responses[0]->json())
+            ->filter(fn($item
+            ) => (
+                     $item['geojson']['type'] === 'Polygon'
+                     || $item['geojson']['type'] === 'MultiPolygon'
+                 )
+                 && $item['osm_id']
+                 && count($item['geojson']['coordinates'], COUNT_RECURSIVE) < 100000
+            )
+            ->values()
+            ->toArray();
+    }
+
+    private function executeMapshaper($percentage = 100): void
+    {
+        try {
+            // put OSM geojson to storage
+            Storage::disk('geo')
+                   ->put('geojson_'.$this->selectedItemOSMPolygons['osm_id'].'.json',
+                       json_encode($this->selectedItemOSMPolygons['geojson'], JSON_THROW_ON_ERROR)
+                   );
+
+            // execute mapshaper
+            $input = storage_path('app/geo/geojson_'.$this->selectedItemOSMPolygons['osm_id'].'.json');
+            $output = storage_path('app/geo/output_'.$this->selectedItemOSMPolygons['osm_id'].'.json');
+            $mapShaperBinary = base_path('node_modules/mapshaper/bin/mapshaper');
+            exec($mapShaperBinary.' '.$input.' -simplify dp '.$percentage.'% -o '.$output);
+            $this->currentPercentage = $percentage;
+
+            $mapShaperOutput = str(
+                Storage::disk('geo')
+                       ->get('output_'.$this->selectedItemOSMPolygons['osm_id'].'.json')
+            );
+            if ($mapShaperOutput->contains(['Polygon', 'MultiPolygon'])) {
+                // trim geojson
+                Storage::disk('geo')
+                       ->put(
+                           'trimmed_'.$this->selectedItemOSMPolygons['osm_id'].'.json',
+                           $mapShaperOutput
+                               ->after('{"type":"GeometryCollection", "geometries": [')
+                               ->beforeLast(']}')
+                               ->toString()
+                       );
+            } else {
+                $this->notification()
+                     ->warning('Warning',
+                         sprintf('Geojson is not valid. After simplification, it contains no polygons. Instead it contains: %s',
+                             $mapShaperOutput->after('{"type":')
+                                             ->before(',')));
+
+                return;
+            }
+
+            // put trimmed geojson to model
+            $this->model->simplified_geojson = json_decode(
+                trim(
+                    Storage::disk('geo')
+                           ->get('trimmed_'.$this->selectedItemOSMPolygons['osm_id'].'.json')
+                ),
+                false, 512, JSON_THROW_ON_ERROR
+            );
+
+            // emit event for AlpineJS
+            $this->emit('geoJsonUpdated');
+
+        } catch (\Exception $e) {
+            $this->notification()
+                 ->error('Error', $e->getMessage());
+        }
+    }
+
+    public function saveSimplifiedGeoJson()
+    {
+        $this->model->osm_relation = $this->osm_id;
+        $this->model->save();
+
+        $this->notification()
+             ->success('Success', 'Simplified GeoJSON saved.');
+    }
+
+    public function submitPolygonsOSM()
+    {
+        $this->validate();
+        $postGenerate = Http::acceptJson()
+                            ->asForm()
+                            ->post(
+                                'https://polygons.openstreetmap.fr/?id='.$this->selectedItemOSMPolygons['osm_id'],
+                                [
+                                    'x'        => $this->polygonsOSMfrX,
+                                    'y'        => $this->polygonsOSMfrY,
+                                    'z'        => $this->polygonsOSMfrZ,
+                                    'generate' => 'Submit+Query',
+                                ]
+                            );
+        if ($postGenerate->ok()) {
+            $getUrl = sprintf(
+                'https://polygons.openstreetmap.fr/get_geojson.py?id=%s&params=%s-%s-%s',
+                $this->selectedItemOSMPolygons['osm_id'],
+                (float) str($this->polygonsOSMfrX)
+                    ->before('.')
+                    ->toString().'.'.str($this->polygonsOSMfrX)
+                    ->after('.')
+                    ->padRight(6, '0')
+                    ->toString(),
+                (float) str($this->polygonsOSMfrY)
+                    ->before('.')
+                    ->toString().'.'.str($this->polygonsOSMfrY)
+                    ->after('.')
+                    ->padRight(6, '0')
+                    ->toString(),
+                (float) str($this->polygonsOSMfrZ)
+                    ->before('.')
+                    ->toString().'.'.str($this->polygonsOSMfrZ)
+                    ->after('.')
+                    ->padRight(6, '0')
+                    ->toString(),
+            );
+            $response = Http::acceptJson()
+                            ->get($getUrl);
+            if ($response->json()) {
+                $this->selectedItemPolygonsOSMfr = $response->json();
+                $this->emit('geoJsonUpdated');
+            } else {
+                $this->notification()
+                     ->warning('No data', 'No data found for this area.');
+            }
+        } else {
+            $this->notification()
+                 ->error('Error', 'Something went wrong: '.$postGenerate->status());
+        }
+    }
+
+    public function submit(): void
+    {
+        $this->validate();
+        $this->getSearchResults();
+    }
+
+    public function selectItem($index): void
+    {
+        $this->OSMBoundaries = false;
+        $this->selectedItemOSMBoundaries = null;
+        $this->selectedItemOSMPolygons = $this->osmSearchResults[$index];
+        $this->osm_id = $this->selectedItemOSMPolygons['osm_id'];
+        $this->model->osm_relation = $this->selectedItemOSMPolygons;
+
+        $this->executeMapshaper(100);
+    }
+
+    public function updatedOSMBoundaries($value)
+    {
+        if ($value) {
+            $response = Http::acceptJson()
+                            ->asForm()
+                            ->post('https://osm-boundaries.com/Ajax/GetBoundary', [
+                                'db'          => 'osm20221205',
+                                'waterOrLand' => 'water',
+                                'osmId'       => '-'.$this->selectedItemOSMPolygons['osm_id'],
+                            ]);
+            if ($response->json()) {
+                if (count($response->json()['coordinates'], COUNT_RECURSIVE) > 100000) {
+                    $this->notification()
+                         ->warning('Warning', 'Water boundaries are too big');
+
+                    return;
+                }
+
+                $this->selectedItemOSMBoundaries = $response->json();
+                $this->emit('geoJsonUpdated');
+            } else {
+                $this->notification()
+                     ->warning('Warning', 'No water boundaries found');
+            }
+        } else {
+            $this->selectedItemOSMBoundaries = null;
+            $this->emit('geoJsonUpdated');
+        }
+    }
+
+    public function updatedCurrentPercentage($value)
+    {
+        $this->executeMapshaper((float) $value);
+    }
+
+    public function setPercentage($percent): void
+    {
+        $this->executeMapshaper($percent);
     }
 
     public function updatedPopulation($value)
     {
-        $value = str($value)
+        $this->model->population = (int) str($value)
-            ->replace('.', '')
+            ->replace(['.', ','], '')
-            ->replace(',', '.')
+            ->toString();
-            ->toInteger();
+        $this->model->save();
-        $this->meetup->city->population = $value;
+
-        $this->population = $value;
-        $this->meetup->city->save();
         $this->notification()
-             ->success('Population updated', 'Success');
+             ->success('Success', 'Population saved.');
     }
 
     public function updatedPopulationDate($value)
     {
-        $this->meetup->city->population_date = $value;
+        $this->model->population_date = $value;
-        $this->meetup->city->save();
+        $this->model->save();
+
         $this->notification()
-             ->success('Population date updated', 'Success');
+             ->success('Success', 'Population saved.');
-    }
-
-    public function selectItem($index, bool $isState = false, $isCountry = false)
-    {
-        if ($isState) {
-            $this->selectedItem = $this->osmSearchResultsState[$index];
-        } elseif ($isCountry) {
-            $this->selectedItem = $this->osmSearchResultsCountry[$index];
-        } else {
-            $this->selectedItem = $this->osmSearchResults[$index];
-        }
-        Storage::disk('geo')
-               ->put('geojson_'.$this->selectedItem['osm_id'].'.json',
-                   json_encode($this->selectedItem['geojson'], JSON_THROW_ON_ERROR));
-        $input = storage_path('app/geo/geojson_'.$this->selectedItem['osm_id'].'.json');
-        $output = storage_path('app/geo/output_'.$this->selectedItem['osm_id'].'.json');
-        exec('mapshaper '.$input.' -simplify dp 4% -o '.$output);
-        Storage::disk('geo')
-               ->put(
-                   'trimmed_'.$this->selectedItem['osm_id'].'.json',
-                   str(Storage::disk('geo')
-                              ->get('output_'.$this->selectedItem['osm_id'].'.json'))
-                       ->after('{"type":"GeometryCollection", "geometries": [')
-                       ->beforeLast(']}')
-                       ->toString()
-               );
-        $this->meetup->city->osm_relation = $this->selectedItem;
-        $this->meetup->city->simplified_geojson = json_decode(trim(Storage::disk('geo')
-                                                                          ->get('trimmed_'.$this->selectedItem['osm_id'].'.json')),
-            false, 512, JSON_THROW_ON_ERROR);
-        $this->meetup->city->population = 0;
-        $this->meetup->city->population_date = '2021-12-31';
-        $this->meetup->city->save();
-
-        return to_route('osm.meetups.item', ['meetup' => $this->meetup]);
-    }
-
-    public function setPercent($percent)
-    {
-        $input = storage_path('app/geo/geojson_'.$this->selectedItem['osm_id'].'.json');
-        $output = storage_path('app/geo/output_'.$this->selectedItem['osm_id'].'.json');
-        exec('mapshaper '.$input.' -simplify dp '.$percent.'% -o '.$output);
-        Storage::disk('geo')
-               ->put(
-                   'trimmed_'.$this->selectedItem['osm_id'].'.json',
-                   str(Storage::disk('geo')
-                              ->get('output_'.$this->selectedItem['osm_id'].'.json'))
-                       ->after('{"type":"GeometryCollection", "geometries": [')
-                       ->beforeLast(']}')
-                       ->toString()
-               );
-        $this->meetup->city->simplified_geojson = json_decode(trim(Storage::disk('geo')
-                                                                          ->get('trimmed_'.$this->selectedItem['osm_id'].'.json')),
-            false, 512, JSON_THROW_ON_ERROR);
-        $this->meetup->city->save();
-
-        return to_route('osm.meetups.item', ['meetup' => $this->meetup]);
-    }
-
-    public function takePop($value)
-    {
-        $this->meetup->city->population = $value;
-        $this->meetup->city->population_date = '2021-12-31';
-        $this->meetup->city->save();
-
-        return to_route('osm.meetups.item', ['meetup' => $this->meetup]);
     }
 
     public function render()
     {
-        return view('livewire.meetup.prepare-for-btc-map-item');
+        return view('livewire.meetup.prepare-for-btc-map-item', [
+            'percentages' => collect([
+                0.5,
+                0.75,
+                1,
+                2,
+                3,
+                4,
+                5,
+                6,
+                7,
+                8,
+                9,
+                10,
+                15,
+                20,
+                25,
+                30,
+                40,
+                50,
+                60,
+                75,
+                80,
+                100,
+            ])
+                ->reverse()
+                ->values()
+                ->toArray(),
+        ]);
     }
 }

app/Http/Livewire/Tables/MeetupForBtcMapTable.php

@@ -18,6 +18,7 @@ class MeetupForBtcMapTable extends DataTableComponent
                 'simplified_geojson',
                 'population',
                 'population_date',
+                'city_id',
             ])
             ->setPerPageAccepted([
                 100000,

app/Models/Meetup.php

@@ -30,9 +30,10 @@ class Meetup extends Model implements HasMedia
      * @var array
      */
     protected $casts = [
-        'id'          => 'integer',
+        'id'                 => 'integer',
-        'city_id'     => 'integer',
+        'city_id'            => 'integer',
-        'github_data' => 'json',
+        'github_data'        => 'json',
+        'simplified_geojson' => 'array',
     ];
 
     protected static function booted()

resources/views/columns/meetups/osm-actions.blade.php

@@ -16,7 +16,7 @@
         <x-button
             xs
             amber
-            :href="route('osm.meetups.item', ['meetup' => $row])"
+            :href="route('osm.meetups.item', ['meetup' => $row, 'search' => $row->city->name])"
         >
             Open OSM Item
         </x-button>

resources/views/livewire/meetup/prepare-for-btc-map-item.blade.php

@@ -1,118 +1,444 @@
-<div class="p-6 w-full" wire:loading.class="opacity-50">
+<div>
-    <div class="max-w-none text-white flex flex-col space-y-4">
+    <div class="w-full p-0 lg:p-6" wire:loading.class="opacity-50 pointer-events-none cursor-not-allowed">
-        <a href="{{ route('osm.meetups') }}">Zurück</a>
+        <div class="flex max-w-none flex-col space-y-4 text-black">
-        <div class="grid grid-cols-3 gap-2">
-            <div>
-                <h1>Search city: {{ $meetup->city->name }}</h1>
-                <h1>OSM API Response</h1>
-                <div class="flex flex-col space-y-2">
-                    @foreach($osmSearchResults as $item)
-                        <code class="w-full">
-                            <div wire:key="osmItemCity_{{ $loop->index }}" class="cursor-pointer underline"
-                                 wire:click="selectItem({{ $loop->index }})">
-                                {{ $item['display_name'] }}
-                            </div>
-                        </code>
-                    @endforeach
-                </div>
-            </div>
-            <div>
-                <h1>Search state: {{ $meetup->city->name }}</h1>
-                <h1>OSM API Response</h1>
-                <div class="flex flex-col space-y-2">
-                    @foreach($osmSearchResultsState as $item)
-                        <code class="w-full">
-                            <div wire:key="osmItemState_{{ $loop->index }}" class="cursor-pointer underline"
-                                 wire:click="selectItem({{ $loop->index }}, true)">
-                                {{ $item['display_name'] }}
-                            </div>
-                        </code>
-                    @endforeach
-                </div>
-            </div>
-            <div>
-                <h1>Search country: {{ $meetup->city->name }}</h1>
-                <h1>OSM API Response</h1>
-                <div class="flex flex-col space-y-2">
-                    @foreach($osmSearchResultsCountry as $item)
-                        <code class="w-full">
-                            <div wire:key="osmItemCountry_{{ $loop->index }}" class="cursor-pointer underline"
-                                 wire:click="selectItem({{ $loop->index }}, false, true)">
-                                {{ $item['display_name'] }}
-                            </div>
-                        </code>
-                    @endforeach
-                </div>
-            </div>
-        </div>
-        <div>
-            @if($selectedItem)
-                geojson created
-            @endif
-        </div>
-        <h1>Current data [points: {{ count($meetup->city->simplified_geojson['coordinates'][0] ?? []) }}]</h1>
-        <div class="flex space-x-2">
-            <div class="cursor-pointer font-bold underline" wire:click="setPercent(7)">7%</div>
-            <div class="cursor-pointer font-bold underline" wire:click="setPercent(6)">6%</div>
-            <div class="cursor-pointer font-bold underline" wire:click="setPercent(5)">5%</div>
-            <div class="cursor-pointer font-bold underline" wire:click="setPercent(4)">4%</div>
-            <div class="cursor-pointer font-bold underline" wire:click="setPercent(3)">3%</div>
-            <div class="cursor-pointer font-bold underline" wire:click="setPercent(2)">2%</div>
-            <div class="cursor-pointer font-bold underline" wire:click="setPercent(1)">1%</div>
-            <div class="cursor-pointer font-bold underline" wire:click="setPercent(0.75)">0.75%</div>
-            <div class="cursor-pointer font-bold underline" wire:click="setPercent(0.5)">0.5%</div>
-        </div>
-        <div>
-            @if($meetup->city->simplified_geojson)
-                <h1>Simplified geojson</h1>
-                <pre
-                    class="overflow-x-auto py-4">{{ json_encode($meetup->city->simplified_geojson, JSON_THROW_ON_ERROR) }}</pre>
-                <div wire:ignore
-                    class="my-4"
-                    x-data="{
-                        init() {
-                            var map = L.map($refs.map)
-                            .setView([{{ $meetup->city->longitude }}, {{ $meetup->city->latitude }}], 13);
 
-                            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+            {{-- SEARCH PANEL --}}
+            <div class="rounded-lg bg-white shadow dark:bg-gray-800">
+                <div class="grid grid-cols-1 lg:grid-cols-2">
+                    <div class="px-4 py-5 lg:p-6">
+                        <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Search for an area
+                        </h3>
+                        <div class="mt-2 text-sm text-gray-500">
 
-                            var geojsonFeature = {
+                            <form wire:submit.prevent="submit" class="space-y-2">
-                                'type': 'Feature',
+                                @if (!$model?->simplified_geojson || !$selectedItemOSMPolygons)
-                                'geometry': @js($meetup->city->simplified_geojson)
+                                    <div class="flex flex-col space-y-2 lg:flex-row lg:space-y-0 lg:space-x-2">
-                            };
+                                        <div>
-                            console.log(geojsonFeature);
+                                            <x-input wire:model.defer="search"/>
-                            L.geoJSON(geojsonFeature).addTo(map);
+                                        </div>
-                            let geoJSON = L.geoJson(geojsonFeature).addTo(map);
+                                        <div>
-                            map.fitBounds(geoJSON.getBounds());
+                                            <x-button type="submit" class='w-full font-semibold'>Search</x-button>
-                        }
+                                        </div>
-                    }">
+                                    </div>
-                    <div x-ref="map" style="width: 80vw; height: 30vh;"></div>
+                                @else
+                                    <div class="flex flex-col space-y-2">
+                                        <a href="{{ route('osm.meetups') }}">
+                                            <x-badge gray class="whitespace-nowrap dark:bg-gray-200 dark:text-black">
+                                                Back
+                                            </x-badge>
+                                        </a>
+                                        <div class="overflow-hidden rounded-lg bg-white shadow dark:bg-gray-900">
+                                            <div class="px-2 py-2 sm:px-4 sm:py-5 sm:px-6">
+                                                <h3
+                                                    class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
+                                                    {{ $selectedItemOSMPolygons['display_name'] }}
+                                                </h3>
+                                                <p class="mt-1 max-w-2xl text-sm text-gray-500 dark:text-gray-300">
+
+                                                </p>
+                                            </div>
+                                            <div class="border-t border-gray-200 px-2 py-2 sm:p-0 sm:px-4 sm:py-5">
+                                                <dl class="sm:divide-y sm:divide-gray-200">
+                                                    <div class="space-y-1 py-2 sm:py-4 sm:py-5">
+                                                        <dt
+                                                            class="text-sm font-medium text-gray-500 dark:text-gray-300">
+                                                            <x-badge
+                                                                blue>{{ $selectedItemOSMPolygons['type'] }}</x-badge>
+                                                        </dt>
+                                                        <dd class="text-sm text-gray-900 dark:text-gray-300">
+                                                            OSM ID: {{ $selectedItemOSMPolygons['osm_id'] }}
+                                                        </dd>
+                                                    </div>
+                                                </dl>
+                                            </div>
+                                        </div>
+                                        <div class="overflow-hidden rounded-lg bg-white shadow dark:bg-gray-900">
+                                            <div class="px-2 py-2 sm:px-4 sm:py-5 sm:px-6">
+                                                <div class="mt-1 max-w-2xl text-sm text-gray-500 dark:text-gray-300">
+                                                    <x-toggle red lg
+                                                              label="Fetch water boundaries from https://osm-boundaries.com"
+                                                              wire:model="OSMBoundaries"/>
+                                                </div>
+                                                <div x-data="{
+                                                    show: @entangle('polygonsOSMfr')
+                                                }"
+                                                     class="mt-2 max-w-2xl text-sm text-gray-500 dark:text-gray-300">
+                                                    <x-toggle red lg
+                                                              label="Fetch polygons from https://polygons.openstreetmap.fr"
+                                                              wire:model="polygonsOSMfr"/>
+                                                    <div class="mt-2 flex flex-row items-end space-x-2" x-show="show">
+                                                        <x-input max="1" label="X"
+                                                                 wire:model.defer="polygonsOSMfrX"/>
+                                                        <x-input max="1" label="Y"
+                                                                 wire:model.defer="polygonsOSMfrY"/>
+                                                        <x-input max="1" label="Z"
+                                                                 wire:model.defer="polygonsOSMfrZ"/>
+                                                    </div>
+                                                    <div class="mt-4 font-mono text-sm" x-show="show">
+                                                        <p>
+                                                            X, Y, Z are parameters for the following PostGIS equation.
+                                                            The default values are chosen according to the size of the
+                                                            original geometry to give a slighty bigger geometry, without
+                                                            too many nodes.
+
+                                                        </p>
+                                                        <p class="mt-4">Note that:</p>
+                                                        <p>
+                                                            X > 0 will give a polygon bigger than the original geometry,
+                                                            and guaranteed to contain it.
+                                                        </p>
+                                                        <p>
+                                                            X = 0 will give a polygon similar to the original geometry.
+                                                        </p>
+                                                        <p>
+                                                            X < 0 will give a polygon smaller than the original
+                                                            geometry, and guaranteed to be smaller. </p>
+                                                    </div>
+                                                    <div x-show="show" class="mt-2 font-semibold">
+                                                        <x-button emerald label="Submit and load polygons"
+                                                                  wire:click="submitPolygonsOSM"/>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                @endif
+                                <div>
+                                    @if (!$model?->simplified_geojson && $search)
+                                        <x-badge lg positive class="xl:whitespace-nowrap">
+                                            Now select the appropriate place so that a GeoJSON can be built.
+                                        </x-badge>
+                                    @endif
+                                </div>
+                            </form>
+
+                        </div>
+                    </div>
+                    <div class="overflow-y-auto px-4 py-5 lg:p-6">
+                        @if ($search)
+                            <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">
+                                Search: {{ $search }}
+                            </h3>
+                        @endif
+                        <div class="mt-2 text-sm text-gray-500">
+
+                            <div class="flex max-h-[400px] flex-col space-y-4">
+                                <div class="mt-6 flow-root">
+                                    <ul role="list" class="-my-5 divide-y divide-gray-200">
+
+                                        @foreach ($osmSearchResults as $item)
+                                            @php
+                                                $currentClass = $item['osm_id'] === $osm_id ? 'bg-amber-400 dark:bg-amber-900' : '';
+                                            @endphp
+
+                                            <li class="{{ $currentClass }} cursor-pointer py-4 px-2 hover:bg-amber-400 dark:hover:bg-amber-800"
+                                                wire:key="osmItem_{{ $loop->index }}"
+                                                wire:click="selectItem({{ $loop->index }})">
+                                                <div class="flex items-center space-x-4">
+                                                    <div class="min-w-0 flex-1">
+                                                        <p
+                                                            class="truncate text-sm font-medium text-gray-900 dark:text-gray-200">
+                                                            {{ $item['display_name'] }}</p>
+                                                        <p class="truncate text-sm text-gray-500">
+                                                            <x-badge amber>
+                                                                {{ count($item['geojson']['coordinates'], COUNT_RECURSIVE) }}
+                                                                points
+                                                            </x-badge>
+                                                        </p>
+                                                    </div>
+                                                    <div>
+                                                        <x-badge blue>{{ $item['type'] }}</x-badge>
+                                                    </div>
+                                                </div>
+                                            </li>
+                                        @endforeach
+                                    </ul>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {{-- Wikipedia Links --}}
+            <div class="flex flex-row items-center space-x-6">
+                @if ($search)
+                    <div class='rounded-lg bg-white px-4 py-5 shadow dark:bg-gray-800 lg:p-6'>
+                        <h1 class='font-semibold dark:text-gray-100'>Wikipedia search <span
+                                class='text-sm text-gray-500 dark:text-gray-400'>(for population data)</span></h1>
+                        <div class="flex flex-wrap gap-2">
+                            <a target="_blank" class="text-amber-500 underline"
+                               href="https://en.wikipedia.org/wiki/{{ urlencode(str($search)->replace(' ', '_')->toString()) }}">Wikipedia
+                                EN:
+                                {{ $search }}</a>
+                            <a target="_blank" class="text-amber-500 underline"
+                               href="https://de.wikipedia.org/wiki/{{ urlencode(str($search)->replace(' ', '_')->toString()) }}">Wikipedia
+                                DE:
+                                {{ $search }}</a>
+                            <a target="_blank" class="text-amber-500 underline"
+                               href="https://fr.wikipedia.org/wiki/{{ urlencode(str($search)->replace(' ', '_')->toString()) }}">Wikipedia
+                                FR:
+                                {{ $search }}</a>
+                            <a target="_blank" class="text-amber-500 underline"
+                               href="https://es.wikipedia.org/wiki/{{ urlencode(str($search)->replace(' ', '_')->toString()) }}">Wikipedia
+                                ES:
+                                {{ $search }}</a>
+                        </div>
+                    </div>
+                @endif
+                <div class='rounded-lg bg-white px-4 py-5 shadow dark:bg-gray-800 lg:p-6'>
+                    <x-input wire:model.debounce="population" label="population"/>
+                    <x-input wire:model.debounce="population_date" label="population_date"/>
+                </div>
+            </div>
+
+            {{-- GeoJSON simplification --}}
+            @if ($selectedItemOSMPolygons)
+                <div class="rounded-lg bg-white shadow dark:bg-gray-800">
+                    <div class="px-4 py-5 lg:p-6">
+                        <div class="flex items-center space-x-4">
+                            <h3 class="text-lg font-medium leading-6 text-blue-500">
+                                Mapshaper simplification of <span class="text-[#FFA500]">OSM GeoJSON
+                                    [{{ count($selectedItemOSMPolygons['geojson']['coordinates'], COUNT_RECURSIVE) }}
+                                    points]</span> to
+                                {{ count($model->simplified_geojson['coordinates'], COUNT_RECURSIVE) }} points
+                            </h3>
+                        </div>
+                        <div class="mt-2 text-sm text-gray-500 dark:text-gray-200">
+                            <div class="flex flex-col space-y-2">
+                                <h1 class="py-2">
+                                    (smaller percentage means fewer points - aim for no more than 150)
+                                </h1>
+                                <div class="flex hidden space-x-2 overflow-auto lg:block">
+                                    @php
+                                        $btnClassLeft = 'relative inline-flex items-center rounded-l-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 dark:bg-gray-600 dark:hover:bg-blue-800 hover:bg-blue-400 focus:z-10 focus:border-blue-500 dark:focus:border-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-700';
+                                        $btnClassRight = 'relative -ml-px inline-flex items-center rounded-r-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 dark:bg-gray-600 dark:hover:bg-blue-800 hover:bg-blue-400 focus:z-10 focus:border-blue-500 dark:focus:border-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-700';
+                                        $btnClassCenter = 'relative -ml-px inline-flex items-center border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 dark:bg-gray-600 dark:hover:bg-blue-800 hover:bg-blue-400 focus:z-10 focus:border-blue-500 dark:focus:border-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-700';
+                                        $currentClass = 'bg-blue-500 dark:bg-blue-700 text-white dark:text-gray-900';
+                                    @endphp
+                                    <div class="isolate inline-flex rounded-md shadow-sm">
+                                        @foreach ($percentages as $percentage)
+                                            @php
+                                                $btnClass = $loop->first ? $btnClassLeft : ($loop->last ? $btnClassRight : $btnClassCenter);
+                                            @endphp
+                                            <button wire:key="percentage_{{ $loop->index }}" type="button"
+                                                    wire:click="setPercentage({{ $percentage }})"
+                                                    class="{{ $btnClass }} {{ $currentPercentage === $percentage ? $currentClass : '' }}">
+                                                {{ $percentage }}%
+                                            </button>
+                                        @endforeach
+                                    </div>
+                                </div>
+                                <div class="block lg:hidden">
+                                    <x-native-select label="Select percentage" placeholder="Select percentage"
+                                                     :options="$percentages" wire:model="currentPercentage"/>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
                 </div>
             @endif
+
+            {{-- GeoJSON data --}}
+            <div>
+                @if ($model?->simplified_geojson && $selectedItemOSMPolygons)
+                    <div class="rounded-lg bg-white shadow dark:bg-gray-800">
+                        <div class="grid grid-cols-1 gap-4 px-4 py-5 lg:grid-cols-2 lg:p-6">
+                            <div>
+                                @php
+                                    $jsonEncodedSelectedItem = json_encode($selectedItemOSMPolygons['geojson'], JSON_THROW_ON_ERROR);
+                                @endphp
+                                <h3 class="text-lg font-medium leading-6 text-[#FFA500]">
+                                    OSM GeoJSON
+                                    [{{ count($selectedItemOSMPolygons['geojson']['coordinates'], COUNT_RECURSIVE) }}
+                                    points]
+                                </h3>
+                                <div class="mt-2 text-sm text-gray-500">
+                                    <div class="flex w-full flex-col space-y-2">
+                                        <pre
+                                            class="overflow-x-auto py-3 text-[#FFA500]">{{ $jsonEncodedSelectedItem }}</pre>
+                                        <div class='font-semibold'>
+                                            <x-button x-data="{
+                                                textToCopy: @entangle('selectedItemOSMPolygons.geojson')
+                                            }"
+                                                      @click.prevent="window.navigator.clipboard.writeText(JSON.stringify(textToCopy));window.$wireui.notify({title:'{{ __('Copied!') }}',icon:'success'});"
+                                                      lg amber>
+                                                Copy to clipboard
+                                            </x-button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div>
+                                @php
+                                    $jsonEncodedSimplifiedGeoJson = json_encode($model->simplified_geojson, JSON_THROW_ON_ERROR);
+                                @endphp
+                                <h3 class="text-lg font-medium leading-6 text-blue-500">
+                                    Simplified GeoJSON
+                                    [{{ count($model->simplified_geojson['coordinates'], COUNT_RECURSIVE) }} points]
+                                </h3>
+                                <div class="mt-2 text-sm text-gray-500">
+                                    <div class="flex w-full flex-col space-y-2">
+                                        <pre
+                                            class="overflow-x-auto py-3 text-blue-500">{{ $jsonEncodedSimplifiedGeoJson }}</pre>
+                                        <div class='font-semibold'>
+                                            <x-button
+                                                wire:click="saveSimplifiedGeoJson"
+                                                lg blue>
+                                                Save on model
+                                            </x-button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            @if ($selectedItemOSMBoundaries)
+                                <div>
+                                    @php
+                                        $jsonEncodedGeoJsonWater = json_encode($selectedItemOSMBoundaries, JSON_THROW_ON_ERROR);
+                                    @endphp
+                                    <h3 class="text-lg font-medium leading-6 text-[#FF0084]">
+                                        https://osm-boundaries.com water GeoJSON
+                                        [{{ count($selectedItemOSMBoundaries['coordinates'], COUNT_RECURSIVE) }}
+                                        points]
+                                    </h3>
+                                    <div class="mt-2 text-sm text-gray-500">
+                                        <div class="flex w-full flex-col space-y-2">
+                                            <pre
+                                                class="overflow-x-auto py-3 text-[#FF0084]">{{ $jsonEncodedGeoJsonWater }}</pre>
+                                            <div class='font-semibold'>
+                                                <x-button x-data="{
+                                                    textToCopy: @entangle('selectedItemOSMBoundaries')
+                                                }"
+                                                          @click.prevent="window.navigator.clipboard.writeText(JSON.stringify(textToCopy));window.$wireui.notify({title:'{{ __('Copied!') }}',icon:'success'});"
+                                                          lg pink>
+                                                    Copy to clipboard
+                                                </x-button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            @endif
+                            @if ($selectedItemPolygonsOSMfr)
+                                <div>
+                                    @php
+                                        $jsonEncodedGeoJsonOSMFr = json_encode($selectedItemPolygonsOSMfr, JSON_THROW_ON_ERROR);
+                                    @endphp
+                                    <h3 class="text-lg font-medium leading-6 text-emerald-500">
+                                        https://polygons.openstreetmap.fr GeoJSON
+                                        <span wire:key="ifNotGeometryCollection">
+                                            @if ($selectedItemPolygonsOSMfr['type'] !== 'GeometryCollection')
+                                                [{{ count($selectedItemPolygonsOSMfr['coordinates'] ?? [], COUNT_RECURSIVE) }}
+                                                points]
+                                            @endif
+                                        </span>
+                                    </h3>
+                                    <div class="mt-2 text-sm text-gray-500">
+                                        <div class="flex w-full flex-col space-y-2">
+                                            <pre
+                                                class="overflow-x-auto py-3 text-emerald-500">{{ $jsonEncodedGeoJsonOSMFr }}</pre>
+                                            <div class='font-semibold'>
+                                                <x-button x-data="{
+                                                    textToCopy: @entangle('selectedItemPolygonsOSMfr')
+                                                }"
+                                                          @click.prevent="window.navigator.clipboard.writeText(JSON.stringify(textToCopy));window.$wireui.notify({title:'{{ __('Copied!') }}',icon:'success'});"
+                                                          lg emerald>
+                                                    Copy to clipboard
+                                                </x-button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            @endif
+                        </div>
+
+                        <div class="flex flex-col space-y-4 px-4 py-5 lg:p-6">
+                            <div class="w-full">
+                                <div>
+                                    <h1 class="font-bold dark:text-white">
+                                        GeoJSON preview
+                                    </h1>
+                                    <div wire:ignore class="my-4" x-data="{
+                                        geojson: @entangle('selectedItemOSMPolygons.geojson'),
+                                        simplifiedGeojson: @entangle('model.simplified_geojson'),
+                                        geojsonWater: @entangle('selectedItemOSMBoundaries'),
+                                        geojsonOSMfr: @entangle('selectedItemPolygonsOSMfr'),
+                                        init() {
+                                            const map = L.map($refs.map)
+                                                .setView([0, 0], 13);
+
+                                            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', { foo: 'bar', attribution: '&copy; <a href=\'https://www.openstreetmap.org/copyright\'>OpenStreetMap</a> contributors' }).addTo(map);
+
+                                            const geojsonFeature = {
+                                                'type': 'Feature',
+                                                'geometry': this.geojson
+                                            };
+                                            const simplifiedGeojsonFeature = {
+                                                'type': 'Feature',
+                                                'geometry': this.simplifiedGeojson
+                                            };
+                                            L.geoJson(geojsonFeature, { style: { color: '#FFA500', fillColor: '#FFA500', fillOpacity: 0.3 } }).addTo(map);
+                                            let simplifiedGeoJSON = L.geoJson(simplifiedGeojsonFeature, { style: { fillOpacity: 0.5 } }).addTo(map);
+                                            map.fitBounds(simplifiedGeoJSON.getBounds(), { padding: [50, 50] });
+
+                                            $wire.on('geoJsonUpdated', () => {
+                                                map.eachLayer((layer) => {
+                                                    layer.remove();
+                                                });
+                                                L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', { foo: 'bar', attribution: '&copy; <a href=\'https://www.openstreetmap.org/copyright\'>OpenStreetMap</a> contributors' }).addTo(map);
+                                                const geojsonFeature = {
+                                                    'type': 'Feature',
+                                                    'geometry': this.geojson
+                                                };
+                                                const simplifiedGeojsonFeature = {
+                                                    'type': 'Feature',
+                                                    'geometry': this.simplifiedGeojson
+                                                };
+                                                const geojsonWaterFeature = {
+                                                    'type': 'Feature',
+                                                    'geometry': this.geojsonWater
+                                                };
+                                                const geojsonOSMfrFeature = {
+                                                    'type': 'Feature',
+                                                    'geometry': this.geojsonOSMfr
+                                                };
+                                                L.geoJson(geojsonFeature, { style: { color: '#FFA500', fillColor: '#FFA500', fillOpacity: 0.3 } }).addTo(map);
+                                                L.geoJson(geojsonWaterFeature, { style: { color: '#FF0084', fillColor: '#FF0084', fillOpacity: 0.2 } }).addTo(map);
+                                                L.geoJson(geojsonOSMfrFeature, { style: { color: '#10b981', fillColor: '#10b981', fillOpacity: 0.3 } }).addTo(map);
+                                                let simplifiedGeoJSON = L.geoJson(simplifiedGeojsonFeature, { style: { fillOpacity: 0.5 } }).addTo(map);
+                                                map.fitBounds(simplifiedGeoJSON.getBounds(), { padding: [50, 50] });
+                                            });
+                                        }
+                                    }">
+                                        <div x-ref="map" style="height: 50vh;"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @endif
+            </div>
+
+            <div class='rounded-lg bg-white px-4 py-5 shadow dark:bg-gray-800 lg:p-6'>
+                <p class="mt-8 text-xs leading-5 text-gray-400 md:order-1 md:mt-0">
+                    <a class="text-blue-500" href="https://github.com/HolgerHatGarKeineNode/geojson-helper"
+                       target="_blank">GeoJSON helper</a> is maintained by <a
+                        href="https://github.com/HolgerHatGarKeineNode" target="_blank"
+                        class="text-amber-500">HolgerHatGarKeineNode</a> [<span
+                        class="break-all font-mono">npub1pt0kw36ue3w2g4haxq3wgm6a2fhtptmzsjlc2j2vphtcgle72qesgpjyc6</span>].
+                    This
+                    software is open-sourced software
+                    licensed under the <a href="https://opensource.org/licenses/MIT" target="_blank"
+                                          class="underline">MIT license</a>.
+                </p>
+            </div>
         </div>
-        <div class="flex flex-col">
-            @if($meetup->city->osm_relation)
-                <code>
-                    osm_id: {{ $meetup->city->osm_relation['osm_id'] }}
-                </code>
-                <code>
-                    display_name: {{ $meetup->city->osm_relation['display_name'] }}
-                </code>
-            @endif
-        </div>
-        <h1>Wikipedia Search Results</h1>
-        <div class="flex space-x-2">
-            <a target="_blank" class="underline text-amber-500"
-               href="https://de.wikipedia.org/wiki/{{ urlencode($meetup->city->name) }}">Wikipedia: {{ $meetup->city->name }}</a>
-            <x-input wire:model.debounce="population" label="population"/>
-            <x-input wire:model.debounce="population_date" label="population_date"/>
-        </div>
-        <h1>DB population</h1>
-        <code>
-            population: {{ $meetup->city->population }}
-        </code>
-        <code>
-            population date: {{ $meetup->city->population_date }}
-        </code>
     </div>
+
+    <style>
+        .leaflet-attribution-flag {
+            display: inline;
+        }
+    </style>
 </div>