images keep aspect ratio now and swapped map from google to osm

Author: jonsch1

package.json

@@ -25,6 +25,7 @@
     "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "leaflet": "^1.9.4",
     "lucide-react": "^0.487.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -33,6 +34,7 @@
     "tw-animate-css": "^1.2.5"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.16"
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/leaflet": "^1.9.17"
   }
 }

pnpm-lock.yaml

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from 'react';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+interface MapProps {
+  location: {
+    latitude: number;
+    longitude: number;
+  };
+  zoom?: number;
+  markerMarkup?: string;
+}
+
+export default function Map({ location, zoom = 17, markerMarkup = '' }: MapProps) {
+  const mapRef = useRef<HTMLDivElement>(null);
+  const mapInstance = useRef<L.Map | null>(null);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    if (mapRef.current && !mapInstance.current) {
+      // Initialize the map
+      mapInstance.current = L.map(mapRef.current).setView(
+        [location.latitude, location.longitude],
+        zoom
+      );
+
+      // Add OpenStreetMap tiles
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© OpenStreetMap contributors'
+      }).addTo(mapInstance.current);
+
+      // Add marker
+      const marker = L.marker([location.latitude, location.longitude]).addTo(mapInstance.current);
+      
+      if (markerMarkup) {
+        marker.bindPopup(markerMarkup);
+      }
+    }
+
+    return () => {
+      if (mapInstance.current) {
+        mapInstance.current.remove();
+        mapInstance.current = null;
+      }
+    };
+  }, [location, zoom, markerMarkup]);
+
+  return (
+    <div 
+      ref={mapRef} 
+      className="w-full h-[15rem] shadow-md rounded-lg"
+    />
+  );
+} 

src/components/Map.tsx

@@ -45,7 +45,11 @@ export default function SoftwareCard({
       <DialogTrigger asChild>
         <div className="flex flex-row items-center space-x-4 rounded-lg border p-4 cursor-pointer hover:bg-accent/50 transition-colors">
           <Avatar className="h-32 w-32">
-            <AvatarImage src={`${getInternalLink('/software_images')}/${image}`} alt={name} />
+            <AvatarImage 
+              src={`${getInternalLink('/software_images')}/${image}`} 
+              alt={name}
+              className="object-contain object-center"
+            />
             <AvatarFallback>
               {name
                 .split(" ")
@@ -65,7 +69,11 @@ export default function SoftwareCard({
       <DialogContent className="sm:max-w-[1024px] max-h-[85vh] overflow-y-auto p-6">
         <DialogHeader className="flex flex-col sm:flex-row sm:items-start gap-4 mb-6">
           <Avatar className="w-28 h-28 border">
-            <AvatarImage src={`${getInternalLink('/software_images')}/${image}`} alt={name} />
+            <AvatarImage 
+              src={`${getInternalLink('/software_images')}/${image}`} 
+              alt={name}
+              className="object-contain object-center"
+            />
             <AvatarFallback>
               {name
                 .split(" ")

src/components/SoftwareCard.tsx

@@ -51,7 +51,11 @@ export default function TeamMemberCard({
       <DialogTrigger asChild>
         <div className="flex flex-col items-center space-y-4 rounded-lg border p-6 text-center cursor-pointer hover:bg-accent/50 transition-colors">
           <Avatar className="h-24 w-24">
-            <AvatarImage src={`${getInternalLink('/team_images')}/${image}`} alt={name} />
+            <AvatarImage 
+              src={`${getInternalLink('/team_images')}/${image}`} 
+              alt={name}
+              className="object-contain object-center"
+            />
             <AvatarFallback>
               {name
                 .split(" ")
@@ -68,7 +72,11 @@ export default function TeamMemberCard({
       <DialogContent className="sm:max-w-[1024px] max-h-[85vh] overflow-y-auto p-6">
         <DialogHeader className="flex flex-col sm:flex-row sm:items-start gap-4 mb-6">
           <Avatar className="w-28 h-28 border">
-            <AvatarImage src={`${getInternalLink('/team_images')}/${image}`} alt={name} />
+            <AvatarImage 
+              src={`${getInternalLink('/team_images')}/${image}`} 
+              alt={name}
+              className="object-contain object-center"
+            />
             <AvatarFallback>
               {name
                 .split(" ")

src/components/TeamMemberCard.tsx

@@ -1,17 +1,16 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import Map from '../components/Map';
+
+const location = { latitude: 49.41297, longitude: 8.67068 };
+const markerMarkup = "We are on the 10th floor<br>of the Marsilius-Arkaden<br>West tower (INF130.3).<br>";
 ---
 
 <Layout title="Contact">
     <div class="mx-auto max-w-[980px] py-6 md:py-12">
       <h2 class="mb-6 text-2xl font-bold">Find Us</h2>
-      <div class="aspect-video w-full overflow-hidden rounded-lg">
-        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d162.23684421613967!2d8.670751139034243!3d49.41288618943688!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4797c12ec3026749%3A0x4536c5528bf53a97!2sBetriebs%C3%A4rztlicher%20Dienst%20des%20Universit%C3%A4tsklinikums%20Heidelberg!5e0!3m2!1sde!2sde!4v1744628032901!5m2!1sde!2sde"           width="100%"
-        height="100%"
-        style="border:0;"
-        allowfullscreen=""
-        loading="lazy"
-        referrerpolicy="no-referrer-when-downgrade"></iframe>
+      <div class="w-full overflow-hidden rounded-lg">
+        <Map client:only="react" {location} zoom={17} {markerMarkup} />
       </div>
     </div>