<script lang="ts">
	import { Marker } from "svelte-maplibre-gl";
	import { map } from "./map.svelte";

	let { hazard, lat, lon }: { hazard: string; lat: number; lon: number } =
		$props();
	let img: HTMLImageElement | undefined = $state();
</script>

<img
	src="/img/hazards/{hazard}.png"
	alt="{hazard} Marker"
	bind:this={img}
	style="width: 32px; {map.zoom < 15 ? 'display: none;' : ''}"
/>
<Marker
	lnglat={{
		lat: lat,
		lng: lon,
	}}
	element={img}
/>
