maplibre map

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>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+	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>