Add clear map function

backend/server/worldtravel/serializers.py

@@ -16,13 +16,13 @@ class CountrySerializer(serializers.ModelSerializer):
     class Meta:
         model = Country
         fields = '__all__'  # Serialize all fields of the Adventure model
-        read_only_fields = ['id', 'name', 'country_code', 'continent', 'flag_url', 'geometry']
+        read_only_fields = ['id', 'name', 'country_code', 'continent', 'flag_url']
 
 class RegionSerializer(serializers.ModelSerializer):
     class Meta:
         model = Region
         fields = '__all__'  # Serialize all fields of the Adventure model
-        read_only_fields = ['id', 'name', 'country', 'name_en']
+        read_only_fields = ['id', 'name', 'country', 'name_en', 'geometry']
 
 class VisitedRegionSerializer(serializers.ModelSerializer):
     class Meta:

frontend/src/lib/components/AdventureModal.svelte

@@ -101,6 +101,13 @@
 		}
 	}
 
+	function clearMap() {
+		console.log('CLEAR');
+		markers = [];
+		region_id = null;
+		region_name = null;
+	}
+
 	let imageSearch: string = adventure.name || '';
 
 	async function removeImage(id: string) {
@@ -298,6 +305,9 @@
 			if (data.in_region) {
 				region_name = data.region_name;
 				region_id = data.region_id;
+			} else {
+				region_id = null;
+				region_name = null;
 			}
 		}
 
@@ -637,6 +647,9 @@
 									bind:value={query}
 								/>
 								<button class="btn btn-neutral -mt-1" type="submit">Search</button>
+								<button class="btn btn-neutral -mt-1" type="button" on:click={clearMap}
+									>Clear Map</button
+								>
 							</form>
 						</div>
 						{#if places.length > 0}