145 lines
10 KiB
Plaintext
145 lines
10 KiB
Plaintext
component Map {
|
|
outputs {
|
|
// markerClick and select both fire for a marker press; select is the
|
|
// generic name callers reach for, markerClick the explicit one.
|
|
markerClick(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
select(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
zoom(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
}
|
|
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
title: string = "Map"
|
|
description: string = ""
|
|
items: unknown[] = []
|
|
variant: string = "default"
|
|
provider: string = "openstreetmap"
|
|
apiKey: string = ""
|
|
query: string = ""
|
|
latitude: number = 12.9716
|
|
longitude: number = 77.5946
|
|
zoomLevel: number = 13
|
|
mapType: string = "roadmap"
|
|
imageSrc: string = ""
|
|
imageAlt: string = "Map background"
|
|
class: string = ""
|
|
}
|
|
|
|
state imageZoom: number = 1
|
|
state selectedLabel: string = ""
|
|
functions {
|
|
shared function mapUrl() {
|
|
if (provider === "google") { return "https://www.google.com/maps/embed/v1/place?key=" + encodeURIComponent(apiKey) + "&q=" + encodeURIComponent(query || latitude + "," + longitude) + "&zoom=" + Math.max(1, Math.min(21, zoomLevel)) + "&maptype=" + (mapType === "satellite" ? "satellite" : "roadmap") }
|
|
var span = 360 / Math.pow(2, Math.max(1, Math.min(18, zoomLevel)))
|
|
return "https://www.openstreetmap.org/export/embed.html?bbox=" + (longitude - span) + "," + (latitude - span / 2) + "," + (longitude + span) + "," + (latitude + span / 2) + "&layer=mapnik&marker=" + latitude + "," + longitude
|
|
}
|
|
|
|
client function changeZoom(direction) { imageZoom = Math.max(1, Math.min(3, imageZoom + direction * .25)); output.zoom({ level: imageZoom, direction: direction > 0 ? "in" : "out" }) }
|
|
client function chooseMarker(item) { selectedLabel = item.label || item.title || "Location"; output.markerClick(item); output.select(item) }
|
|
}
|
|
view {
|
|
<section
|
|
data-ui-component="Map"
|
|
aria-label='{title}'
|
|
class='wrn-map {class}'
|
|
data-wrn-owner="Map" data-wrn-part="root" data-wrn-component="Map" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
{#if title || description}
|
|
<header class="wrn-map__header" data-wrn-owner="Map" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<div>
|
|
{#if title}
|
|
<h3 class="wrn-map__title" data-wrn-owner="Map" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{title}</h3>
|
|
{/if}
|
|
{#if description}
|
|
<p class="wrn-map__description" data-wrn-owner="Map" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description}</p>
|
|
{/if}
|
|
</div>
|
|
<span class="wrn-map__header-icon" data-wrn-owner="Map" data-wrn-part="headerIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class="icon-[lucide--map]" aria-hidden="true"></span>
|
|
</span>
|
|
</header>
|
|
{/if}
|
|
|
|
<div
|
|
class="wrn-map__viewport"
|
|
data-size='{size}'
|
|
data-wrn-owner="Map" data-wrn-part="viewport" data-wrn-axis-size='{size}' data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
{#if !imageSrc}
|
|
{#if provider === "google" && !apiKey}<p class="wrn-map__selection" data-wrn-owner="Map" data-wrn-part="selection" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">Add your Google Maps Embed API key to display this map.</p>{:else}<iframe title="{title || 'Location map'}" src="{mapUrl()}" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen style="width:100%;height:100%;min-height:320px;border:0" data-wrn-owner="Map" data-wrn-part="embeddedFrame" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></iframe>{/if}
|
|
{:else}<div class="wrn-map__canvas" style="transform:scale({imageZoom})" data-wrn-owner="Map" data-wrn-part="canvas" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
{#if imageSrc}<img class="wrn-map__image" src="{imageSrc}" alt="{imageAlt}" data-wrn-owner="Map" data-wrn-part="image" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>{/if}
|
|
<div
|
|
class="wrn-map__grid"
|
|
style="background-image: linear-gradient(var(--wrn-color-border) 1px, transparent 1px), linear-gradient(90deg, var(--wrn-color-border) 1px, transparent 1px); background-size: 32px 32px;"
|
|
aria-hidden="true"
|
|
data-wrn-owner="Map" data-wrn-part="grid" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
|
|
|
|
<div class="wrn-map__content" data-wrn-owner="Map" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<slot></slot>
|
|
</div>
|
|
|
|
{#if items.length > 0}
|
|
{#each items as item, index}
|
|
<button
|
|
type="button"
|
|
aria-label='{item.label || item.title || "Map marker"}'
|
|
class="wrn-map__marker"
|
|
style='left: {item.x || (20 + index * 12)}%; top: {item.y || (30 + (index % 3) * 18)}%;'
|
|
@click='chooseMarker(item)'
|
|
data-wrn-owner="Map" data-wrn-part="marker" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<span class='{item.icon || "icon-[lucide--map-pin]"}' aria-hidden="true"></span>
|
|
</button>
|
|
{/each}
|
|
{/if}
|
|
|
|
</div>
|
|
{#if selectedLabel}<output class="wrn-map__selection" data-wrn-owner="Map" data-wrn-part="selection" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{selectedLabel}</output>{/if}
|
|
<div class="wrn-map__controls" data-wrn-owner="Map" data-wrn-part="controls" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<button
|
|
type="button"
|
|
aria-label="Zoom in"
|
|
class="wrn-map__control"
|
|
@click='changeZoom(1)'
|
|
data-wrn-owner="Map" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<span class="icon-[lucide--plus] wrn-map__control-icon" aria-hidden="true" data-wrn-owner="Map" data-wrn-part="controlIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
aria-label="Zoom out"
|
|
class="wrn-map__control"
|
|
@click='changeZoom(-1)'
|
|
data-wrn-owner="Map" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<span class="icon-[lucide--minus] wrn-map__control-icon" aria-hidden="true" data-wrn-owner="Map" data-wrn-part="controlIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
|
</button>
|
|
</div>{/if}
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
style {
|
|
.wrn-map__canvas { position:absolute; inset:0; transition:transform 160ms ease; }
|
|
.wrn-map__image { width:100%; height:100%; object-fit:cover; }
|
|
.wrn-map__canvas:has(.wrn-map__image) .wrn-map__grid { display:none; }
|
|
.wrn-map__selection { position:absolute; inset-inline-start:1rem; bottom:1rem; padding:.5rem .75rem; border-radius:6px; background:var(--wrn-color-surface); color:var(--wrn-color-text); font-size:.875rem; }
|
|
.wrn-map__marker > span { width:1.1rem; height:1.1rem; }
|
|
|
|
.wrn-map { overflow: hidden; border: 1px solid var(--wrn-color-border); border-radius: calc(var(--wrn-radius) * 1.5); background: var(--wrn-color-surface-raised); box-shadow: var(--wrn-shadow-1); }
|
|
.wrn-map__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--wrn-color-border); }
|
|
.wrn-map__title { color: var(--wrn-color-text); font-size: 1.125rem; font-weight: 700; }
|
|
.wrn-map__description { margin-top: 0.25rem; color: var(--wrn-color-text-muted); font-size: 0.875rem; line-height: 1.5rem; }
|
|
.wrn-map__header-icon { display: flex; width: 2.5rem; height: 2.5rem; flex: none; align-items: center; justify-content: center; border-radius: var(--wrn-radius); color: var(--wrn-color-primary); background: var(--wrn-color-primary-soft); }
|
|
.wrn-map__header-icon > span { width: 1.25rem; height: 1.25rem; }
|
|
.wrn-map__viewport { position: relative; isolation: isolate; height: 20rem; overflow: hidden; background: var(--wrn-color-surface-soft); }
|
|
.wrn-map__viewport[data-size="sm"] { height: 16rem; }
|
|
.wrn-map__viewport[data-size="lg"] { height: 28rem; }
|
|
.wrn-map__grid { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; }
|
|
.wrn-map__content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
|
|
.wrn-map__marker { position: absolute; display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; padding: 0; border: 4px solid var(--wrn-color-surface-raised); border-radius: 50%; color: var(--wrn-color-on-primary); background: var(--wrn-color-primary); box-shadow: var(--wrn-shadow-3); transition: transform var(--wrn-motion-base) var(--wrn-ease-standard); }
|
|
.wrn-map__marker:hover { transform: scale(1.1); }
|
|
.wrn-map__controls { position: absolute; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
|
|
.wrn-map__control { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius); color: var(--wrn-color-text); background: var(--wrn-color-surface-raised); box-shadow: var(--wrn-shadow-1); transition: background var(--wrn-motion-base); }
|
|
.wrn-map__control:hover { background: var(--wrn-color-surface-soft); }
|
|
.wrn-map__marker:focus-visible, .wrn-map__control:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: 2px; }
|
|
.wrn-map__control-icon { width: 1rem; height: 1rem; }
|
|
}
|
|
}
|