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">
|
||||
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&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>
|
||||
<Map />
|
||||
</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>
|
||||
|
||||
<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% {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue