From 2ddd0704d78b0a16bb4f2d6db111273f20e82f1e Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Tue, 30 Sep 2025 18:52:11 +0200
Subject: [PATCH] Add interactive map to Impressum with configurable
 coordinates

- Add OpenStreetMap iframe to legal page showing business location
- Support ADDRESS_LATITUDE and ADDRESS_LONGITUDE environment variables
- Generate dynamic map URLs based on configured coordinates
- Include link to full map view
- Update legal-config.ts interface to include latitude/longitude
- Document new environment variables in README.md
- Use Kiel coordinates as default (54.3233, 10.1228)
---
 README.md                            |  6 ++--
 src/client/app.tsx                   |  2 +-
 src/client/components/legal-page.tsx | 46 ++++++++++++++++++++++++++++
 src/server/lib/legal-config.ts       |  8 +++--
 4 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 1b50afe..a684640 100644
--- a/README.md
+++ b/README.md
@@ -73,10 +73,12 @@ MIN_STORNO_TIMESPAN=24
 # Legal Information (Impressum/Datenschutz)
 COMPANY_NAME=Stargirlnails Kiel
 OWNER_NAME=Inhaber Name
-ADDRESS_STREET=Musterstraße 123
+ADDRESS_STREET=Liebigstr. 15
 ADDRESS_CITY=Kiel
-ADDRESS_POSTAL_CODE=24103
+ADDRESS_POSTAL_CODE=24145
 ADDRESS_COUNTRY=Deutschland
+ADDRESS_LATITUDE=54.3233  # Optional: GPS-Koordinaten für Karte
+ADDRESS_LONGITUDE=10.1228  # Optional: GPS-Koordinaten für Karte
 CONTACT_PHONE=+49 431 123456
 CONTACT_EMAIL=info@stargirlnails.de
 TAX_ID=12/345/67890  # Optional
diff --git a/src/client/app.tsx b/src/client/app.tsx
index 4b06a50..e3c40f5 100644
--- a/src/client/app.tsx
+++ b/src/client/app.tsx
@@ -251,7 +251,7 @@ function App() {
       <footer className="bg-white border-t border-pink-100 mt-16">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
           <div className="text-center text-gray-600">
-            <p>&copy; 2024 Stargirlnails Kiel. Professional nail care services.</p>
+            <p>&copy; 2025 Stargirlnails Kiel. Professional nail design & care with 🩷 and passion in Kiel 🌇.</p>
           </div>
         </div>
       </footer>
diff --git a/src/client/components/legal-page.tsx b/src/client/components/legal-page.tsx
index 532c58f..fa3b735 100644
--- a/src/client/components/legal-page.tsx
+++ b/src/client/components/legal-page.tsx
@@ -1,6 +1,21 @@
 import React, { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 
+// Helper function to generate map coordinates based on address
+function generateMapUrl(address: any) {
+  // Use coordinates from config or default to Kiel coordinates
+  const lat = address.latitude || 54.3233;
+  const lon = address.longitude || 10.1228;
+  
+  // Generate bounding box around the coordinates (0.05 degrees ≈ 5km radius)
+  const bbox = `${lon - 0.05},${lat - 0.05},${lon + 0.05},${lat + 0.05}`;
+  
+  const embedUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${lat},${lon}`;
+  const fullUrl = `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lon}#map=16/${lat}/${lon}`;
+  
+  return { embedUrl, fullUrl };
+}
+
 export default function LegalPage() {
   const [activeSection, setActiveSection] = useState<"impressum" | "datenschutz">("impressum");
 
@@ -137,6 +152,37 @@ export default function LegalPage() {
                     {legalConfig.address.postalCode} {legalConfig.address.city}<br />
                     {legalConfig.address.country}
                   </p>
+                  
+                  {/* Map */}
+                  <div className="mt-4">
+                    {(() => {
+                      const { embedUrl, fullUrl } = generateMapUrl(legalConfig.address);
+                      return (
+                        <>
+                          <iframe
+                            src={embedUrl}
+                            width="100%"
+                            height="300"
+                            style={{ border: 0 }}
+                            allowFullScreen
+                            loading="lazy"
+                            referrerPolicy="no-referrer-when-downgrade"
+                            title={`Karte der Umgebung von ${legalConfig.companyName}`}
+                          ></iframe>
+                          <div className="mt-2">
+                            <a 
+                              href={fullUrl}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-sm text-blue-600 hover:text-blue-800 underline"
+                            >
+                              Größere Karte anzeigen
+                            </a>
+                          </div>
+                        </>
+                      );
+                    })()}
+                  </div>
                 </div>
 
                 <div>
diff --git a/src/server/lib/legal-config.ts b/src/server/lib/legal-config.ts
index 1fe6f51..1953532 100644
--- a/src/server/lib/legal-config.ts
+++ b/src/server/lib/legal-config.ts
@@ -8,6 +8,8 @@ export interface LegalConfig {
     city: string;
     postalCode: string;
     country: string;
+    latitude?: number;
+    longitude?: number;
   };
   contact: {
     phone: string;
@@ -41,10 +43,12 @@ export const defaultLegalConfig: LegalConfig = {
   companyName: process.env.COMPANY_NAME || "Stargirlnails Kiel",
   ownerName: process.env.OWNER_NAME || "Inhaber Name",
   address: {
-    street: process.env.ADDRESS_STREET || "Musterstraße 123",
+    street: process.env.ADDRESS_STREET || "Liebigstr. 15",
     city: process.env.ADDRESS_CITY || "Kiel",
-    postalCode: process.env.ADDRESS_POSTAL_CODE || "24103",
+    postalCode: process.env.ADDRESS_POSTAL_CODE || "24145",
     country: process.env.ADDRESS_COUNTRY || "Deutschland",
+    latitude: process.env.ADDRESS_LATITUDE ? parseFloat(process.env.ADDRESS_LATITUDE) : 54.3233,
+    longitude: process.env.ADDRESS_LONGITUDE ? parseFloat(process.env.ADDRESS_LONGITUDE) : 10.1228,
   },
   contact: {
     phone: process.env.CONTACT_PHONE || "+49 431 123456",