feat: additional valve input types

2025-07-02 17:45:42 +04:00
parent 7adb15d4b0
commit f55e93cabe
4 changed files with 140 additions and 1 deletions
@@ -0,0 +1,74 @@
+<script>
+	import L from 'leaflet';
+	import 'leaflet/dist/leaflet.css';
+	import { onMount, onDestroy } from 'svelte';
+
+	let map;
+	let mapElement;
+
+	export let setViewLocation = [51.505, -0.09];
+	export let points = [];
+
+	export let onClick = (e) => {};
+
+	let markerGroupLayer = null;
+
+	const setMarkers = (points) => {
+		if (map) {
+			if (markerGroupLayer) {
+				map.removeLayer(markerGroupLayer);
+			}
+
+			let markers = [];
+			for (let point of points) {
+				const marker = L.marker(point.coords).bindPopup(point.content);
+
+				markers.push(marker);
+			}
+
+			markerGroupLayer = L.featureGroup(markers).addTo(map);
+
+			try {
+				map.fitBounds(markerGroupLayer.getBounds(), {
+					maxZoom: 13
+				});
+			} catch (error) {
+				console.error('Error fitting bounds for markers:', error);
+			}
+		}
+	};
+
+	onMount(async () => {
+		map = L.map(mapElement).setView(setViewLocation ? setViewLocation : [51.505, -0.09], 10);
+
+		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			attribution:
+				'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+		}).addTo(map);
+
+		setMarkers(points);
+
+		map.on('click', (e) => {
+			console.log(e.latlng);
+			onClick(`${e.latlng.lat}, ${e.latlng.lng}`);
+
+			setMarkers([
+				{
+					coords: [e.latlng.lat, e.latlng.lng],
+					content: `Lat: ${e.latlng.lat}, Lng: ${e.latlng.lng}`
+				}
+			]);
+		});
+	});
+
+	onDestroy(async () => {
+		if (map) {
+			console.log('Unloading Leaflet map.');
+			map.remove();
+		}
+	});
+</script>
+
+<div class=" z-10 w-full">
+	<div bind:this={mapElement} class="h-96 z-10" />
+</div>