From 1d7163165ae6b3a33e9e1c496d5a60d2136b9724 Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Thu, 15 May 2025 15:29:19 +0200
Subject: [PATCH 1/3] Add new Map component.

---
 src/components/Map.astro    | 90 ++++++++++++++++++++++++++++++++-----
 src/content/pages/venue.mdx |  2 +-
 2 files changed, 81 insertions(+), 11 deletions(-)

diff --git a/src/components/Map.astro b/src/components/Map.astro
index ebe0b858c..54ed526cd 100644
--- a/src/components/Map.astro
+++ b/src/components/Map.astro
@@ -1,10 +1,80 @@
-  <Fragment is:raw>
-  <iframe
-    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10245.064741908278!2d14.4290206!3d50.0625764!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x4d26855708eb61f7!2sPrague%20Congress%20Centre!5e0!3m2!1sen!2suk!4v1676555813425!5m2!1sen!2suk"
-    title="Map"
-    class="w-full aspect-video max-w-[800px] border-4 border-white rounded-lg shadow-lg"
-    allowFullScreen="true"
-    loading="lazy"
-    referrerPolicy="no-referrer-when-downgrade"
-  ></iframe>
-  </Fragment>
+---
+interface Props {
+  location?: string;
+  embedCode?: string;
+  mapId?: string;
+  lat?: number;
+  lng?: number;
+  zoom?: number;
+  mapType?: "roadmap" | "satellite" | "hybrid" | "terrain";
+  title?: string;
+  width?: string;
+  maxWidth?: string;
+  aspectRatio?: string;
+  borderWidth?: string;
+  borderColor?: string;
+  rounded?: string;
+  shadow?: string;
+  loading?: "eager" | "lazy";
+  referrerPolicy?: string;
+}
+
+const {
+  location,
+  embedCode,
+  mapId,
+  lat,
+  lng,
+  zoom = 14,
+  mapType = "roadmap",
+  title = "Map",
+  loading = "lazy",
+  referrerPolicy = "no-referrer-when-downgrade",
+} = Astro.props;
+
+
+let src = "";
+
+if (embedCode) {
+  const srcMatch = embedCode.match(/src="([^"]+)"/);
+  src = srcMatch ? srcMatch[1] : "";
+}
+else if (lat && lng) {
+  src = `https://maps.google.com/maps?q=${lat},${lng}&z=${zoom}&t=${
+    mapType === "satellite" ? "k" :
+    mapType === "hybrid" ? "h" :
+    mapType === "terrain" ? "p" : "m"
+  }&output=embed`;
+}
+
+else if (mapId) {
+  src = `https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3000!2d-73.9857!3d40.7484!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s${mapId}!2s!5e0!3m2!1sen!2sus!4v1684164357244!5m2!1sen!2sus`;
+}
+else if (location) {
+  src = `https://maps.google.com/maps?q=${encodeURIComponent(location)}&t=${
+    mapType === "satellite" ? "k" :
+    mapType === "hybrid" ? "h" :
+    mapType === "terrain" ? "p" : "m"
+  }&z=${zoom}&output=embed&iwloc=near`;
+}
+---
+
+<div class="astro-map-container w-full aspect-video max-w-[800px] border-4 border-white rounded-lg shadow-lg">
+  {src && (
+    <iframe
+      src={src}
+      title={title}
+      class="w-full aspect-video "
+      allowFullScreen={true}
+      loading={loading}
+      referrerPolicy={referrerPolicy}
+      style="border:0;"
+    ></iframe>
+  )}
+</div>
+
+<style>
+  .astro-map-container {
+    width: 100%;
+  }
+</style>
diff --git a/src/content/pages/venue.mdx b/src/content/pages/venue.mdx
index f0d2e8efd..67df616e9 100644
--- a/src/content/pages/venue.mdx
+++ b/src/content/pages/venue.mdx
@@ -23,7 +23,7 @@ Vyšehrad station (on Line C of the Prague underground railway) is right next to
 the venue and offers convenient public transport from the airport and all major
 rail and bus stations.
 
-<Map />
+<Map location="Prague Congress Centre" zoom={15} />
 
 <address>
 **Entrance 5**

From 8c2b20d1ac2d80c95e531a61011541ef1dcdb5a2 Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Thu, 15 May 2025 18:20:17 +0200
Subject: [PATCH 2/3] Map update.

---
 src/components/Map.astro   | 23 +++-------
 src/content/pages/test.mdx | 86 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+), 17 deletions(-)

diff --git a/src/components/Map.astro b/src/components/Map.astro
index 54ed526cd..cfabd5dab 100644
--- a/src/components/Map.astro
+++ b/src/components/Map.astro
@@ -1,4 +1,6 @@
 ---
