fix: filter also on map

Author: LvanWissen

src/lib/components/Map.svelte

@@ -19,6 +19,7 @@
 	let minimumFilterValue = 1895;
 	let maximumFilterValue = new Date().getFullYear();
 
+	let selectedVenueTypes: { label: string; value: string }[] = [];
 	export let data: FeatureCollection | null;
 
 	onMount(() => {
@@ -138,13 +139,28 @@
 		}
 	});
 
-	const updateFilter = (min: number, max: number) => {
+	const updateFilter = (
+		min: number,
+		max: number,
+		selectedVenueTypes?: { label: string; value: string }[]
+	) => {
 		if (!$map?.style) return;
-		$map?.setFilter('venues', [
+
+		let filter = [
 			'any',
 			['all', ['>=', ['get', 'startYear'], min], ['<=', ['get', 'startYear'], max]],
 			['all', ['>=', ['get', 'endYear'], min], ['<=', ['get', 'endYear'], max]]
-		]);
+		];
+
+		if (selectedVenueTypes?.length) {
+			const typeFilter = [
+				'any',
+				...selectedVenueTypes.map((type) => ['in', type.value, ['get', 'type']])
+			];
+			filter = ['all', filter, typeFilter];
+		}
+
+		$map?.setFilter('venues', filter);
 	};
 
 	const updateVisibleFeatures = () => {
@@ -155,7 +171,7 @@
 	};
 
 	$: {
-		updateFilter(minimumFilterValue, maximumFilterValue);
+		updateFilter(minimumFilterValue, maximumFilterValue, selectedVenueTypes);
 		updateVisibleFeatures();
 	}
 
@@ -208,7 +224,7 @@
 
 	<!-- TypeFilter-->
 	<div class="absolute top-0 right-0 z-10 mr-4">
-		<TypeFilter />
+		<TypeFilter bind:selectedVenueTypes />
 	</div>
 
 	<!-- Map -->

src/lib/components/TypeFilter.svelte

@@ -4,14 +4,16 @@
 	import { type Option } from 'svelte-multiselect';
 	import { type Venue } from '$lib/types';
 
-	let selected: { label: string; value: string }[] = $state([]);
+	let { selectedVenueTypes = $bindable(), ...props } = $props();
 
 	$effect(() => {
 		$filteredVisibleFeatures = $visibleFeatures.filter((feature) => {
 			const venue: Venue = JSON.parse(feature.properties.venue);
 			return (
-				selected.length === 0 ||
-				selected.some((option) => venue.additionalType.some((type) => type['@id'] === option.value))
+				selectedVenueTypes.length === 0 ||
+				selectedVenueTypes.some((option) =>
+					venue.additionalType.some((type) => type['@id'] === option.value)
+				)
 			);
 		});
 	});
@@ -22,6 +24,6 @@
 		<h2 class="card-title text-xs sm:text-sm md:text-lg">Filter</h2>
 		<p class="text-xs sm:text-sm md:text-base">Filter by venue type</p>
 
-		<MultiSelect bind:selected options={$venueTypes as Option[]} />
+		<MultiSelect bind:selected={selectedVenueTypes} options={$venueTypes as Option[]} />
 	</div>
 </div>

src/lib/components/VenuePreviewList.svelte

@@ -4,7 +4,9 @@
 </script>
 
 <ul class="bg-base-100 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-1">
-	{#each $filteredVisibleFeatures as feature (feature.id)}
+	<code>{JSON.stringify($filteredVisibleFeatures, null, 2)}</code>
+
+	{#each $filteredVisibleFeatures as feature, index (index)}
 		<VenuePreview venue={JSON.parse(feature.properties.venue)} id={feature.id ?? ''} />
 	{/each}
 </ul>

src/lib/stores.ts

@@ -11,4 +11,4 @@ export const filteredVisibleFeatures = writable<maplibregl.MapGeoJSONFeature[]>(
 
 export const map = writable<maplibregl.Map | null>(null);
 
-export const venueTypes = writable<{ label: string; value: string }[]>([]);
+export const venueTypes = writable<{ label: string; value: string }[]>([]);

src/lib/utils.ts

@@ -18,6 +18,7 @@ const convertToGeoJson = (data: Venue[]) => {
 		type: 'FeatureCollection',
 		features: data.map((venue) => {
 			const i = data.indexOf(venue);
+			const type = venue.additionalType.map((type) => type['@id']);
 			const startYear = venue.location.startDate
 				? new Date(venue.location.startDate).getFullYear()
 				: null;
@@ -33,6 +34,7 @@ const convertToGeoJson = (data: Venue[]) => {
 				},
 				properties: {
 					name: venue.name,
+					type: type,
 					startYear: startYear,
 					endYear: endYear,
 					venue: venue // Full venue data (as string)