Updated Registration Column name and distance achievement units

Reviewed-on: #20

app/Console/Commands/PopulateAirportTimezones.php

@@ -17,7 +17,10 @@ class PopulateAirportTimezones extends Command
      */
     public function handle()
     {
-        Airport::whereNull('timezone')->chunkById(100, function ($airports) {
+        Airport::where(function ($query) {
+            $query->whereNull('timezone')
+                ->orWhere('timezone', 'Undefined');
+        })->chunkById(100, function ($airports) {
             foreach ($airports as $airport) {
                 $zoneName = null;
                 $attempts = 0;

app/Http/Controllers/SearchController.php

@@ -58,28 +58,50 @@ class SearchController extends Controller
     {
         $q = request('q', '');
         $len = strlen($q);
+        $showClosed = request()->boolean('show_closed');
+        $showNoCode = request()->boolean('show_no_code');
 
         if ($len < 3) return [];
 
         return Airport::with('region.country')
+            ->when(!$showClosed, fn($query) => $query->where('active', true))
+            ->when(!$showNoCode, fn($query) => $query->where(function ($sub) {
+                $sub->whereNotNull('iata_code')
+                    ->orWhereNotNull('icao_code');
+            }))
             ->when($len === 3, fn($query) => $query->where('iata_code', 'ilike', $q))
             ->when($len >= 4, fn($query) => $query->where(function ($sub) use ($q, $len) {
                 $sub->when($len === 4, fn($s) => $s->where('icao_code', 'ilike', $q))
                     ->orWhere('name', 'ilike', "%{$q}%")
                     ->orWhere('municipality', 'ilike', "%{$q}%");
-            })->orderByRaw("
-            CASE
-                WHEN icao_code = ? THEN 0
-                WHEN iata_code = ? THEN 1
-                ELSE 2
-            END
-        ", [$q, $q]))
+            }))
+            ->orderByRaw("
+                    CASE
+                        WHEN active THEN 0
+                        ELSE 1
+                    END
+                ")
+                            ->orderByRaw("
+                    CASE
+                        WHEN iata_code IS NOT NULL AND icao_code IS NOT NULL THEN 0
+                        WHEN iata_code IS NOT NULL OR icao_code IS NOT NULL THEN 1
+                        ELSE 2
+                    END
+                ")
+                            ->orderByRaw("
+                    CASE
+                        WHEN icao_code = ? THEN 0
+                        WHEN iata_code = ? THEN 1
+                        ELSE 2
+                    END
+                ", [$q, $q])
             ->limit(15)
-            ->get(['id', 'name', 'municipality', 'iata_code', 'icao_code', 'region_id'])
-            ->map(fn($airport) => [
+            ->get(['id', 'name', 'municipality', 'iata_code', 'icao_code', 'region_id', 'active'])
+            ->map(fn(Airport $airport) => [
                 'value'        => $airport->id,
                 'title'        => $airport->display_name,
                 'country_code' => strtolower($airport->region->country->code),
+                'active'       => $airport->active,
             ])
             ->values();
     }

app/Http/Middleware/HandleInertiaRequests.php

@@ -58,6 +58,7 @@ class HandleInertiaRequests extends Middleware
                 ->whereNull('expires_at')
                 ->orWhere('expires_at', '>', now())
                 ->count(),
+            'carto_api_key' => config('services.carto.key'),
         ];
     }
 }

app/Models/Airport.php

@@ -20,12 +20,14 @@ class Airport extends Model
         'icao_code',
         'iata_code',
         'local_code',
+        'active',
     ];
 
     protected $casts = [
         'latitude_deg'  => 'float',
         'longitude_deg' => 'float',
         'elevation_ft'  => 'integer',
+        'active'        => 'boolean',
     ];
 
     protected $appends = [
@@ -37,6 +39,8 @@ class Airport extends Model
         'LHR', 'LGW', 'STN', 'LTN', 'LCY', 'SEN',
     ];
 
+
+
     protected function displayName() : Attribute{
         return Attribute::make(
             get: function () {
@@ -53,6 +57,11 @@ class Airport extends Model
         );
     }
 
+    public function scopeActive($query)
+    {
+        return $query->where('active', true);
+    }
+
     public function region(): BelongsTo
     {
         return $this->belongsTo(Region::class);

app/Services/Achievements/Checkers/GeneralFlyingChecker.php

@@ -19,7 +19,7 @@ class GeneralFlyingChecker extends BaseChecker
 
         // --- Boolean achievements ---
 
-        $this->awardIf($allLoggedFlightsCount >= 1, 'general_flying.first_flight');
+        $this->awardIf($allLoggedFlightsCount >= 1, 'number_of_flights.first_flight');
 
         $this->awardIf(
             $flights->contains(fn ($f) => $f->isDomestic()),
@@ -69,10 +69,10 @@ class GeneralFlyingChecker extends BaseChecker
             'general_flying.domestic_two_countries'
         );
 
-        $this->awardProgress($count,'general_flying.10_flights');
-        $this->awardProgress($count,'general_flying.50_flights');
-        $this->awardProgress($count,'general_flying.100_flights');
-        $this->awardProgress($count,'general_flying.500_flights');
-        $this->awardProgress($count,'general_flying.1000_flights');
+        $this->awardProgress($count,'number_of_flights.10_flights');
+        $this->awardProgress($count,'number_of_flights.50_flights');
+        $this->awardProgress($count,'number_of_flights.100_flights');
+        $this->awardProgress($count,'number_of_flights.500_flights');
+        $this->awardProgress($count,'number_of_flights.1000_flights');
     }
 }

app/Settings/SettingsRegistry.php

@@ -133,7 +133,7 @@ class SettingsRegistry
                 'category' => 'FlightsGoneBy Settings',
                 'type'     => 'multiselect',
                 'label'    => 'Which columns to show on the Departure Board',
-                'default'  => ['airline', 'flight_number', 'departure_airport', 'arrival_airport', 'departure_date', 'departure_time', 'arrival_time', 'duration', 'distance', 'aircraft', 'registration', 'class_seat_combined'],
+                'default'  => ['airline', 'flight_number', 'departure_airport', 'arrival_airport', 'departure_date', 'departure_time', 'arrival_time', 'duration', 'distance', 'aircraft', 'aircraft_registration', 'class_seat_combined'],
                 'options'  => [
                     ['value' => 'airline', 'label' => 'Airline Logo w/ Info Popup'],
                     ['value' => 'airline.name', 'label' => 'Airline Name'],
@@ -148,7 +148,7 @@ class SettingsRegistry
                     ['value' => 'duration', 'label' => 'Duration'],
                     ['value' => 'distance', 'label' => 'Distance'],
                     ['value' => 'aircraft', 'label' => 'Aircraft Designator w/ Info Popup'],
-                    ['value' => 'registration', 'label' => 'Aircraft Registration'],
+                    ['value' => 'aircraft_registration', 'label' => 'Aircraft Registration'],
                     ['value' => 'aircraft.manufacturer_code', 'label' => 'Aircraft Manufacturer'],
                     ['value' => 'aircraft.model_full_name', 'label' => 'Aircraft Model'],
                     ['value' => 'flight_class', 'label' => 'Class'],

config/services.php

@@ -18,6 +18,10 @@ return [
         'key' => env('POSTMARK_API_KEY'),
     ],
 
+    'carto' => [
+      'key' => env('CARTO_API_KEY'),
+    ],
+
     'resend' => [
         'key' => env('RESEND_API_KEY'),
     ],

database/migrations/2026_08_22_031806_add_historic_airports.php

@@ -0,0 +1,133 @@
+<?php
+
+use App\Models\Airport;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('airports', function (Blueprint $table) {
+            $table->boolean('active')->default(true);
+        });
+
+        Airport::whereIataCode('TXL')->update(['active' => false]);
+        $this->importCsv();
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('airports', function (Blueprint $table) {
+            $table->dropColumn('active');
+        });
+    }
+
+    private function importCsv(): void
+    {
+        $path = storage_path('app/private/seed_data/airports.csv');
+
+        if (! file_exists($path)) {
+            throw new \RuntimeException("Airports CSV not found at: {$path}");
+        }
+
+        $handle = fopen($path, 'rb');
+
+        if ($handle === false) {
+            throw new \RuntimeException("Failed to open airports CSV at: {$path}");
+        }
+
+        // Skip header row
+        fgetcsv($handle);
+
+        $regionMap = DB::table('regions')->pluck('id', 'code')->all();
+
+        $batch     = [];
+        $batchSize = 500;
+        $now       = now()->toDateTimeString();
+
+        while (($row = fgetcsv($handle)) !== false) {
+            if (count($row) < 19) {
+                continue;
+            }
+
+            // id, ident, type, name, latitude_deg, longitude_deg, elevation_ft,
+            // continent, iso_country, iso_region, municipality, scheduled_service,
+            // icao_code, iata_code, gps_code, local_code, home_link, wikipedia_link, keywords
+            [
+                ,
+                ,
+                $type,
+                $name,
+                $latitudeDeg,
+                $longitudeDeg,
+                $elevationFt,
+                ,
+                ,
+                $isoRegion,
+                $municipality,
+                ,
+                $icaoCode,
+                $iataCode,
+                ,
+                $localCode,
+            ] = $row;
+
+            $icaoCode = trim(str_replace(["\r", "\n"], '', $icaoCode));
+            $iataCode = trim(str_replace(["\r", "\n"], '', $iataCode));
+
+            // Only importing airports with no IATA/ICAO code — coded airports are already in the DB
+            if ($icaoCode !== '' || $iataCode !== '') {
+                continue;
+            }
+
+            $type = trim($type);
+            $name = trim($name);
+            $localCode = trim($localCode);
+            $isoRegion = trim($isoRegion);
+
+            if (! isset($regionMap[$isoRegion])) {
+                continue;
+            }
+
+            $elevationFt = trim($elevationFt);
+
+            $batch[] = [
+                'type'              => $type,
+                'name'              => $name,
+                'latitude_deg'      => (float) trim($latitudeDeg),
+                'longitude_deg'     => (float) trim($longitudeDeg),
+                'elevation_ft'      => $elevationFt !== '' ? (int) $elevationFt : null,
+                'region_id'         => $regionMap[$isoRegion],
+                'municipality'      => trim($municipality) !== '' ? trim($municipality) : null,
+                'icao_code'         => null,
+                'iata_code'         => null,
+                'local_code'        => $localCode !== '' ? $localCode : null,
+                'timezone'          => 'Undefined',
+                'active'            => $type !== 'closed',
+                'created_at'        => $now,
+                'updated_at'        => $now,
+            ];
+
+            echo "Added: {$name}\n";
+
+            if (count($batch) >= $batchSize) {
+                DB::table('airports')->insert($batch);
+                $batch = [];
+            }
+        }
+
+        fclose($handle);
+
+        if (! empty($batch)) {
+            DB::table('airports')->insert($batch);
+        }
+    }
+};

database/migrations/2026_09_15_045243_update_column_settings.php

@@ -0,0 +1,65 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Support\Facades\DB;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        $this->renameDepartureBoardColumn('registration', 'aircraft_registration');
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        $this->renameDepartureBoardColumn('aircraft_registration', 'registration');
+    }
+
+    /**
+     * Walk every user's settings JSON and rename a value inside
+     * departure_board_columns, if present.
+     */
+    private function renameDepartureBoardColumn(string $from, string $to): void
+    {
+        DB::table('users')
+            ->select('id', 'settings')
+            ->whereNotNull('settings')
+            ->orderBy('id')
+            ->chunkById(500, function ($users) use ($from, $to) {
+                foreach ($users as $user) {
+                    $settings = json_decode($user->settings, true);
+
+                    // Skip rows with malformed/empty JSON rather than blowing up the migration.
+                    if (! is_array($settings) || ! isset($settings['departure_board_columns'])) {
+                        continue;
+                    }
+
+                    if (! is_array($settings['departure_board_columns'])) {
+                        continue;
+                    }
+
+                    $columns = $settings['departure_board_columns'];
+                    $key = array_search($from, $columns, true);
+
+                    if ($key === false) {
+                        continue; // nothing to change for this user
+                    }
+
+                    $columns[$key] = $to;
+                    $settings['departure_board_columns'] = $columns;
+
+                    DB::table('users')
+                        ->where('id', $user->id)
+                        ->update([
+                            'settings' => json_encode($settings),
+                        ]);
+                }
+            });
+    }
+};

resources/js/Components/FlightsGoneBy/AchievementCard.vue

@@ -9,12 +9,6 @@ import ButtonLink from "@/Components/FlightsGoneBy/ButtonLink.vue";
 import Distance from "@/Components/Distance.vue";
 import FormattedNumber from "@/Components/FormattedNumber.vue";
 
-const distanceAchievements = [
-    'general_flying.circumference_of_the_earth',
-    'general_flying.to_the_moon',
-    'general_flying.gigametre'
-];
-
 const props = defineProps<{
     achievement: Achievement
     userAchievement?: UserAchievement
@@ -22,6 +16,20 @@ const props = defineProps<{
     distanceUnit? : "mi" | "km" | "nm"
 }>()
 
+const dynamicDistanceUnit = computed(() => {
+    if(props.achievement.internal_name == 'distance.million_miles'){
+        return 'mi'
+    }
+
+    if(props.achievement.internal_name == 'distance.million_kilometers'){
+        return 'km'
+    }
+
+    return props.distanceUnit ?? 'km';
+})
+
+
+
 const progress = computed(() => {
     if (!props.achievement.progressive || !props.achievement.threshold) return null
     const current = props.userAchievement?.progress ?? 0
@@ -92,9 +100,9 @@ const unlocked = computed(() => {
 
                     <template v-if="achievement.progressive && progress">
                         <div class="progress-label">
-                            <span v-if="distanceAchievements.includes(achievement.internal_name)">
-                                <Distance :unit="distanceUnit" :showUnits="false" :value="Math.min(progress.current, progress.threshold)" /> /
-                                <Distance :unit="distanceUnit" :value="progress.threshold" />
+                            <span v-if="achievement.category?.internal_name == 'distance'">
+                                <Distance :unit="dynamicDistanceUnit" :showUnits="false" :value="Math.min(progress.current, progress.threshold)" /> /
+                                <Distance :unit="dynamicDistanceUnit" :value="progress.threshold" />
                             </span>
                             <span v-else>
                                 <FormattedNumber :value="Math.min(progress.current, progress.threshold)" /> /

resources/js/Components/FlightsGoneBy/AirportSearchBox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, nextTick } from 'vue'
+import { ref, nextTick, watch } from 'vue'
 import axios from 'axios'
 
 const props = defineProps<{
@@ -12,8 +12,14 @@ const model = defineModel<{ value: number, title: string, country_code: string }
 
 const airportOptions = ref(props.prefilledOptions ?? [])
 const autocompleteRef = ref<any>(null)
+const showClosed = ref(false)
+const showNoCode = ref(false)
+const lastQuery = ref('')
+const menuOpen = ref(false)
 
 const onFocus = () => {
+    menuOpen.value = true
+
     nextTick(() => {
         const input = autocompleteRef.value?.$el?.querySelector('input')
         input?.select()
@@ -21,6 +27,8 @@ const onFocus = () => {
 }
 
 const searchAirports = async (query: string) => {
+    lastQuery.value = query
+
     if (!query || query.length < 2) {
         airportOptions.value = props.prefilledOptions ?? []
         return
@@ -28,15 +36,27 @@ const searchAirports = async (query: string) => {
 
     if (query === model.value?.title) return
 
-    const { data } = await axios.get('/search/airports', { params: { q: query } })
+    const { data } = await axios.get('/search/airports', {
+        params: {
+            q: query,
+            show_closed: showClosed.value ? 1 : undefined,
+            show_no_code: showNoCode.value ? 1 : undefined,
+        },
+    })
     airportOptions.value = data
 }
+
+// Re-run the last search when either checkbox is toggled, so results update immediately
+watch([showClosed, showNoCode], () => {
+    if (lastQuery.value) searchAirports(lastQuery.value)
+})
 </script>
 
 <template>
     <v-autocomplete
         ref="autocompleteRef"
         v-model="model"
+        v-model:menu="menuOpen"
         :label="label ?? 'Airport'"
         :items="airportOptions"
         :error-messages="errorMessages"
@@ -48,6 +68,7 @@ const searchAirports = async (query: string) => {
         clearable
         hide-no-data
         return-object
+        autocomplete="off"
         :custom-filter="() => true"
     >
         <template #prepend-inner>
@@ -55,6 +76,27 @@ const searchAirports = async (query: string) => {
             <span v-if="model" :class="`fi fi-${model.country_code}`"></span>
             </span>
         </template>
+
+        <template #prepend-item>
+            <div class="px-4 py-1 d-flex align-center" style="gap: 16px;" @mousedown.prevent>
+                <v-checkbox
+                    v-model="showClosed"
+                    label="Show Closed Airports"
+                    density="compact"
+                    hide-details
+                    style="flex: none; transform: scale(0.65); transform-origin: left center;"
+                />
+                <v-checkbox
+                    v-model="showNoCode"
+                    label="Show Airports with No Code"
+                    density="compact"
+                    hide-details
+                    style="flex: none; transform: scale(0.65); transform-origin: left center;"
+                />
+            </div>
+            <v-divider class="mt-1" />
+        </template>
+
         <template #item="{ item, props: itemProps }">
             <v-list-item v-bind="itemProps">
                 <template #prepend>
@@ -62,7 +104,6 @@ const searchAirports = async (query: string) => {
                         <span :class="`fi fi-${item.country_code}`"></span>
                     </span>
                 </template>
-
             </v-list-item>
         </template>
     </v-autocomplete>

resources/js/Components/FlightsGoneBy/DepartureBoard.vue

@@ -17,7 +17,7 @@ const props = defineProps<{
 const page = usePage<SharedProps>().props
 const ITEMS_PER_PAGE = 25
 
-const defaultColumns = ['airline', 'flight_number', 'departure_airport', 'arrival_airport', 'departure_date', 'departure_time', 'arrival_time', 'duration', 'distance', 'aircraft', 'registration', 'class_seat_combined', 'note']
+const defaultColumns = ['airline', 'flight_number', 'departure_airport', 'arrival_airport', 'departure_date', 'departure_time', 'arrival_time', 'duration', 'distance', 'aircraft', 'aircraft_registration', 'class_seat_combined', 'note']
 const columnsToShow = computed(() => page.auth.user?.resolved_settings?.departure_board_columns ?? defaultColumns)
 const showColumn = (column: string) => columnsToShow.value.includes(column)
 
@@ -38,7 +38,7 @@ const allHeaders = [
     { title: 'MODEL', key: 'aircraft.model_full_name', sortable: true },
     { title: 'AIRCRAFT', key: 'aircraft.display_name_short', sortable: true },
     { title: 'AIRCRAFT', key: 'aircraft', sortable: true },
-    { title: 'REG', key: 'registration', sortable: true },
+    { title: 'REG', key: 'aircraft_registration', sortable: true },
     { title: 'CLASS', key: 'flight_class', sortable: true },
     { title: 'CLASS', key: 'class_seat_combined', sortable: true },
     { title: 'SEAT TYPE', key: 'seat_type_id', sortable: true },
@@ -70,7 +70,7 @@ const customKeySort = {
     aircraft: (a: Flight['aircraft'], b: Flight['aircraft']) => (a?.designator ?? '').localeCompare(b?.designator ?? ''),
     duration: (a: any, b: any) => (a ?? 0) - (b ?? 0),
     departure_airport: (a: Flight['departure_airport'], b: Flight['departure_airport']) => (a?.display_code ?? '').localeCompare(b?.display_code ?? ''),
-    arrival_airport: (a: Flight['arrival_airport'], b: Flight['arrival_airport']) => (a?.display_code ?? '').localeCompare(b?.display_code ?? '')
+    arrival_airport: (a: Flight['arrival_airport'], b: Flight['arrival_airport']) => (a?.display_code ?? '').localeCompare(b?.display_code ?? ''),
 }
 
 const sortBy = ref<DataTableSortItem[]>([])

resources/js/Components/FlightsGoneBy/DepartureBoardTableRow.vue

@@ -41,7 +41,6 @@ const reasonBadgeVariant = (reason: string) => {
 }
 
 const showColumn = (column: string) => props.columnsToShow.includes(column)
-console.log(props.columnsToShow)
 </script>
 
 <template>
@@ -138,7 +137,7 @@ console.log(props.columnsToShow)
             </AircraftToolTip>
         </td>
 
-        <td v-if="showColumn('registration')" class="v-data-table__td registration-cell">
+        <td v-if="showColumn('aircraft_registration')" class="v-data-table__td registration-cell">
             <Mono muted smaller v-if="flight.aircraft_registration">{{ flight.aircraft_registration }}</Mono>
         </td>
 

resources/js/Components/FlightsGoneBy/FlightMap.vue

@@ -50,6 +50,7 @@ import {useUpdateSetting} from "@/Composables/useUpdateSetting";
 import {usePage} from "@inertiajs/vue3";
 
 
+
 type LngLat = [number, number]
 
 interface RouteFlightBucket {
@@ -290,6 +291,7 @@ export default defineComponent({
         const { updateSetting } = useUpdateSetting()
         const page = usePage<SharedProps>().props
 
+        const carto_key = page.carto_api_key
 
         let map:        maplibregl.Map    | null = null
         let popup:      maplibregl.Popup  | null = null
@@ -370,13 +372,37 @@ export default defineComponent({
             link.click()
         }
 
+        function loopPoints(origin: LngLat, radiusDeg = 0.2, steps = 48): LngLat[] {
+            const [lng, lat] = origin
+
+            // Widen the longitude radius to compensate for mercator distortion at this latitude
+            const lngRadius = radiusDeg / Math.max(Math.cos(lat * Math.PI / 180), 0.15)
+
+            // Center the loop above the origin so the airport point sits at the bottom of the loop
+            const centerLat = lat + radiusDeg
+
+            const points: LngLat[] = []
+            for (let i = 0; i <= steps; i++) {
+                const theta = (i / steps) * Math.PI * 2
+                points.push([
+                    lng + Math.sin(theta) * lngRadius,
+                    centerLat - radiusDeg * Math.cos(theta),
+                ])
+            }
+            return points // first and last point === origin, at the bottom of the loop
+        }
+
         const getArc = (flight: Flight): LngLat[] => {
             const key = routeKey(flight.departure_airport, flight.arrival_airport)
             if (!arcCache.has(key)) {
-                arcCache.set(key, greatCirclePoints(
-                    [flight.departure_airport.longitude_deg, flight.departure_airport.latitude_deg],
-                    [flight.arrival_airport.longitude_deg,   flight.arrival_airport.latitude_deg],
-                ))
+                const isSameAirport = flight.departure_airport.id === flight.arrival_airport.id
+
+                arcCache.set(key, isSameAirport
+                    ? loopPoints([flight.departure_airport.longitude_deg, flight.departure_airport.latitude_deg])
+                    : greatCirclePoints(
+                        [flight.departure_airport.longitude_deg, flight.departure_airport.latitude_deg],
+                        [flight.arrival_airport.longitude_deg,   flight.arrival_airport.latitude_deg],
+                    ))
             }
             return arcCache.get(key)!
         }
@@ -666,8 +692,10 @@ export default defineComponent({
                 ? { top: 20, bottom: 20, left: 55, right: 55 }
                 : { top: 60, bottom: 60, left: 60, right: 60 }
 
-            const lngs = props.flights.flatMap(f => [f.departure_airport.longitude_deg, f.arrival_airport.longitude_deg])
-            const lats = props.flights.flatMap(f => [f.departure_airport.latitude_deg,  f.arrival_airport.latitude_deg])
+            // Use full arc/loop geometry, not just endpoints, so loops aren't clipped
+            const allPoints = props.flights.flatMap(getArc)
+            const lngs = allPoints.map(p => p[0])
+            const lats = allPoints.map(p => p[1])
 
             const minLat = Math.min(...lats)
             const maxLat = Math.max(...lats)
@@ -689,7 +717,6 @@ export default defineComponent({
             }
             map!.fitBounds([[minLng, minLat], [maxLng, maxLat]], { padding, duration: 0 })
         }
-
         // ── Map init ──────────────────────────────────────────────────────────
 
         const initMap = (): void => {
@@ -711,10 +738,10 @@ export default defineComponent({
                                 maxzoom:  19,
                                 attribution: cartoAttribution.value,
                                 tiles: [
-                                    'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-                                    'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-                                    'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-                                    'https://d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
+                                    `https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png?key=${carto_key}`,
+                                    `https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png?key=${carto_key}`,
+                                    `https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png?key=${carto_key}`,
+                                    `https://d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png?key=${carto_key}`,
                                 ],
                             },
                         },

resources/js/Types/types.d.ts

@@ -110,6 +110,7 @@ export type SharedProps = import('@inertiajs/core').PageProps & {
     logo_api_url: string
     achievement_notifications: Notification[]
     unread_notification_count: number
+    carto_api_key: string
 }
 export interface AchievementDifficulty {
     id: number