maplibre map

website/package.json

@@ -1,33 +1,41 @@
 {
-	"name": "website",
+    "name": "website",
-	"version": "0.0.1",
+    "version": "0.0.1",
-	"private": true,
+    "private": true,
-	"scripts": {
+    "scripts": {
-		"dev": "vite dev",
+        "dev": "vite dev",
-		"build": "vite build",
+        "build": "vite build",
-		"preview": "vite preview",
+        "preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
+        "lint": "prettier --check . && eslint .",
-		"format": "prettier --write ."
+        "format": "prettier --write ."
-	},
+    },
-	"devDependencies": {
+    "devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
+        "@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
+        "@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@types/eslint": "^8.56.0",
+        "@types/eslint": "^8.56.0",
-		"@typescript-eslint/eslint-plugin": "^7.0.0",
+        "@typescript-eslint/eslint-plugin": "^7.0.0",
-		"@typescript-eslint/parser": "^7.0.0",
+        "@typescript-eslint/parser": "^7.0.0",
-		"eslint": "^8.56.0",
+        "autoprefixer": "^10.4.19",
-		"eslint-config-prettier": "^9.1.0",
+        "eslint": "^8.56.0",
-		"eslint-plugin-svelte": "^2.35.1",
+        "eslint-config-prettier": "^9.1.0",
-		"prettier": "^3.1.1",
+        "eslint-plugin-svelte": "^2.35.1",
-		"prettier-plugin-svelte": "^3.1.2",
+        "postcss": "^8.4.38",
-		"svelte": "^4.2.7",
+        "prettier": "^3.1.1",
-		"svelte-check": "^3.6.0",
+        "prettier-plugin-svelte": "^3.1.2",
-		"tslib": "^2.4.1",
+        "svelte": "^4.2.7",
-		"typescript": "^5.0.0",
+        "svelte-check": "^3.6.0",
-		"vite": "^5.0.3"
+        "tailwindcss": "^3.4.3",
-	},
+        "tslib": "^2.4.1",
-	"type": "module"
+        "typescript": "^5.0.0",
+        "vite": "^5.0.3"
+    },
+    "type": "module",
+    "dependencies": {
+        "@maplibre/maplibre-gl-geocoder": "^1.5.0",
+        "gpx": "file:../gpx",
+        "maplibre-gl": "^4.1.2"
+    }
 }

website/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

website/src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

website/src/lib/map/Map.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+
+	import maplibregl from 'maplibre-gl';
+	import 'maplibre-gl/dist/maplibre-gl.css';
+
+	import MaplibreGeocoder from '@maplibre/maplibre-gl-geocoder';
+	import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
+
+	export let map: maplibregl.Map | null = null;
+
+	onMount(() => {
+		map = new maplibregl.Map({
+			container: 'map',
+			style: 'https://demotiles.maplibre.org/style.json'
+		});
+
+		map.addControl(
+			new maplibregl.NavigationControl({
+				showCompass: false
+			})
+		);
+
+		map.addControl(
+			new maplibregl.GeolocateControl({
+				positionOptions: {
+					enableHighAccuracy: true
+				},
+				trackUserLocation: true
+			})
+		);
+
+		const geocoderApi = {
+			forwardGeocode: async (config) => {
+				const features = [];
+				try {
+					const request = `https://nominatim.openstreetmap.org/search?q=${config.query}&format=geojson&polygon_geojson=1&addressdetails=1`;
+					const response = await fetch(request);
+					const geojson = await response.json();
+					for (const feature of geojson.features) {
+						const center = [
+							feature.bbox[0] + (feature.bbox[2] - feature.bbox[0]) / 2,
+							feature.bbox[1] + (feature.bbox[3] - feature.bbox[1]) / 2
+						];
+						const point = {
+							type: 'Feature',
+							geometry: {
+								type: 'Point',
+								coordinates: center
+							},
+							place_name: feature.properties.display_name,
+							properties: feature.properties,
+							text: feature.properties.display_name,
+							place_type: ['place'],
+							center
+						};
+						features.push(point);
+					}
+				} catch (e) {
+					console.error(`Failed to forwardGeocode with error: ${e}`);
+				}
+
+				return {
+					features
+				};
+			}
+		};
+
+		map.addControl(
+			new MaplibreGeocoder(geocoderApi, {
+				maplibregl
+			})
+		);
+
+		console.log(map);
+	});
+
+	onDestroy(() => {
+		if (map) {
+			map.remove();
+		}
+	});
+</script>
+
+<div {...$$restProps}>
+	<div id="map" class="h-full"></div>
+</div>

website/src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+	import '../app.css';
+</script>
+
+<slot />

website/src/routes/+page.svelte

@@ -1,2 +1,8 @@
-<h1>Welcome to SvelteKit</h1>
+<script lang="ts">
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+	import Map from '$lib/map/Map.svelte';
+</script>
+
+<div class="flex flex-col w-screen h-screen">
+	<Map class="grow" />
+	<div class="h-1/3">Test</div>
+</div>

website/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: ['./src/**/*.{html,js,svelte,ts}'],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}
+