Redownload when region data version changes

backend/server/adventures/admin.py

@@ -22,7 +22,7 @@ class AdventureAdmin(admin.ModelAdmin):
 
 class CountryAdmin(admin.ModelAdmin):
     list_display = ('name', 'country_code', 'number_of_regions')
-    list_filter = ('country_code', 'subregion')
+    list_filter = ('subregion',)
 
     def number_of_regions(self, obj):
         return Region.objects.filter(country=obj).count()
@@ -32,6 +32,7 @@ class CountryAdmin(admin.ModelAdmin):
 
 class RegionAdmin(admin.ModelAdmin):
     list_display = ('name', 'country', 'number_of_visits')
+    list_filter = ('country',)
     # list_filter = ('country', 'number_of_visits')
 
     def number_of_visits(self, obj):

backend/server/worldtravel/management/commands/download-countries.py

@@ -38,7 +38,7 @@ class Command(BaseCommand):
     help = 'Imports the world travel data'
 
     def handle(self, *args, **options):
-        countries_json_path = os.path.join(settings.MEDIA_ROOT, 'countries+regions.json')
+        countries_json_path = os.path.join(settings.MEDIA_ROOT, f'countries+regions-{COUNTRY_REGION_JSON_VERSION}.json')
         if not os.path.exists(countries_json_path):
             res = requests.get(f'https://raw.githubusercontent.com/dr5hn/countries-states-cities-database/{COUNTRY_REGION_JSON_VERSION}/countries%2Bstates.json')
             if res.status_code == 200:

backend/server/worldtravel/views.py

@@ -34,7 +34,7 @@ def visits_by_country(request, country_code):
     return Response(serializer.data)
 
 class CountryViewSet(viewsets.ReadOnlyModelViewSet):
-    queryset = Country.objects.all()
+    queryset = Country.objects.all().order_by('name')
     serializer_class = CountrySerializer
     permission_classes = [IsAuthenticated]
 

frontend/src/routes/worldtravel/[id]/+page.svelte

@@ -1,6 +1,17 @@
 <script lang="ts">
 	import RegionCard from '$lib/components/RegionCard.svelte';
 	import type { Region, VisitedRegion } from '$lib/types';
+	import {
+		DefaultMarker,
+		MapEvents,
+		MapLibre,
+		Popup,
+		Marker,
+		GeoJSON,
+		LineLayer,
+		FillLayer,
+		SymbolLayer
+	} from 'svelte-maplibre';
 	import type { PageData } from './$types';
 	export let data: PageData;
 	let regions: Region[] = data.props?.regions || [];
@@ -47,6 +58,23 @@
 	{/each}
 </div>
 
+{#if data.props && data.props.regions}
+	<MapLibre
+		style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+		class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
+		standardControls
+	>
+		{#each data.props.regions as marker}
+			<DefaultMarker lngLat={[marker.longitude, marker.latitude]}>
+				<Popup openOn="click" offset={[0, -10]}>
+					<div class="text-lg text-black font-bold">{marker.name}</div>
+					<p class="font-semibold text-black text-md">{marker.id}</p>
+				</Popup>
+			</DefaultMarker>
+		{/each}
+	</MapLibre>
+{/if}
+
 <svelte:head>
 	<title
 		>{data.props && data.props.country ? `Regions in ${data.props.country.name}` : 'Regions'}</title