Map with testing
This commit is contained in:
parent
1816858bc6
commit
948ef1ca47
|
@ -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>
|
|
@ -1,5 +1,6 @@
|
||||||
<script lang="ts">
|
<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>
|
</script>
|
||||||
|
|
||||||
<HeroSection />
|
<HeroSection />
|
||||||
|
@ -24,12 +25,7 @@
|
||||||
</figure>
|
</figure>
|
||||||
<!-- / -->
|
<!-- / -->
|
||||||
<div class="flex justify-center space-x-2">
|
<div class="flex justify-center space-x-2">
|
||||||
<a
|
<a class="btn variant-filled" href="https://skeleton.dev/" target="_blank" rel="noreferrer">
|
||||||
class="btn variant-filled"
|
|
||||||
href="https://skeleton.dev/"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
O mně
|
O mně
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -38,28 +34,8 @@
|
||||||
<p><code class="code">/src/routes/+layout.svelte</code></p>
|
<p><code class="code">/src/routes/+layout.svelte</code></p>
|
||||||
<p><code class="code">/src/routes/+page.svelte</code></p>
|
<p><code class="code">/src/routes/+page.svelte</code></p>
|
||||||
</div>
|
</div>
|
||||||
<section class="relative">
|
<Map />
|
||||||
<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&layer=mapnik&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&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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
|
@ -72,8 +48,7 @@
|
||||||
}
|
}
|
||||||
.img-bg {
|
.img-bg {
|
||||||
@apply absolute z-[-1] rounded-full blur-[50px] transition-all;
|
@apply absolute z-[-1] rounded-full blur-[50px] transition-all;
|
||||||
animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite,
|
animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite, glow 5s linear infinite;
|
||||||
glow 5s linear infinite;
|
|
||||||
}
|
}
|
||||||
@keyframes glow {
|
@keyframes glow {
|
||||||
0% {
|
0% {
|
||||||
|
|
|
@ -1,5 +1,10 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { PUBLIC_MAPBOX_ACCESS_TOKEN } from '$env/static/public';
|
import Map from "$lib/components/Map.svelte";
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Kde mě najdete? Kde mě můžete kontaktovat?</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<Map></Map>
|
||||||
|
|
Loading…
Reference in New Issue