Madmin
/
KkosmetickySalon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Map with testing

This commit is contained in:
matthieu42morin 2024-03-25 23:33:13 +01:00
parent 1816858bc6
commit 948ef1ca47
3 changed files with 99 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/lib/components/Map.svelte Normal file
View File

@ -0,0 +1,87 @@
<script lang="ts">
import { onMount } from 'svelte';
import { browser } from '$app/environment';
import { MapLibre, Marker, Popup } from 'svelte-maplibre';
import Spinner from './Spinner.svelte';
import * as conf from '$lib/config';
import EmailObfuscated from './EmailObfuscated.svelte';
export let clazz = 'absolute inset-0';
export let lngLat = { lng: 49.317881, lat: 14.104978 };
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}
<section class="relative">
<div class="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
<div
class="lg:w-2/3 md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative"
>
<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>
<div class="bg-white relative flex flex-wrap py-6 rounded shadow-md">
<div class="lg:w-1/2 px-6">
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">Adresa</h2>
<p class="mt-1">{conf.address}</p>
</div>
<div class="lg:w-1/2 px-6 mt-4 lg:mt-0">
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">Email</h2>
<EmailObfuscated />
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">
{conf.socialLinks[1].title}
</h2>
</div>
</div>
</div>
</div>
</section>
{:else}
<div class="map">
Omlouváme se, mapy na tomto webu vyžadují funkci WebGL, pro zobrazení map ji v prohlížeči
povolte.
</div>
{/if}
<style>
:global(.map) {
height: 500px;
}
</style>

35
src/routes/(home)/+page.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
import HeroSection from "$lib/components/hero/HeroSection.svelte";
import Map from '$lib/components/Map.svelte';
import HeroSection from '$lib/components/hero/HeroSection.svelte';
</script>
<HeroSection />
@ -24,12 +25,7 @@
</figure>
<!-- / -->
<div class="flex justify-center space-x-2">
<a
class="btn variant-filled"
href="https://skeleton.dev/"
target="_blank"
rel="noreferrer"
>
<a class="btn variant-filled" href="https://skeleton.dev/" target="_blank" rel="noreferrer">
O mně
</a>
</div>
@ -38,28 +34,8 @@
<p><code class="code">/src/routes/+layout.svelte</code></p>
<p><code class="code">/src/routes/+page.svelte</code></p>
</div>
<section class="relative">
<div class="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
<div class="lg:w-2/3 md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
<iframe class="absolute inset-0" width="100%" height="100%" src="https://www.openstreetmap.org/export/embed.html?bbox=14.10176753997803%2C49.31640483169278%2C14.10820484161377%2C49.319359677506206&amp;layer=mapnik&amp;marker=49.31788227675921%2C14.104986190795898" title="map" marginheight="0" marginwidth="0" scrolling="no" style="filter: grayscale(1) contrast(1.2) opacity(0.4);" frameborder="0"></iframe>
<br/><small><a href="https://www.openstreetmap.org/?mlat=49.31788&amp;mlon=14.10499#map=18/49.31788/14.10499">View Larger Map</a></small>
<div class="bg-white relative flex flex-wrap py-6 rounded shadow-md">
<div class="lg:w-1/2 px-6">
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">ADDRESS</h2>
<p class="mt-1">Photo booth tattooed prism, portland taiyaki hoodie neutra typewriter</p>
</div>
<div class="lg:w-1/2 px-6 mt-4 lg:mt-0">
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">EMAIL</h2>
<a class="text-indigo-500 leading-relaxed">example@email.com</a>
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">PHONE</h2>
<p class="leading-relaxed">123-456-7890</p>
</div>
</div>
</div>
</div>
</section>
<Map />
</div>
</div>
<style lang="postcss">
@ -72,8 +48,7 @@
}
.img-bg {
@apply absolute z-[-1] rounded-full blur-[50px] transition-all;
animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite,
glow 5s linear infinite;
animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite, glow 5s linear infinite;
}
@keyframes glow {
0% {

9
src/routes/kontakt/+page.svelte
View File

@ -1,5 +1,10 @@
<script lang="ts">
import { PUBLIC_MAPBOX_ACCESS_TOKEN } from '$env/static/public';
import Map from "$lib/components/Map.svelte";
</script>
<svelte:head>
<title>Kde mě najdete? Kde mě můžete kontaktovat?</title>
</svelte:head>
<Map></Map>