Joururi/leim-maps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed marker builder

Browse Source 
They're in the DOM now, so much easier to manage
This commit is contained in:
Alexis
2025-03-23 21:19:13 +01:00
parent 78c1991f6a
commit 3460689d3d
3 changed files with 32 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/scss/_leaflet.scss
View File

@@ -121,7 +121,7 @@
}
}
> * + * {
.tooltip-content > * + * {
margin: 0;
margin-top: .4em;
}

78
src/components/maps/Map.astro
View File

@@ -32,6 +32,33 @@ const seeMapText = t('maps.go-to-map', lang)
<MarkerCreator client:only="vue" mapKey={mapKey} />
</div>
{markers.map((m, index) => (
<div id="popup-template" data-id={`marker-${index}`} class="tooltip-content">
{m.cover && m.coverAuthor && m.coverLink && (
<figure class={m.coverPortrait ? 'portrait' : 'landscape'}>
<img src={`/images/cover/${m.cover}`} alt={m.title} width={m.coverPortrait ? 210 : 420} />
<figcaption>
<cite>{byText} <a href={m.coverLink} target="_blank">{m.coverAuthor}</a></cite>
</figcaption>
</figure>
)}
{m.link ? (
<a href={m.link} target="_blank" class="title">{m.title}</a>
) : (
<strong class="title">{m.title}</strong>
)}
{m.description && <p>{m.description}</p>}
{m.mapId && (
<a href={m.mapId} class="map-link">
<span>
{ seeMapText }
</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="80" y1="112" x2="144" y2="112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="112" y1="80" x2="112" y2="144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
</a>
)}
</div>
))}
</div>
<script
@@ -219,54 +246,9 @@ 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}" />
<figcaption>
<cite>${byText} <a href="${m.coverLink}" target="_blank">${m.coverAuthor}</a></cite>
</figcaption>
</figure>
`
}
if (m.link) {
popupContent += `
<a href="${m.link}" target="_blank" class="title">
${m.title}
</a>
`
} else {
popupContent += `
<strong class="title">
${m.title}
</strong>
`
}
if (m.description) {
popupContent += `<p>${m.description}</p>`
}
if (m.mapId) {
popupContent += `
<a href="${m.mapId}" class="map-link">
<span>
${ seeMapText }
</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="80" y1="112" x2="144" y2="112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="112" y1="80" x2="112" y2="144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
</a>
`
}
marker.bindPopup(popupContent).openPopup()
// Get popup content
const popupTemplate = document.querySelector(`#popup-template[data-id="marker-${i}"]`)
marker.bindPopup(popupTemplate)
const displayTooltip = m.group === 'capitals'

2
src/i18n/ui.ts
View File

@@ -1,4 +1,4 @@
export const availableLangs = ['en', 'fr'] as const;
export const availableLangs = ['fr', 'en'] as const;
export type Language = typeof availableLangs[number];
export type LanguageDict = Record<Language, any>;