components:map tests
This commit is contained in:
parent
b5f9431593
commit
7de1df59fd
@ -15,23 +15,19 @@ export default async function getProcessedImage(src, transformConfigs) {
|
||||
throwErrorIfUnsupported(src, extname(src).slice(1));
|
||||
|
||||
let base;
|
||||
|
||||
if (src.match("(http://|https://|data:image/).*")) {
|
||||
({ src, base } = await getResolvedSrc(src));
|
||||
({ src, base } = await getResolvedSrc(src))
|
||||
} else {
|
||||
const {
|
||||
default: { isSsrBuild },
|
||||
} = await import("../../astroViteConfigs.js");
|
||||
} = await import("../../astroViteConfigs.js")
|
||||
|
||||
if (isSsrBuild) {
|
||||
const filename = fileURLToPath(import.meta.url);
|
||||
|
||||
const assetPath = resolve(filename, "../../client") + src;
|
||||
|
||||
const filename = fileURLToPath(import.meta.url)
|
||||
const assetPath = resolve(filename, "../../client") + src
|
||||
src = "/" + relative(cwd, assetPath);
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
w,
|
||||
h,
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
---
|
||||
import { Location, Options } from './map-types';
|
||||
|
||||
import { Location, Options } from './map-types'
|
||||
import { Img } from "imagetools/components"
|
||||
|
||||
interface Props {
|
||||
locations?: Location[];
|
||||
@ -14,11 +16,13 @@ const { locations = [
|
||||
{
|
||||
geo: { lat: -2.272012, lon: 40.890586 },
|
||||
title: 'Shela Beach'
|
||||
},
|
||||
{
|
||||
geo: { lat: -1.075012, lon: 40.890586 },
|
||||
title: 'Shela Beach2'
|
||||
}
|
||||
], options = {} } = Astro.props;
|
||||
|
||||
const { zoom = 10, api_key = '' } = options;
|
||||
|
||||
const { zoom = 9, api_key = '' } = options;
|
||||
// Generate markers query param
|
||||
const markersParam = locations.map((loc, index) => `markers=color:red%7Clabel:${String.fromCharCode(65 + index)}%7C${loc.geo.lat},${loc.geo.lon}`).join('&');
|
||||
|
||||
@ -26,21 +30,21 @@ const centerLat = locations.reduce((sum, loc) => sum + loc.geo.lat, 0) / locatio
|
||||
const centerLon = locations.reduce((sum, loc) => sum + loc.geo.lon, 0) / locations.length;
|
||||
|
||||
const googleMapsUrl = api_key ?
|
||||
`https://maps.googleapis.com/maps/api/staticmap?center=${centerLat},${centerLon}&zoom=${zoom}&size=600x400&${markersParam}&key=${api_key}` : null;
|
||||
`https://maps.googleapis.com/maps/api/staticmap?center=${centerLat},${centerLon}&size=1200x600&${markersParam}&key=${api_key}` : null;
|
||||
|
||||
const hasError = !api_key;
|
||||
---
|
||||
|
||||
<div class="map-container w-full max-w-4xl mx-auto border border-gray-200 rounded-lg overflow-hidden shadow-md">
|
||||
<div class="map-container w-full max-w-4xl mx-auto border border-gray-200 rounded-lg overflow-hidden shadow-md m-4">
|
||||
{!hasError ? (
|
||||
<div class="relative w-full h-full">
|
||||
<img
|
||||
<img
|
||||
src={googleMapsUrl}
|
||||
alt="Map showing locations"
|
||||
class="w-full h-auto" width="600"
|
||||
height="400"
|
||||
/>
|
||||
<div class="absolute bottom-0 w-full bg-white/[70%] p-4 backdrop-blur-sm">
|
||||
<div class="bottom-0 w-full bg-white/[70%] p-4 backdrop-blur-sm">
|
||||
<ul class="space-y-1">
|
||||
{locations.map((loc, index) => (
|
||||
<li key={index} class="flex items-center gap-2">
|
||||
@ -62,7 +66,6 @@ const hasError = !api_key;
|
||||
</div>
|
||||
<style>
|
||||
.map-container {
|
||||
aspect-ratio: 6 / 4;
|
||||
max-height: 400px;
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -3,6 +3,7 @@ import BaseLayout from "./BaseLayout.astro";
|
||||
import { createMarkdownComponent } from "@/base/index.js";
|
||||
import { translate } from "@/base/i18n.js";
|
||||
import Wrapper from "@/components/containers/Wrapper.astro";
|
||||
|
||||
import Translate from "@/components/polymech/i18n.astro";
|
||||
import Readme from "@/components/polymech/readme.astro";
|
||||
import LGallery from "@/components/polymech/GalleryK.astro"
|
||||
@ -10,6 +11,7 @@ import Resources from "@/components/polymech/resources.astro"
|
||||
import Specs from "@/components/polymech/specs.astro"
|
||||
import TabButton from "@/components/polymech/tab-button.astro"
|
||||
import TabContent from "@/components/polymech/tab-content.astro"
|
||||
import Map from "@/components/polymech/map.astro"
|
||||
|
||||
import "flowbite"
|
||||
|
||||
@ -60,9 +62,7 @@ const Content_Debug = await createMarkdownComponent(str_debug)
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-2 just xl:grid-cols-2 gap-2">
|
||||
<div class="flex flex-col gap-2 h-full justify-between">
|
||||
<div>
|
||||
|
||||
{
|
||||
<article class="markdown-content bg-white rounded-xl p-4 " >
|
||||
<article class="markdown-content bg-white rounded-xl p-4 " >
|
||||
<h1 class="text-neutral-500 font-mono font-semibold mb-2 text-2xl">
|
||||
<Translate>{`${data.title}`}</Translate></span>
|
||||
{ isRTL(Astro.currentLocale) && (
|
||||
@ -73,7 +73,7 @@ const Content_Debug = await createMarkdownComponent(str_debug)
|
||||
</h1>
|
||||
<Body/>
|
||||
</article>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="gap-2 flex flex-col h-full justify-end">
|
||||
|
||||
@ -1,18 +1,25 @@
|
||||
---
|
||||
import BaseLayout from "@/layouts/BaseLayout.astro";
|
||||
import BaseLayout from "@/layouts/BaseLayout.astro"
|
||||
import Wrapper from "@/components/containers/Wrapper.astro"
|
||||
import { getCollection } from "astro:content"
|
||||
import KBot from "@/components/polymech/kbot.astro"
|
||||
const locale = Astro.currentLocale
|
||||
const store = `${locale}/store/`
|
||||
const blog = `/blog/posts/`
|
||||
|
||||
import Wrapper from "@/components/containers/Wrapper.astro";
|
||||
import { getCollection } from "astro:content";
|
||||
import Map from "@/components/polymech/map.astro"
|
||||
|
||||
const mapOptions = {
|
||||
zoom: 9,
|
||||
api_key: "AIzaSyCHsscCXksisHKMnUihOxl2X1mKny-qrqk"
|
||||
}
|
||||
|
||||
import KBot from "@/components/polymech/kbot.astro";
|
||||
const locale = Astro.currentLocale;
|
||||
const store = `${locale}/store/`;
|
||||
const blog = `/blog/posts/`;
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
<Wrapper variant="standard" class="py-4">
|
||||
<section>
|
||||
<Map options={mapOptions} />
|
||||
<div class="py-2 space-y-2">
|
||||
<div class="grid md:grid-cols-1 lg:grid-cols-1 gap-4" >
|
||||
<KBot router="openai" model="gpt-4.5-preview" mode="completion" template="code_simple" disabled={true}>
|
||||
|
||||
Reference in New Issue
Block a user