feat:map libre maps

package.json

@@ -45,7 +45,8 @@
 	"dependencies": {
 		"@node-rs/argon2": "^2.0.2",
 		"@sveltejs/adapter-vercel": "^5.10.2",
-		"postgres": "^3.4.5"
+		"postgres": "^3.4.5",
+		"svelte-maplibre": "^1.2.1"
 	},
 	"pnpm": {
 		"onlyBuiltDependencies": [

src/app.css

@@ -22,7 +22,6 @@ body {
 	line-height: 1.5;
 	background-color: #f8f8f8;
 	color: #333;
-	max-width: 1200px;
 	margin: 0 auto;
 }
 

src/lib/components/Header.svelte

@@ -20,27 +20,36 @@
 </script>
 
 <header class="app-header">
-	<h1 class="app-title">Serengo</h1>
+	<div class="header-content">
-	<div class="profile-container">
+		<h1 class="app-title">Serengo</h1>
-		<ProfileIcon username={user.username} onclick={toggleProfilePanel} />
+		<div class="profile-container">
-		<ProfilePanel
+			<ProfileIcon username={user.username} onclick={toggleProfilePanel} />
-			username={user.username}
+			<ProfilePanel
-			id={user.id}
+				username={user.username}
-			isOpen={showProfilePanel}
+				id={user.id}
-			onClose={closeProfilePanel}
+				isOpen={showProfilePanel}
-		/>
+				onClose={closeProfilePanel}
+			/>
+		</div>
 	</div>
 </header>
 
 <style>
 	.app-header {
+		width: 100%;
+		position: relative;
+		z-index: 10;
+		background-color: rgba(255, 255, 255, 0.2);
+		backdrop-filter: blur(10px);
+	}
+
+	.header-content {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: 16px 20px;
-		max-width: 1200px;
 		margin: 0 auto;
-		position: relative;
+		max-width: 1200px;
 	}
 
 	.profile-container {

src/lib/components/Map.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { MapLibre } from 'svelte-maplibre';
+	import type { StyleSpecification } from 'svelte-maplibre';
+
+	interface Props {
+		style?: StyleSpecification;
+		center?: [number, number];
+		zoom?: number;
+		class?: string;
+	}
+
+	let {
+		style = {
+			version: 8,
+			sources: {
+				'osm-raster': {
+					type: 'raster',
+					tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+					tileSize: 256,
+					attribution: '© OpenStreetMap contributors'
+				}
+			},
+			layers: [
+				{
+					id: 'osm-tiles',
+					type: 'raster',
+					source: 'osm-raster'
+				}
+			]
+		},
+		center = [0, 0],
+		zoom = 2,
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<div class="map-container {className}">
+	<MapLibre {style} {center} {zoom} />
+</div>
+
+<style>
+	.map-container :global(.maplibregl-map) {
+		margin: 0 auto;
+		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+	}
+</style>

src/lib/index.ts

@@ -6,3 +6,4 @@ export { default as ProfileIcon } from './components/ProfileIcon.svelte';
 export { default as ProfilePanel } from './components/ProfilePanel.svelte';
 export { default as Header } from './components/Header.svelte';
 export { default as Modal } from './components/Modal.svelte';
+export { default as Map } from './components/Map.svelte';

src/routes/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import { Map } from '$lib';
 </script>
 
 <div class="home-container">
 	<main class="main-content">
-		<!-- Future content will go here -->
+		<Map />
 	</main>
 </div>