lodging beta

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

@@ -11,6 +11,7 @@
 	import EditAdventure from '$lib/components/EditAdventure.svelte';
 	import NotFound from '$lib/components/NotFound.svelte';
 	import NewAdventure from '$lib/components/NewAdventure.svelte';
+	import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre';
 
 	export let data: PageData;
 
@@ -239,6 +240,15 @@
 					>
 						Lodging</button
 					>
+					<button
+						class="btn btn-primary"
+						on:click={() => {
+							isShowingCreateModal = true;
+							newType = 'dining';
+						}}
+					>
+						Dining</button
+					>
 
 					<!-- <button
 			class="btn btn-primary"
@@ -324,5 +334,35 @@
 				<p class="text-center text-lg mt-2">No adventures planned for this day.</p>
 			{/if}
 		{/each}
+		<div class="flex items-center justify-center w-10/12">
+			<MapLibre
+				style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+				class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
+				standardControls
+			>
+				<!-- MapEvents gives you access to map events even from other components inside the map,
+  where you might not have access to the top-level `MapLibre` component. In this case
+  it would also work to just use on:click on the MapLibre component itself. -->
+				<!-- <MapEvents on:click={addMarker} /> -->
+
+				{#each adventures as adventure}
+					{#if adventure.longitude && adventure.latitude}
+						<DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}>
+							<Popup openOn="click" offset={[0, -10]}>
+								<div class="text-lg text-black font-bold">{adventure.name}</div>
+								<p class="font-semibold text-black text-md">
+									{adventure.type.charAt(0).toUpperCase() + adventure.type.slice(1)}
+								</p>
+								<p>
+									{adventure.date
+										? new Date(adventure.date).toLocaleDateString('en-US', { timeZone: 'UTC' })
+										: ''}
+								</p>
+							</Popup>
+						</DefaultMarker>
+					{/if}
+				{/each}
+			</MapLibre>
+		</div>
 	{/if}
 {/if}