Libre Map with tests and error handling

src/lib/components/Map.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
+  import { MapLibre, Marker, Popup } from 'svelte-maplibre';
+	import Spinner from './Spinner.svelte';
+  export let lngLat = { lng: 49.317881, lat: 14.104978 };
+  export let clazz = "absolute inset-0"
+  let hasWebGL = false;
+  let isLoading = true;
+  onMount(async () => {
+    try {
+      const canvas = document.createElement('canvas');
+      hasWebGL = !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
+    } catch (e) {
+      hasWebGL = false;
+    }
+    isLoading = false;
+  });
+</script>
+
+{#if !browser}
+  <div>Pokud chcete zobrazit mapu, zvažte použití prohlížeče, pokud jste bot či scraper, jděte se vycpat.</div>
+{:else if isLoading}
+      <Spinner/>
+{:else if hasWebGL}
+        <MapLibre 
+          center={[49.317881,14.104978]}
+          zoom={2}
+          class="map"
+          standardControls
+          style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json {clazz}"
+        >
+            <Marker
+                {lngLat}
+                class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-red-300 text-black shadow-2xl focus:outline-2 focus:outline-black"
+                >
+                <span>
+                    KKosmetickySalon Oldřichov
+                </span>
+                <Popup openOn="hover" offset={[0, -10]}>
+                    <div class="text-lg font-bold">Přijeďte ke mně :)</div>
+                </Popup>
+            </Marker>
+        </MapLibre>
+{:else}
+  <div class="map">Omlouváme se, tato funkce vyžaduje WebGL, pro zobrazení map na tomto webu ji prosím povolte.</div>
+{/if}
+
+<style>
+  :global(.map) {
+    height: 500px;
+  }
+</style>