+import type { HTMLAttributeReferrerPolicy } from 'react';
+
 interface Props {
   location?: string;
   embedCode?: string;
@@ -8,15 +10,8 @@ interface Props {
   zoom?: number;
   mapType?: "roadmap" | "satellite" | "hybrid" | "terrain";
   title?: string;
-  width?: string;
-  maxWidth?: string;
-  aspectRatio?: string;
-  borderWidth?: string;
-  borderColor?: string;
-  rounded?: string;
-  shadow?: string;
   loading?: "eager" | "lazy";
-  referrerPolicy?: string;
+  referrerPolicy?: HTMLAttributeReferrerPolicy;
 }
 
 const {
@@ -64,17 +59,11 @@ else if (location) {
     <iframe
       src={src}
       title={title}
-      class="w-full aspect-video "
-      allowFullScreen={true}
+      class="w-full aspect-video"
+      allowfullscreen={true}
       loading={loading}
-      referrerPolicy={referrerPolicy}
+      referrerpolicy={referrerPolicy}
       style="border:0;"
     ></iframe>
   )}
 </div>
-
-<style>
-  .astro-map-container {
-    width: 100%;
-  }
-</style>
diff --git a/src/content/pages/test.mdx b/src/content/pages/test.mdx
index 90bc1f5f8..7350d73a6 100644
--- a/src/content/pages/test.mdx
+++ b/src/content/pages/test.mdx
@@ -281,3 +281,89 @@ Barking up the right tree
 <Accordion title="Finnish-speaking dogs" id="finnish">
   ***Hau hau!***
 </Accordion>
+
+## Maps
+
+<h2>Example 1: Map with Location</h2>
+<Map
+  location="Empire State Building, New York"
+  zoom={15}
+/>
+
+<h2>Example 2: Map with Location and Custom Map Type</h2>
+<Map
+  location="Grand Canyon, Arizona"
+  mapType="satellite"
+  zoom={12}
+/>
+
+<h2>Example 3: Map with Coordinates (Latitude & Longitude)</h2>
+<Map
+  lat={48.8584}
+  lng={2.2945}
+  zoom={16}
+  title="Eiffel Tower, Paris"
+/>
+
+<h2>Example 4: Map with Coordinates and Terrain Map Type</h2>
+<Map
+  lat={36.1069}
+  lng={-112.1129}
+  mapType="terrain"
+  zoom={13}
+  title="Grand Canyon"
+/>
+
+<h2>Example 5: Map with Hybrid Map Type</h2>
+<Map
+  location="Sydney Opera House"
+  mapType="hybrid"
+  zoom={17}
+/>
+
+<h2>Example 6: Map with Map ID</h2>
+<Map
+  mapId="0x89c259a944867e5b:0xb2c96748fa5e9cf"
+  title="Central Park, New York"
+/>
+
+<h2>Example 7: Map with Embed Code from Google Maps</h2>
+<Map
+  embedCode='<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.9916256937586!2d2.2922926156740954!3d48.858370079287475!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2964e34e2d%3A0x8ddca9ee380ef7e0!2sEiffel%20Tower!5e0!3m2!1sen!2sus!4v1621536319249!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>'
+  title="Eiffel Tower Embed"
+/>
+
+<h2>Example 8: Map with Loading Performance Options</h2>
+<Map
+  location="Golden Gate Bridge, San Francisco"
+  loading="eager"
+  referrerPolicy="strict-origin"
+/>
+
+<h2>Example 9: Map with All Default Values</h2>
+<Map
+  location="Statue of Liberty, New York"
+/>
+
+<h2>Example 10: Full Custom Configuration</h2>
+<Map
+  lat={40.7484}
+  lng={-73.9857}
+  zoom={16}
+  mapType="hybrid"
+  title="Empire State Building"
+  loading="eager"
+  referrerPolicy="no-referrer"
+/>
+
+<h2>Usage in Layout</h2>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+  <div>
+    <h3>New York</h3>
+    <Map location="New York, NY" />
+  </div>
+  <div>
+    <h3>London</h3>
+    <Map location="London, UK" />
+  </div>
+</div>

From 3b63d86421e711c62d883c317d1700f7a8a61171 Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Thu, 15 May 2025 21:47:46 +0200
Subject: [PATCH 3/3] Simplify component features, update examples.

---
 src/components/Map.astro   | 43 ++++------------------------
 src/content/pages/test.mdx | 57 ++++++--------------------------------
 2 files changed, 14 insertions(+), 86 deletions(-)

diff --git a/src/components/Map.astro b/src/components/Map.astro
index cfabd5dab..4a71f03cd 100644
--- a/src/components/Map.astro
+++ b/src/components/Map.astro
@@ -1,68 +1,37 @@
 ---
-import type { HTMLAttributeReferrerPolicy } from 'react';
-
 interface Props {
   location?: string;
-  embedCode?: string;
-  mapId?: string;
   lat?: number;
   lng?: number;
   zoom?: number;
-  mapType?: "roadmap" | "satellite" | "hybrid" | "terrain";
   title?: string;
-  loading?: "eager" | "lazy";
-  referrerPolicy?: HTMLAttributeReferrerPolicy;
 }
 
 const {
   location,
-  embedCode,
-  mapId,
   lat,
   lng,
   zoom = 14,
-  mapType = "roadmap",
   title = "Map",
-  loading = "lazy",
-  referrerPolicy = "no-referrer-when-downgrade",
 } = Astro.props;
 
-
 let src = "";
-
-if (embedCode) {
-  const srcMatch = embedCode.match(/src="([^"]+)"/);
-  src = srcMatch ? srcMatch[1] : "";
-}
-else if (lat && lng) {
-  src = `https://maps.google.com/maps?q=${lat},${lng}&z=${zoom}&t=${
-    mapType === "satellite" ? "k" :
-    mapType === "hybrid" ? "h" :
-    mapType === "terrain" ? "p" : "m"
-  }&output=embed`;
-}
-
-else if (mapId) {
-  src = `https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3000!2d-73.9857!3d40.7484!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s${mapId}!2s!5e0!3m2!1sen!2sus!4v1684164357244!5m2!1sen!2sus`;
+if (lat && lng) {
+  src = `https://maps.google.com/maps?q=${lat},${lng}&z=${zoom}&t=m&output=embed`;
 }
 else if (location) {
-  src = `https://maps.google.com/maps?q=${encodeURIComponent(location)}&t=${
-    mapType === "satellite" ? "k" :
-    mapType === "hybrid" ? "h" :
-    mapType === "terrain" ? "p" : "m"
-  }&z=${zoom}&output=embed&iwloc=near`;
+  src = `https://maps.google.com/maps?q=${encodeURIComponent(location)}&t=m&z=${zoom}&output=embed&iwloc=near`;
 }
 ---
-
-<div class="astro-map-container w-full aspect-video max-w-[800px] border-4 border-white rounded-lg shadow-lg">
+<div class="map-container w-full aspect-video max-w-[800px] border-4 border-white rounded-lg shadow-lg">
   {src && (
     <iframe
       src={src}
       title={title}
       class="w-full aspect-video"
       allowfullscreen={true}
-      loading={loading}
-      referrerpolicy={referrerPolicy}
+      loading="lazy"
+      referrerpolicy="no-referrer-when-downgrade"
       style="border:0;"
     ></iframe>
   )}
diff --git a/src/content/pages/test.mdx b/src/content/pages/test.mdx
index 7350d73a6..6a60bfc69 100644
--- a/src/content/pages/test.mdx
+++ b/src/content/pages/test.mdx
@@ -283,21 +283,13 @@ Barking up the right tree
 </Accordion>
 
 ## Maps
-
 <h2>Example 1: Map with Location</h2>
 <Map
   location="Empire State Building, New York"
   zoom={15}
 />
 
-<h2>Example 2: Map with Location and Custom Map Type</h2>
-<Map
-  location="Grand Canyon, Arizona"
-  mapType="satellite"
-  zoom={12}
-/>
-
-<h2>Example 3: Map with Coordinates (Latitude & Longitude)</h2>
+<h2>Example 2: Map with Coordinates (Latitude & Longitude)</h2>
 <Map
   lat={48.8584}
   lng={2.2945}
@@ -305,57 +297,24 @@ Barking up the right tree
   title="Eiffel Tower, Paris"
 />
 
-<h2>Example 4: Map with Coordinates and Terrain Map Type</h2>
-<Map
-  lat={36.1069}
-  lng={-112.1129}
-  mapType="terrain"
-  zoom={13}
-  title="Grand Canyon"
-/>
-
-<h2>Example 5: Map with Hybrid Map Type</h2>
+<h2>Example 3: Map with Default Zoom Level</h2>
 <Map
   location="Sydney Opera House"
-  mapType="hybrid"
-  zoom={17}
 />
 
-<h2>Example 6: Map with Map ID</h2>
+<h2>Example 4: Map with Custom Title</h2>
 <Map
-  mapId="0x89c259a944867e5b:0xb2c96748fa5e9cf"
-  title="Central Park, New York"
-/>
-
-<h2>Example 7: Map with Embed Code from Google Maps</h2>
-<Map
-  embedCode='<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.9916256937586!2d2.2922926156740954!3d48.858370079287475!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2964e34e2d%3A0x8ddca9ee380ef7e0!2sEiffel%20Tower!5e0!3m2!1sen!2sus!4v1621536319249!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>'
-  title="Eiffel Tower Embed"
-/>
-
-<h2>Example 8: Map with Loading Performance Options</h2>
-<Map
-  location="Golden Gate Bridge, San Francisco"
-  loading="eager"
-  referrerPolicy="strict-origin"
+  lat={36.1069}
+  lng={-112.1129}
+  zoom={13}
+  title="Grand Canyon"
 />
 
-<h2>Example 9: Map with All Default Values</h2>
+<h2>Example 5: Map with All Default Values</h2>
 <Map
   location="Statue of Liberty, New York"
 />
 
-<h2>Example 10: Full Custom Configuration</h2>
-<Map
-  lat={40.7484}
-  lng={-73.9857}
-  zoom={16}
-  mapType="hybrid"
-  title="Empire State Building"
-  loading="eager"
-  referrerPolicy="no-referrer"
-/>
-
 <h2>Usage in Layout</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
   <div>