Added popup cover images

src/assets/scss/_leaflet.scss

@@ -11,9 +11,83 @@
         .leaflet-popup-pane {
             .leaflet-popup-content-wrapper {
                 border-radius: .25rem;
+                overflow: clip;
 
                 .leaflet-popup-content {
-                    margin: .65rem 1.3rem .65rem .9rem;
+                    min-width: 20rem;
+                    margin: 1rem;
+
+                    figure {
+                        position: relative;
+                        margin-inline: -1.1rem;
+                        margin-top: -1.1rem;
+                        margin-bottom: .5rem;
+
+                        &.landscape {
+                            aspect-ratio: 16 / 9;
+                            min-width: 20rem;
+                        }
+
+                        &.portrait {
+                            aspect-ratio: 15 / 16;
+                            min-width: 10rem;
+                        }
+
+                        &::before {
+                            content: '';
+                            display: block;
+                            pointer-events: none;
+                            user-select: none;
+                            position: absolute;
+                            inset: 0;
+                            z-index: 10;
+                            // Make a linear gradient from top to bottom, from transparent to black
+                            background: linear-gradient(to bottom, transparent 70%, var(--black) 100%);
+                        }
+
+                        img {
+                            width: 100%;
+                            height: 100%;
+                            object-fit: cover;
+                            object-position: top;
+                        }
+
+                        figcaption cite {
+                            position: absolute;
+                            font-size: 85%;
+                            font-style: italic;
+                            font-weight: 600;
+                            bottom: .5rem;
+                            right: 1rem;
+                            color: var(--white);
+                            z-index: 20;
+                            opacity: .6;
+                            transition-property: opacity;
+                            transition-duration: .2s;
+                            transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
+
+                            a {
+                                padding-right: 0;
+                                color: var(--white);
+                                text-decoration: underline;
+                                text-underline-offset: .15rem;
+
+                                &:hover {
+                                    color: var(--blue-500);
+                                }
+
+                                &::after {
+                                    display: none;
+                                }
+                            }
+                        }
+
+                        &:hover {
+                            figcaption cite {
+                                opacity: 1;
+                            }
+                        }
+                    }
 
                     .title {
                         display: block;

src/components/maps/WorldMap.astro

@@ -169,22 +169,42 @@ for (let i = 0; i < markers.length; i++) {
     }
 
     const marker = L.marker(coords, { icon: markerIconOverride }).addTo(map)
+
+    // Build popup content
     let popupContent = ""
+
+    if (m.cover && m.coverAuthor && m.coverLink) {
+        const figureClass = m.coverPortrait ? 'portrait' : 'landscape';
+        const figureWidth = m.coverPortrait ? 210 : 420;
+
+        popupContent += `
+            <figure class="${figureClass}">
+                <img src="/images/cover/${m.cover}" alt="${m.title}" width="${figureWidth}" loading="lazy" />
+                <figcaption>
+                    <cite>par <a href="${m.coverLink}" target="_blank">${m.coverAuthor}</a></cite>
+                </figcaption>
+            </figure>
+        `
+    }
+
     if (m.link) {
-        popupContent = `
+        popupContent += `
             <a href="${m.link}" target="_blank" class="title">
                 ${m.title}
             </a>
-            <p>${m.description}</p>
         `
     } else {
-        popupContent = `
+        popupContent += `
             <strong class="title">
                 ${m.title}
             </strong>
-            <p>${m.description}</p>
         `
     }
+
+    if (m.description) {
+        popupContent += `<p>${m.description}</p>`
+    }
+
     marker.bindPopup(popupContent).openPopup()
 
     const displayTooltip = m.group === 'capitals'

src/components/maps/data/markers.json

@@ -8,7 +8,10 @@
             "markerCoords": {
                 "x": 83.6,
                 "y": -185.2
-            }
+            },
+            "cover": "Ambrose.jpg",
+            "coverAuthor": "Claudio Pilia",
+            "coverLink": "https://pilia-art.com/portfolio-item/game-of-thrones-the-city-of-tyrosh/"
         },
         {
             "group": "capitals",
@@ -18,7 +21,10 @@
             "markerCoords": {
                 "x": 133.46875,
                 "y": -146.0625
-            }
+            },
+            "cover": "Cordouac.jpg",
+            "coverAuthor": "Vincent Joyal",
+            "coverLink": "https://www.artstation.com/artwork/6B0b0"
         },
         {
             "group": "capitals",
@@ -38,7 +44,11 @@
             "markerCoords": {
                 "x": 132.26953,
                 "y": -98.19141
-            }
+            },
+            "cover": "Tourgrise.png",
+            "coverAuthor": "saya kuroha",
+            "coverLink": "https://www.pixiv.net/en/artworks/83793821",
+            "coverPortrait": true
         },
         {
             "group": "capitals",
@@ -68,7 +78,10 @@
             "markerCoords": {
                 "x": 168.39491,
                 "y": -109.13376
-            }
+            },
+            "cover": "Port-brisé.jpg",
+            "coverAuthor": "JC Jongwon Park",
+            "coverLink": "https://www.artstation.com/artwork/okmQL"
         },
         {
             "group": "capitals",
@@ -108,7 +121,10 @@
             "markerCoords": {
                 "x": 204.42515,
                 "y": -226.85883
-            }
+            },
+            "cover": "Soubreciel.jpg",
+            "coverAuthor": "Tony Andreas Rudolph",
+            "coverLink": "https://www.artstation.com/artwork/EB84"
         },
         {
             "group": "capitals",
@@ -148,7 +164,10 @@
             "markerCoords": {
                 "x": 138.44531,
                 "y": -51.54687
-            }
+            },
+            "cover": "Port_de_Borélis.jpeg",
+            "coverAuthor": "Anton Bezrukov",
+            "coverLink": "https://www.artstation.com/artwork/oODL5B"
         },
         {
             "group": "cities",
@@ -188,7 +207,10 @@
             "markerCoords": {
                 "x": 197.3492280183025,
                 "y": -210.87224307207197
-            }
+            },
+            "cover": "Cantane.jpg",
+            "coverAuthor": "Andreas Roller",
+            "coverLink": "https://en.wikipedia.org/wiki/Andreas_Roller"
         },
         {
             "group": "cities",
@@ -198,7 +220,10 @@
             "markerCoords": {
                 "x": 185.57431,
                 "y": -229.08588
-            }
+            },
+            "cover": "Horfer.jpg",
+            "coverAuthor": "Nele-Diel",
+            "coverLink": "https://www.deviantart.com/nele-diel/art/City-in-the-Lowlands-693529688"
         },
         {
             "group": "cities",
@@ -528,7 +553,10 @@
             "markerCoords": {
                 "x": 107.50352,
                 "y": -67.36631
-            }
+            },
+            "cover": "Willeau.jpg",
+            "coverAuthor": "Inconnu",
+            "coverLink": "https://www.hebus.com/image-339033.html"
         },
         {
             "group": "cities",
@@ -587,7 +615,11 @@
             "markerCoords": {
                 "x": 168.31641,
                 "y": -60.54297
-            }
+            },
+            "cover": "Tours_des_Cages.jpg",
+            "coverAuthor": "25kartinok",
+            "coverLink": "https://www.deviantart.com/25kartinok/art/the-dark-tower-700231527",
+            "coverPortrait": true
         },
         {
             "group": "landmarks",
@@ -816,6 +848,9 @@
                 "x": 83.80737652386473,
                 "y": -184.52963682119173
             },
+            "cover": "Académie_Centrale_Kaldélienne.jpg",
+            "coverAuthor": "Pengzhen Zhang",
+            "coverLink": "https://www.artstation.com/artwork/zAOWNd",
             "icon": "graduation-cap"
         },
         {

src/types/Leaflet.ts

@@ -13,6 +13,10 @@ export type MapMarker = {
     link?: string,
     group?: MapMarkerGroup,
     icon?: MapMarkerIcon,
+    cover?: string,
+    coverLink?: string,
+    coverAuthor?: string,
+    coverPortrait?: boolean
 }
 
 export type PlayerMarker = {