diff --git a/public/images/cover/Académie_Centrale_Kaldélienne.jpg b/public/images/cover/Académie_Centrale_Kaldélienne.jpg
new file mode 100644
index 00000000..191bf7be
Binary files /dev/null and b/public/images/cover/Académie_Centrale_Kaldélienne.jpg differ
diff --git a/public/images/cover/Ambrose.jpg b/public/images/cover/Ambrose.jpg
new file mode 100644
index 00000000..79bbbb0d
Binary files /dev/null and b/public/images/cover/Ambrose.jpg differ
diff --git a/public/images/cover/Cantane.jpg b/public/images/cover/Cantane.jpg
new file mode 100644
index 00000000..e6125031
Binary files /dev/null and b/public/images/cover/Cantane.jpg differ
diff --git a/public/images/cover/Cordouac.jpg b/public/images/cover/Cordouac.jpg
new file mode 100644
index 00000000..7860a34c
Binary files /dev/null and b/public/images/cover/Cordouac.jpg differ
diff --git a/public/images/cover/Horfer.jpg b/public/images/cover/Horfer.jpg
new file mode 100644
index 00000000..bf2acf58
Binary files /dev/null and b/public/images/cover/Horfer.jpg differ
diff --git a/public/images/cover/Port-brisé.jpg b/public/images/cover/Port-brisé.jpg
new file mode 100644
index 00000000..5a31ecb2
Binary files /dev/null and b/public/images/cover/Port-brisé.jpg differ
diff --git a/public/images/cover/Port_de_Borélis.jpeg b/public/images/cover/Port_de_Borélis.jpeg
new file mode 100644
index 00000000..8ff797ab
Binary files /dev/null and b/public/images/cover/Port_de_Borélis.jpeg differ
diff --git a/public/images/cover/Soubreciel.jpg b/public/images/cover/Soubreciel.jpg
new file mode 100644
index 00000000..4a2265b2
Binary files /dev/null and b/public/images/cover/Soubreciel.jpg differ
diff --git a/public/images/cover/Tourgrise.png b/public/images/cover/Tourgrise.png
new file mode 100644
index 00000000..f100dcc4
Binary files /dev/null and b/public/images/cover/Tourgrise.png differ
diff --git a/public/images/cover/Tours_des_Cages.jpg b/public/images/cover/Tours_des_Cages.jpg
new file mode 100644
index 00000000..5f5ea2c1
Binary files /dev/null and b/public/images/cover/Tours_des_Cages.jpg differ
diff --git a/public/images/cover/Willeau.jpg b/public/images/cover/Willeau.jpg
new file mode 100644
index 00000000..9e1eabff
Binary files /dev/null and b/public/images/cover/Willeau.jpg differ
diff --git a/src/assets/scss/_leaflet.scss b/src/assets/scss/_leaflet.scss
index 5407bf9e..59834318 100644
--- a/src/assets/scss/_leaflet.scss
+++ b/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;
diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro
index 2a0bd965..4acddf60 100644
--- a/src/components/maps/WorldMap.astro
+++ b/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 += `
+
+ 
+
+ par ${m.coverAuthor}
+
+
+ `
+ }
+
if (m.link) {
- popupContent = `
+ popupContent += `
${m.title}
- ${m.description}
`
} else {
- popupContent = `
+ popupContent += `
${m.title}
- ${m.description}
`
}
+
+ if (m.description) {
+ popupContent += `${m.description}
`
+ }
+
marker.bindPopup(popupContent).openPopup()
const displayTooltip = m.group === 'capitals'
diff --git a/src/components/maps/data/markers.json b/src/components/maps/data/markers.json
index 912521cb..190f921e 100644
--- a/src/components/maps/data/markers.json
+++ b/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"
},
{
diff --git a/src/types/Leaflet.ts b/src/types/Leaflet.ts
index ec67cfba..44032d89 100644
--- a/src/types/Leaflet.ts
+++ b/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 = {