Merge branch 'cleanup'

astro.config.mjs

@@ -11,11 +11,5 @@ export default defineConfig({
   integrations: [vue(), sitemap()],
   output: 'static',
   site: 'https://maps.alexcreates.fr',
-//   i18n: {
+  prefetch: true
-//     locales: availableLangs,
-//     defaultLocale: defaultLang,
-//     routing: {
-//         prefixDefaultLocale: true,
-//     }
-//   }
 });

package.json

@@ -1,7 +1,7 @@
 {
   "name": "leim-maps",
   "type": "module",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -11,17 +11,17 @@
   },
   "dependencies": {
     "@astrojs/sitemap": "^3.3.0",
-    "@astrojs/vue": "^5.0.7",
+    "@astrojs/vue": "^5.0.9",
     "@nanostores/persistent": "^0.10.2",
     "@nanostores/vue": "^0.11.0",
     "@types/leaflet": "^1.9.17",
     "@vueuse/core": "^13.0.0",
-    "astro": "^5.5.4",
+    "astro": "^5.6.1",
     "nanostores": "^0.11.4",
     "radix-vue": "^1.9.17",
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "sass": "^1.86.0"
+    "sass": "^1.86.3"
   }
 }

pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - esbuild
+  - sharp
+  - vue-demi

public/js/leaflet-zoomify.min.js

@@ -1,130 +1,4 @@
-/*
+L.TileLayer.Zoomify=L.TileLayer.extend({options:{width:-1,height:-1,tileGroupPrefix:'TileGroup',tilesPerTileGroup:256},initialize:function(url,options){L.TileLayer.prototype.initialize.call(this,url,options);if(this.options.width<0||this.options.height<0){throw new Error('The user must set the Width and Height of the Zoomify image')}},beforeAdd:function(map){var imageSize=L.point(this.options.width,this.options.height);this._imageSize=[imageSize];this._gridSize=[this._getGridSize(imageSize)];while(imageSize.x>this.options.tileSize||imageSize.y>this.options.tileSize){imageSize=imageSize.divideBy(2).ceil();this._imageSize.push(imageSize);this._gridSize.push(this._getGridSize(imageSize))}
- * L.TileLayer.Zoomify display Zoomify tiles with Leaflet
+this._imageSize.reverse();this._gridSize.reverse();var maxNativeZoom=this._gridSize.length-1;this.options.maxNativeZoom=maxNativeZoom;var maxZoomGrid=this._gridSize[maxNativeZoom],maxX=maxZoomGrid.x*this.options.tileSize,maxY=maxZoomGrid.y*this.options.tileSize,southEast=map.unproject([maxX,maxY],maxNativeZoom);this.options.bounds=new L.LatLngBounds([[0,0],southEast]);L.TileLayer.prototype.beforeAdd.call(this,map)},_getGridSize:function(imageSize){var tileSize=this.options.tileSize;return L.point(Math.ceil(imageSize.x/tileSize),Math.ceil(imageSize.y/tileSize))},_addTile:function(coords,container){L.TileLayer.prototype._addTile.call(this,coords,container);var imageSize=this._imageSize[this._getZoomForUrl()],gridSize=this._gridSize[this._getZoomForUrl()];var realTileSize=L.GridLayer.prototype.getTileSize.call(this),displayTileSize=L.TileLayer.prototype.getTileSize.call(this);var key=this._tileCoordsToKey(coords),tile=this._tiles[key].el;var scaleFactor=L.point((imageSize.x%realTileSize.x),(imageSize.y%realTileSize.y)).unscaleBy(realTileSize);if((imageSize.x%realTileSize.x)>0&&coords.x===gridSize.x-1){tile.style.width=displayTileSize.scaleBy(scaleFactor).x+'px'}
- *
+if((imageSize.y%realTileSize.y)>0&&coords.y===gridSize.y-1){tile.style.height=displayTileSize.scaleBy(scaleFactor).y+'px'}},getTileUrl:function(coords){this.options.g=this.options.tileGroupPrefix+this._getTileGroup(coords);return L.TileLayer.prototype.getTileUrl.call(this,coords)},_getTileGroup:function(coords){var zoom=this._getZoomForUrl(),num=0,gridSize;for(var z=0;z<zoom;z++){gridSize=this._gridSize[z];num+=gridSize.x*gridSize.y}
- * Based on the Leaflet.Zoomify (https://github.com/turban/Leaflet.Zoomify)
+num+=coords.y*this._gridSize[zoom].x+coords.x;return Math.floor(num/this.options.tilesPerTileGroup)},getBounds:function(){return this.options.bounds}});L.tileLayer.zoomify=function(url,options){return new L.TileLayer.Zoomify(url,options)}
- * from turban (https://github.com/turban)
- *
- */
-
-L.TileLayer.Zoomify = L.TileLayer.extend({
-	options: {
-		width: -1, // Must be set by user, max zoom image width
-		height: -1, // Must be set by user, max zoom image height
-		tileGroupPrefix: 'TileGroup',
-		tilesPerTileGroup: 256
-	},
-
-	initialize: function (url, options) {
-		L.TileLayer.prototype.initialize.call(this, url, options);
-
-		// Replace with automatic loading from ImageProperties.xml
-		if (this.options.width < 0 || this.options.height < 0) {
-			throw new Error('The user must set the Width and Height of the Zoomify image');
-		}
-	},
-
-	beforeAdd: function (map) {
-		var imageSize = L.point(this.options.width, this.options.height);
-
-		// Build the zoom sizes of the pyramid and cache them in an array
-		this._imageSize = [imageSize];
-		this._gridSize = [this._getGridSize(imageSize)];
-
-		// Register the image size in pixels and the grid size in # of tiles for each zoom level
-		while (imageSize.x > this.options.tileSize || imageSize.y > this.options.tileSize) {
-			imageSize = imageSize.divideBy(2).ceil();
-			this._imageSize.push(imageSize);
-			this._gridSize.push(this._getGridSize(imageSize));
-		}
-
-		// We built the cache from bottom to top, but leaflet uses a top to bottom index for the zoomlevel,
-		// so reverse it for easy indexing by current zoomlevel
-		this._imageSize.reverse();
-		this._gridSize.reverse();
-
-		// Register our max supported zoom level
-		var maxNativeZoom = this._gridSize.length - 1;
-		this.options.maxNativeZoom = maxNativeZoom;
-
-		// Register our bounds for this zoomify layer based on the maximum zoom
-		var maxZoomGrid = this._gridSize[maxNativeZoom],
-		maxX = maxZoomGrid.x * this.options.tileSize,
-		maxY = maxZoomGrid.y * this.options.tileSize,
-		southEast = map.unproject([maxX, maxY], maxNativeZoom);
-		this.options.bounds = new L.LatLngBounds([[0, 0], southEast]);
-
-		L.TileLayer.prototype.beforeAdd.call(this, map);
-	},
-
-	// Calculate the grid size for a given image size (based on tile size)
-	_getGridSize: function (imageSize) {
-		var tileSize = this.options.tileSize;
-		return L.point(Math.ceil(imageSize.x / tileSize), Math.ceil(imageSize.y / tileSize));
-	},
-
-	// Extend the add tile function to update our arbitrary sized border tiles
-	_addTile: function (coords, container) {
-		// Load the tile via the original leaflet code
-		L.TileLayer.prototype._addTile.call(this, coords, container);
-
-		// Get out imagesize in pixels for this zoom level and our grid size
-		var imageSize = this._imageSize[this._getZoomForUrl()],
-		    gridSize = this._gridSize[this._getZoomForUrl()];
-
-		// The real tile size (default:256) and the display tile size (if zoom > maxNativeZoom)
-		var realTileSize = L.GridLayer.prototype.getTileSize.call(this),
-		    displayTileSize = L.TileLayer.prototype.getTileSize.call(this);
-
-		// Get the current tile to adjust
-		var key = this._tileCoordsToKey(coords),
-		    tile = this._tiles[key].el;
-
-		// Calculate the required size of the border tiles
-		var scaleFactor = L.point(	(imageSize.x % realTileSize.x),
-									(imageSize.y % realTileSize.y)).unscaleBy(realTileSize);
-
-		// Update tile dimensions if we are on a border
-		if ((imageSize.x % realTileSize.x) > 0 && coords.x === gridSize.x - 1) {
-			tile.style.width = displayTileSize.scaleBy(scaleFactor).x + 'px';
-		}
-
-		if ((imageSize.y % realTileSize.y) > 0 && coords.y === gridSize.y - 1) {
-			tile.style.height = displayTileSize.scaleBy(scaleFactor).y + 'px';
-		}
-	},
-
-	// Construct the tile url, by inserting our tilegroup before we template the url
-	getTileUrl: function (coords) {
-		// Set our TileGroup variable, and then let the original tile templater do the work
-		this.options.g = this.options.tileGroupPrefix + this._getTileGroup(coords);
-
-		// Call the original templater
-		return L.TileLayer.prototype.getTileUrl.call(this, coords);
-	},
-
-	// Calculates the TileGroup number, each group contains 256 tiles. The tiles are stored from topleft to bottomright
-	_getTileGroup: function (coords) {
-		var zoom = this._getZoomForUrl(),
-		    num = 0,
-		    gridSize;
-
-		// Get the total number of tiles from the lowest zoom level to our zoomlevel
-		for (var z = 0; z < zoom; z++) {
-			gridSize = this._gridSize[z];
-			num += gridSize.x * gridSize.y;
-		}
-
-		// Add the remaining tiles from this zoom layer to the running total of tiles
-		num += coords.y * this._gridSize[zoom].x + coords.x;
-		return Math.floor(num / this.options.tilesPerTileGroup);
-	},
-
-	getBounds: function () {
-		return this.options.bounds;
-	}
-
-});
-
-L.tileLayer.zoomify = function (url, options) {
-	return new L.TileLayer.Zoomify(url, options);
-};

src/assets/scss/_leaflet.scss

@@ -16,121 +16,6 @@
                 .leaflet-popup-content {
                     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;
-                        font-weight: 600;
-                    }
-
-                    strong.title {
-                        color: var(--green-500);
-                    }
-
-                    a.title,
-                    a.map-link {
-                        text-underline-offset: 2px;
-                        text-decoration: underline;
-
-                        &:hover,
-                        &:focus-visible {
-                            text-decoration: none;
-                            color: var(--green-500);
-                        }
-                    }
-
-                    .map-link {
-                        display: inline-flex;
-                        align-items: center;
-                        gap: .5ch;
-
-                        svg {
-                            width: 1rem;
-                            height: 1rem;
-                        }
-                    }
-
-                    .tooltip-content > * + * {
-                        margin: 0;
-                        margin-top: .66em;
-                    }
-
-                    .tooltip-footer {
-                        display: grid;
-                        gap: .15em;
-                        font-size: .95em;
-                    }
                 }
             }
 
@@ -139,6 +24,7 @@
                 height: .8rem;
             }
         }
+
         .leaflet-tooltip-pane {
             .leaflet-tooltip {
                 &.capital-name {

src/components/maps/Map.astro

@@ -2,10 +2,7 @@
 import type { MapMarker, PlayerMarker } from '@/types/Leaflet';
 import type { MapProps } from '@/types/Map';
 import MarkerCreator from './overlay/MarkerCreator.vue';
-import { t } from '@/i18n/store';
+import MarkerContent from './MarkerContent.astro';
-import { getLangFromUrl } from '@/i18n/utils';
-import { normalizeString } from '@/utils/Strings';
-import CopyText from '../global/CopyText.astro';
 
 interface Props extends MapProps {}
 
@@ -21,55 +18,19 @@ const {
     rulerHideWalkDistance = false,
     backgroundColor = 'transparent',
 } = Astro.props
-
-const lang = getLangFromUrl(Astro.url);
-
-const byText = t('common.by', lang)
-const seeMapText = t('maps.go-to-map', lang)
 ---
 
 <div class="map-wrapper">
-    <div class="world-wrapper">
+    <main class="world-wrapper">
         <div id="world"></div>
     
         <MarkerCreator client:only="vue" mapKey={mapKey} />
-    </div>
+    </main>
 
     <div style="height: 0; width: 0; overflow: hidden; display: none;">
         {markers.map((m, index) => (
-            <div id="popup-template" data-id={`marker-${index}`} class="tooltip-content">
+            <div id="popup-template" data-id={`marker-${index}`}>
-                {m.cover && m.coverAuthor && m.coverLink && (
+                <MarkerContent marker={m} />
-                    <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>}
-
-                <div class="tooltip-footer">
-                    {m.mapId && (
-                        <div>
-                            <a href={m.mapId} class="map-link">
-                                <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>
-
-                                <span>
-                                    { seeMapText }
-                                </span>
-                            </a>
-                        </div>
-                    )}
-
-                    <div>
-                        <CopyText text={`${Astro.url}?p=${normalizeString(m.title)}`} />
-                    </div>
-                </div>
             </div>
         ))}
     </div>
@@ -85,9 +46,7 @@ const seeMapText = t('maps.go-to-map', lang)
         mapWidth,
         rulerDistanceRatio,
         rulerMainUnit,
-        rulerHideWalkDistance,
+        rulerHideWalkDistance
-        byText,
-        seeMapText
     }}
     defer
 >

src/components/maps/MapOverlayBreadcrumbs.astro

@@ -17,15 +17,15 @@ const { breadcrumbs = [] } = Astro.props
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="folder"><path d="M245,110.64A16,16,0,0,0,232,104H216V88a16,16,0,0,0-16-16H130.67L102.94,51.2a16.14,16.14,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V208h0a8,8,0,0,0,8,8H211.1a8,8,0,0,0,7.59-5.47l28.49-85.47A16.05,16.05,0,0,0,245,110.64ZM93.34,64,123.2,86.4A8,8,0,0,0,128,88h72v16H69.77a16,16,0,0,0-15.18,10.94L40,158.7V64Z"></path></svg>
 
                         <span class="breadcrumb" aria-current="page">
-                            <span class="label">
+                            <h1 class="label">
                                 {breadcrumb.name}
-                            </span>
+                            </h1>
                         </span>
                     }
                     {!(index === breadcrumbs.length - 1) &&
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="folder"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>
 
-                        <a href={breadcrumb.url} class="breadcrumb" class:list={{ active: index === breadcrumbs.length - 1 }}>
+                        <a href={breadcrumb.url} class="breadcrumb" class:list={{ active: index === breadcrumbs.length - 1 }} data-astro-prefetch="hover">
                             <span class="label">
                                 {breadcrumb.name}
                             </span>

src/components/maps/MarkerContent.astro

@@ -0,0 +1,176 @@
+---
+import type { MapMarker } from '@/types/Leaflet';
+import { normalizeString } from '@/utils/Strings';
+import { getLangFromUrl } from '@/i18n/utils';
+import { t } from '@/i18n/store';
+
+import CopyText from '@/components/global/CopyText.astro';
+
+interface Props {
+    marker: MapMarker
+}
+
+const { marker: m } = Astro.props as Props;
+
+const lang = getLangFromUrl(Astro.url);
+
+const byText = t('common.by', lang)
+const seeMapText = t('maps.go-to-map', lang)
+---
+
+<div 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>
+                <span class="author">
+                    <span>{byText}</span>
+                    <cite>
+                        <a href={m.coverLink} target="_blank">{m.coverAuthor}</a>
+                    </cite>
+                </span>
+            </figcaption>
+        </figure>
+    )}
+    {m.link ? (
+        <a href={m.link} target="_blank" class="title">{m.title}</a>
+    ) : (
+        <strong class="title">{m.title}</strong>
+    )}
+    {m.description && <p set:html={m.description} />}
+    
+    <div class="tooltip-footer">
+        {m.mapId && (
+            <div>
+                <a href={m.mapId} class="map-link">
+                    <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>
+    
+                    <span>
+                        { seeMapText }
+                    </span>
+                </a>
+            </div>
+        )}
+    
+        <div>
+            <CopyText text={`${Astro.url}?p=${normalizeString(m.title)}`} />
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    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 .author {
+            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 .author {
+                opacity: 1;
+            }
+        }
+    }
+
+    .title {
+        display: block;
+        font-weight: 600;
+    }
+
+    strong.title {
+        color: var(--green-500);
+    }
+
+    a.title,
+    a.map-link {
+        text-underline-offset: 2px;
+        text-decoration: underline;
+
+        &:hover,
+        &:focus-visible {
+            text-decoration: none;
+            color: var(--green-500);
+        }
+    }
+
+    .map-link {
+        display: inline-flex;
+        align-items: center;
+        gap: .5ch;
+
+        svg {
+            width: 1rem;
+            height: 1rem;
+        }
+    }
+
+    .tooltip-content > * + * {
+        margin: 0;
+        margin-top: .66em;
+    }
+
+    .tooltip-footer {
+        display: grid;
+        gap: .15em;
+        font-size: .95em;
+    }
+</style>

src/components/maps/data/en/aldys/markers.json

@@ -9,7 +9,7 @@
                 "x": 83.6,
                 "y": -185.2
             },
-            "cover": "Ambrose.jpg",
+            "cover": "Ambrose.webp",
             "coverAuthor": "Claudio Pilia",
             "coverLink": "https://pilia-art.com/portfolio-item/game-of-thrones-the-city-of-tyrosh/"
         },
@@ -22,7 +22,7 @@
                 "x": 133.46875,
                 "y": -146.0625
             },
-            "cover": "Cordouac.jpg",
+            "cover": "Cordouac.webp",
             "coverAuthor": "Vincent Joyal",
             "coverLink": "https://www.artstation.com/artwork/6B0b0"
         },
@@ -45,7 +45,7 @@
                 "x": 132.26953,
                 "y": -98.19141
             },
-            "cover": "Tourgrise.png",
+            "cover": "Tourgrise.webp",
             "coverAuthor": "saya kuroha",
             "coverLink": "https://www.pixiv.net/en/artworks/83793821",
             "coverPortrait": true
@@ -79,7 +79,7 @@
                 "x": 168.39491,
                 "y": -109.13376
             },
-            "cover": "Port-brisé.jpg",
+            "cover": "Port-brisé.webp",
             "coverAuthor": "JC Jongwon Park",
             "coverLink": "https://www.artstation.com/artwork/okmQL"
         },
@@ -122,7 +122,7 @@
                 "x": 204.42515,
                 "y": -226.85883
             },
-            "cover": "Soubreciel.jpg",
+            "cover": "Soubreciel.webp",
             "coverAuthor": "Tony Andreas Rudolph",
             "coverLink": "https://www.artstation.com/artwork/EB84"
         },
@@ -166,7 +166,7 @@
                 "y": -51.54687
             },
             "mapId": "/en/aldys/borelis",
-            "cover": "Port_de_Borélis.jpeg",
+            "cover": "Port_de_Borélis.webp",
             "coverAuthor": "Anton Bezrukov",
             "coverLink": "https://www.artstation.com/artwork/oODL5B"
         },
@@ -210,7 +210,7 @@
                 "y": -210.87224307207197
             },
             "mapId": "/en/aldys/cantane",
-            "cover": "Cantane.jpg",
+            "cover": "Cantane.webp",
             "coverAuthor": "Andreas Roller",
             "coverLink": "https://en.wikipedia.org/wiki/Andreas_Roller"
         },
@@ -223,7 +223,7 @@
                 "y": -210.9293951755887
             },
             "mapId": "/en/aldys/cantane/mines-blanches",
-            "cover": "Les Mines Blanches.png",
+            "cover": "Les Mines Blanches.webp",
             "coverAuthor": "MeckanicalMind",
             "coverLink": "https://www.deviantart.com/meckanicalmind/art/R3-Mines-258469134"
         },
@@ -236,7 +236,7 @@
                 "x": 185.57431,
                 "y": -229.08588
             },
-            "cover": "Horfer.jpg",
+            "cover": "Horfer.webp",
             "coverAuthor": "Nele-Diel",
             "coverLink": "https://www.deviantart.com/nele-diel/art/City-in-the-Lowlands-693529688"
         },
@@ -519,7 +519,7 @@
                 "x": 121.47116769539711,
                 "y": -94.66997667550434
             },
-            "cover": "Faille_de_Kiam.jpg",
+            "cover": "Faille_de_Kiam.webp",
             "coverAuthor": "Laura Sava",
             "coverLink": "https://www.behance.net/gallery/16130223/Zariels-Doom",
             "coverPortrait": true
@@ -573,7 +573,7 @@
                 "x": 107.50352,
                 "y": -67.36631
             },
-            "cover": "Willeau.jpg",
+            "cover": "Willeau.webp",
             "coverAuthor": "Inconnu",
             "coverLink": "https://www.hebus.com/image-339033.html"
         },
@@ -635,7 +635,7 @@
                 "x": 168.31641,
                 "y": -60.54297
             },
-            "cover": "Tours_des_Cages.jpg",
+            "cover": "Tours_des_Cages.webp",
             "coverAuthor": "25kartinok",
             "coverLink": "https://www.deviantart.com/25kartinok/art/the-dark-tower-700231527",
             "coverPortrait": true
@@ -677,7 +677,7 @@
                 "x": 159.57688930332125,
                 "y": -157.4739168466964
             },
-            "cover": "Plaines_de_poussière.png",
+            "cover": "Plaines_de_poussière.webp",
             "coverAuthor": "Inconnu",
             "coverLink": "https://www.pinterest.com/pin/pin-de-soup-em-inspiration--279223245638830461"
         },
@@ -710,7 +710,7 @@
                 "x": 285.0990986858211,
                 "y": -146.08986069534564
             },
-            "cover": "Garràn.jpg",
+            "cover": "Garràn.webp",
             "coverAuthor": "Dmitry Dubinsky",
             "coverLink": "https://elhour.artstation.com/projects/RYynYm?album_id=47640"
         },
@@ -773,7 +773,7 @@
                 "x": 326.7497076703842,
                 "y": -206.67114645854178
             },
-            "cover": "Fasàch.jpg",
+            "cover": "Fasàch.webp",
             "coverAuthor": "Liang Mark",
             "coverLink": "https://www.artstation.com/artwork/Jll2Jd"
         },
@@ -886,7 +886,7 @@
                 "x": 83.80737652386473,
                 "y": -184.52963682119173
             },
-            "cover": "Académie_Centrale_Kaldélienne.jpg",
+            "cover": "Académie_Centrale_Kaldélienne.webp",
             "coverAuthor": "Pengzhen Zhang",
             "coverLink": "https://www.artstation.com/artwork/zAOWNd",
             "icon": "graduation-cap"

src/components/maps/data/en/bamast/markers.json

@@ -9,7 +9,7 @@
                 "x": 119.6667886200924,
                 "y": -17.945469721492717
             },
-            "cover": "Faranne.jpg",
+            "cover": "Faranne.webp",
             "coverAuthor": "Pablo Mendoza Peces",
             "coverLink": "https://www.artstation.com/artwork/dAJr1"
         },
@@ -32,7 +32,7 @@
                 "x": 113.52851847725508,
                 "y": -19.882939646724424
             },
-            "cover": "Miverne.jpg",
+            "cover": "Miverne.webp",
             "coverAuthor": "Andrei-Pervukhin",
             "coverLink": "https://www.deviantart.com/andrei-pervukhin/art/Medieval-Village-383779337"
         },
@@ -75,7 +75,7 @@
                 "x": 122.87040892704968,
                 "y": -58.7910005354329
             },
-            "cover": "Rocheverre.jpg",
+            "cover": "Rocheverre.webp",
             "coverAuthor": "Creative Intelligence Arts",
             "coverLink": "https://www.kickstarter.com/projects/1300298569/project-phoenix-japans-indie-rpg-feat-aaa-talent"
         },

src/components/maps/data/fr/aldys/markers.json

@@ -9,7 +9,7 @@
                 "x": 83.6,
                 "y": -185.2
             },
-            "cover": "Ambrose.jpg",
+            "cover": "Ambrose.webp",
             "coverAuthor": "Claudio Pilia",
             "coverLink": "https://pilia-art.com/portfolio-item/game-of-thrones-the-city-of-tyrosh/"
         },
@@ -22,7 +22,7 @@
                 "x": 133.46875,
                 "y": -146.0625
             },
-            "cover": "Cordouac.jpg",
+            "cover": "Cordouac.webp",
             "coverAuthor": "Vincent Joyal",
             "coverLink": "https://www.artstation.com/artwork/6B0b0"
         },
@@ -45,7 +45,7 @@
                 "x": 132.26953,
                 "y": -98.19141
             },
-            "cover": "Tourgrise.png",
+            "cover": "Tourgrise.webp",
             "coverAuthor": "saya kuroha",
             "coverLink": "https://www.pixiv.net/en/artworks/83793821",
             "coverPortrait": true
@@ -79,7 +79,7 @@
                 "x": 168.39491,
                 "y": -109.13376
             },
-            "cover": "Port-brisé.jpg",
+            "cover": "Port-brisé.webp",
             "coverAuthor": "JC Jongwon Park",
             "coverLink": "https://www.artstation.com/artwork/okmQL"
         },
@@ -122,7 +122,7 @@
                 "x": 204.42515,
                 "y": -226.85883
             },
-            "cover": "Soubreciel.jpg",
+            "cover": "Soubreciel.webp",
             "coverAuthor": "Tony Andreas Rudolph",
             "coverLink": "https://www.artstation.com/artwork/EB84"
         },
@@ -166,7 +166,7 @@
                 "y": -51.54687
             },
             "mapId": "/fr/aldys/borelis",
-            "cover": "Port_de_Borélis.jpeg",
+            "cover": "Port_de_Borélis.webp",
             "coverAuthor": "Anton Bezrukov",
             "coverLink": "https://www.artstation.com/artwork/oODL5B"
         },
@@ -210,7 +210,7 @@
                 "y": -210.87224307207197
             },
             "mapId": "/fr/aldys/cantane",
-            "cover": "Cantane.jpg",
+            "cover": "Cantane.webp",
             "coverAuthor": "Andreas Roller",
             "coverLink": "https://en.wikipedia.org/wiki/Andreas_Roller"
         },
@@ -223,7 +223,7 @@
                 "y": -210.9293951755887
             },
             "mapId": "/fr/aldys/cantane/mines-blanches",
-            "cover": "Les Mines Blanches.png",
+            "cover": "Les Mines Blanches.webp",
             "coverAuthor": "MeckanicalMind",
             "coverLink": "https://www.deviantart.com/meckanicalmind/art/R3-Mines-258469134"
         },
@@ -236,7 +236,7 @@
                 "x": 185.57431,
                 "y": -229.08588
             },
-            "cover": "Horfer.jpg",
+            "cover": "Horfer.webp",
             "coverAuthor": "Nele-Diel",
             "coverLink": "https://www.deviantart.com/nele-diel/art/City-in-the-Lowlands-693529688"
         },
@@ -519,7 +519,7 @@
                 "x": 121.47116769539711,
                 "y": -94.66997667550434
             },
-            "cover": "Faille_de_Kiam.jpg",
+            "cover": "Faille_de_Kiam.webp",
             "coverAuthor": "Laura Sava",
             "coverLink": "https://www.behance.net/gallery/16130223/Zariels-Doom",
             "coverPortrait": true
@@ -573,7 +573,7 @@
                 "x": 107.50352,
                 "y": -67.36631
             },
-            "cover": "Willeau.jpg",
+            "cover": "Willeau.webp",
             "coverAuthor": "Inconnu",
             "coverLink": "https://www.hebus.com/image-339033.html"
         },
@@ -635,7 +635,7 @@
                 "x": 168.31641,
                 "y": -60.54297
             },
-            "cover": "Tours_des_Cages.jpg",
+            "cover": "Tours_des_Cages.webp",
             "coverAuthor": "25kartinok",
             "coverLink": "https://www.deviantart.com/25kartinok/art/the-dark-tower-700231527",
             "coverPortrait": true
@@ -677,7 +677,7 @@
                 "x": 159.57688930332125,
                 "y": -157.4739168466964
             },
-            "cover": "Plaines_de_poussière.png",
+            "cover": "Plaines_de_poussière.webp",
             "coverAuthor": "Inconnu",
             "coverLink": "https://www.pinterest.com/pin/pin-de-soup-em-inspiration--279223245638830461"
         },
@@ -710,7 +710,7 @@
                 "x": 285.0990986858211,
                 "y": -146.08986069534564
             },
-            "cover": "Garràn.jpg",
+            "cover": "Garràn.webp",
             "coverAuthor": "Dmitry Dubinsky",
             "coverLink": "https://elhour.artstation.com/projects/RYynYm?album_id=47640"
         },
@@ -773,7 +773,7 @@
                 "x": 326.7497076703842,
                 "y": -206.67114645854178
             },
-            "cover": "Fasàch.jpg",
+            "cover": "Fasàch.webp",
             "coverAuthor": "Liang Mark",
             "coverLink": "https://www.artstation.com/artwork/Jll2Jd"
         },
@@ -886,7 +886,7 @@
                 "x": 83.80737652386473,
                 "y": -184.52963682119173
             },
-            "cover": "Académie_Centrale_Kaldélienne.jpg",
+            "cover": "Académie_Centrale_Kaldélienne.webp",
             "coverAuthor": "Pengzhen Zhang",
             "coverLink": "https://www.artstation.com/artwork/zAOWNd",
             "icon": "graduation-cap"

src/components/maps/data/fr/bamast/markers.json

@@ -9,7 +9,7 @@
                 "x": 119.6667886200924,
                 "y": -17.945469721492717
             },
-            "cover": "Faranne.jpg",
+            "cover": "Faranne.webp",
             "coverAuthor": "Pablo Mendoza Peces",
             "coverLink": "https://www.artstation.com/artwork/dAJr1"
         },
@@ -32,7 +32,7 @@
                 "x": 113.52851847725508,
                 "y": -19.882939646724424
             },
-            "cover": "Miverne.jpg",
+            "cover": "Miverne.webp",
             "coverAuthor": "Andrei-Pervukhin",
             "coverLink": "https://www.deviantart.com/andrei-pervukhin/art/Medieval-Village-383779337"
         },
@@ -75,7 +75,7 @@
                 "x": 122.87040892704968,
                 "y": -58.7910005354329
             },
-            "cover": "Rocheverre.jpg",
+            "cover": "Rocheverre.webp",
             "coverAuthor": "Creative Intelligence Arts",
             "coverLink": "https://www.kickstarter.com/projects/1300298569/project-phoenix-japans-indie-rpg-feat-aaa-talent"
         },

src/components/maps/overlay/LangSwitcher.vue

@@ -6,7 +6,7 @@ import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix
 import LangSwitcherButton from './LangSwitcherButton.vue';
 
 import { useStore } from '@nanostores/vue';
-import { currentLang } from '@/i18n/store';
+import { currentLang, t } from '@/i18n/store';
 import { availableLangs } from '@/i18n/ui';
 
 const $currentLang = useStore(currentLang);
@@ -22,7 +22,7 @@ const menuModel = ref(false);
 
 const wrapper = ref<HTMLDivElement | null>(null)
 const buttonRef = ref<HTMLButtonElement | null>(null)
-const wrapperHovered = useElementHover(wrapper, { delayEnter: 500, delayLeave: 500 })
+const wrapperHovered = useElementHover(wrapper, { delayEnter: 100, delayLeave: 500 })
 const { focused: buttonFocused } = useFocus(buttonRef)
 
 const isMenuOpen = computed(() => menuModel.value || wrapperHovered.value)
@@ -39,7 +39,7 @@ watch([wrapperHovered, buttonFocused], (value) => {
     <div ref="wrapper" class="wrapper appear-from-top">
         <PopoverRoot :open="isMenuOpen" @update:open="() => menuModel = true">
             <PopoverTrigger as-child>
-                <button ref="buttonRef" class="btn-round" :class="{ 'active': isMenuOpen }">
+                <button ref="buttonRef" class="btn-round" :title="t('nav.lang.aria-label')" :class="{ 'active': isMenuOpen }">
                     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M247.15,212.42l-56-112a8,8,0,0,0-14.31,0l-21.71,43.43A88,88,0,0,1,108,126.93,103.65,103.65,0,0,0,135.69,64H160a8,8,0,0,0,0-16H104V32a8,8,0,0,0-16,0V48H32a8,8,0,0,0,0,16h87.63A87.76,87.76,0,0,1,96,116.35a87.74,87.74,0,0,1-19-31,8,8,0,1,0-15.08,5.34A103.63,103.63,0,0,0,84,127a87.55,87.55,0,0,1-52,17,8,8,0,0,0,0,16,103.46,103.46,0,0,0,64-22.08,104.18,104.18,0,0,0,51.44,21.31l-26.6,53.19a8,8,0,0,0,14.31,7.16L148.94,192h70.11l13.79,27.58A8,8,0,0,0,240,224a8,8,0,0,0,7.15-11.58ZM156.94,176,184,121.89,211.05,176Z"></path></svg>
                 </button>
             </PopoverTrigger>

src/components/maps/overlay/LangSwitcherButton.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import type { Language } from '@/i18n/ui';
+import { useUrlSearchParams } from '@vueuse/core';
 
+import type { Language } from '@/i18n/ui';
 import { t } from '@/i18n/store';
 import { switchLang } from '@/i18n/utils';
 
@@ -12,10 +13,12 @@ defineProps<{
 
 const flagWidth = 18;
 const flagHeight = 18;
+
+const { lat, lon, zoom } = useUrlSearchParams<{ lat: number; lon: number; zoom: number }>();
 </script>
 
 <template>
-    <a :href="switchLang(currentUrl, lang).pathname" :aria-disabled="disabled" :aria-current="disabled ? 'page' : 'false'" :tabindex="disabled ? -1 : 0">
+    <a :href="`${switchLang(currentUrl, lang).pathname}?lat=${lat}&lon=${lon}&zoom=${zoom}`" :aria-disabled="disabled" :aria-current="disabled ? 'page' : 'false'" :tabindex="disabled ? -1 : 0">
         <div class="flag">
             <svg v-if="disabled" xmlns="http://www.w3.org/2000/svg" :height="flagHeight" :width="flagWidth" class="valid" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg>
 

src/components/maps/overlay/SearchMapSwitch.vue

@@ -13,7 +13,7 @@ const navModel = ref(false);
 
 const wrapper = ref<HTMLDivElement | null>(null)
 const buttonRef = ref<HTMLButtonElement | null>(null)
-const wrapperHovered = useElementHover(wrapper, { delayEnter: 500, delayLeave: 500 })
+const wrapperHovered = useElementHover(wrapper, { delayEnter: 100, delayLeave: 500 })
 const { focused: buttonFocused } = useFocus(buttonRef)
 
 const isNavOpened = computed(() => navModel.value || wrapperHovered.value)
@@ -92,7 +92,7 @@ const menus: Menu[] = [
     <div class="wrapper" ref="wrapper">
         <PopoverRoot :open="isNavOpened" @update:open="() => navModel = true">
             <PopoverTrigger as-child>
-                <button ref="buttonRef" class="btn-round" :class="{ 'active': isNavOpened }">
+                <button ref="buttonRef" class="btn-round" :title="t('nav.map.aria-label')" :class="{ 'active': isNavOpened }">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM96,176a8,8,0,0,0-1.94.24L40,189.75V62.25L95.07,48.48l.93.46Zm120,17.75-55.07,13.77-.93-.46V80a8,8,0,0,0,1.94-.23L216,66.25Z"/></svg>
                 </button>
             </PopoverTrigger>

src/components/maps/overlay/SearchMarkers.vue

@@ -209,7 +209,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
 </script>
 
 <template>
-    <nav ref="searchBarWrapper" class="toolbar appear-from-top" :key="navKey">
+    <nav ref="searchBarWrapper" :aria-label="t('nav.aria-label')" class="toolbar appear-from-top" :key="navKey">
         <SearchMapSwitch />
 
         <div ref="searchBar" class="search-w" :data-focused="shouldBeActive">

src/i18n/ui.ts

@@ -21,6 +21,9 @@ export const translations: LanguageDict = {
         'capitals': 'Capitales',
         'points-of-interest': 'Points d\'intérêt',
         'personals': 'Personnels',
+        'nav.aria-label': 'Navigation principale',
+        'nav.map.aria-label': 'Changer de carte',
+        'nav.lang.aria-label': 'Changer de langue',
         'maps.go-to-map': 'Voir la carte détaillée',
         'maps.go-to-player': 'Aller à la position actuelle des joueurs',
         'maps.seeQuest': 'Voir la quête',
@@ -48,6 +51,9 @@ export const translations: LanguageDict = {
         'capitals': 'Capitals',
         'points-of-interest': 'Points of interest',
         'personals': 'Personals',
+        'nav.aria-label': 'Main navigation',
+        'nav.map.aria-label': 'Switch map',
+        'nav.lang.aria-label': 'Switch language',
         'maps.go-to-map': 'See detailed map',
         'maps.go-to-player': 'Go to current players position',
         'maps.seeQuest': 'See the quest',

src/layouts/Layout.astro

@@ -28,7 +28,7 @@ const lang = getLangFromUrl(Astro.url) || defaultLang;
 		<meta charset="UTF-8" />
         <meta name="author" content="Alexis Pelé" />
 		{head?.description && <meta name="description" content={head.description} /> }
-		<meta name="viewport" content="width=device-width; initial-scale=1" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title} — Leim Wiki</title>
 

src/pages/en/aldys/borelis/index.astro

@@ -17,6 +17,7 @@ import MapOverlay from '@/components/maps/MapOverlay.astro'
         ]}
     />
     <Map
+        title='Borélis'
         mapKey='aldys-borelis'
         zoomifyKey='fr/borelis'
         mapHeight={3710}

src/pages/en/aldys/cantane/index.astro

@@ -24,6 +24,7 @@ const markers = markersData.data as MapMarker[]
         ]}
     />
     <Map
+        title='Cantane'
         mapKey='aldys-cantane'
         zoomifyKey='fr/cantane'
         mapHeight={4124}

src/pages/en/aldys/cantane/mines-blanches.astro

@@ -25,6 +25,7 @@ const markers = markersData.data as MapMarker[]
         ]}
     />
     <Map
+        title='White Hollow'
         mapKey='aldys-cantane-mines'
         zoomifyKey='fr/mines-blanches'
         mapHeight={6020}

src/pages/en/bamast/index.astro

@@ -22,6 +22,7 @@ const players = playersData as PlayerMarker
         ]}
     />
     <Map
+        title='Bamast'
         mapKey='bamast'
         zoomifyKey='fr/bamast'
         mapHeight={18342}

src/pages/en/index.astro

@@ -30,6 +30,7 @@ const players = playersData as PlayerMarker
         ]}
     />
     <Map
+        title='Aldys'
         mapKey='aldys'
         zoomifyKey='en/aldys-nord'
         mapHeight={21896}

src/pages/fr/aldys/borelis/index.astro

@@ -17,6 +17,7 @@ import MapOverlay from '@/components/maps/MapOverlay.astro'
         ]}
     />
     <Map
+        title='Borélis'
         mapKey='aldys-borelis'
         zoomifyKey='fr/borelis'
         mapHeight={3710}

src/pages/fr/aldys/cantane/index.astro

@@ -24,6 +24,7 @@ const markers = markersData.data as MapMarker[]
         ]}
     />
     <Map
+        title='Cantane'
         mapKey='aldys-cantane'
         zoomifyKey='fr/cantane'
         mapHeight={4124}

src/pages/fr/aldys/cantane/mines-blanches.astro

@@ -25,6 +25,7 @@ const markers = markersData.data as MapMarker[]
         ]}
     />
     <Map
+        title='Les Mines Blanches'
         mapKey='aldys-cantane-mines'
         zoomifyKey='fr/mines-blanches'
         mapHeight={6020}

src/pages/fr/bamast/index.astro

@@ -22,6 +22,7 @@ const players = playersData as PlayerMarker
         ]}
     />
     <Map
+        title='Bamast'
         mapKey='bamast'
         zoomifyKey='fr/bamast'
         mapHeight={18342}

src/pages/fr/index.astro

@@ -30,6 +30,7 @@ const players = playersData as PlayerMarker
         ]}
     />
     <Map
+        title='Aldys'
         mapKey='aldys'
         zoomifyKey='fr/aldys-nord'
         mapHeight={21896}

src/types/Leaflet.ts

@@ -7,26 +7,90 @@ export type MapCoords = {
 }
 
 export type MapMarker = {
+    /**
+     * The title of the marker (must be unique).
+     */
     title: string,
+    /**
+     * The coordinates of the marker.
+     * @example { x: 123, y: 456 }
+     */
     markerCoords: MapCoords,
+    /**
+     * The description of the marker.
+     */
     description?: string,
+    /**
+     * The link that can appear on the marker title.
+     * @example https://example.com
+     */
     link?: string,
+    /**
+     * The ID of the map the marker is supposed to point to.
+     *
+     * This should be a valid path of the `maps/data` folder.
+     * @example "fr/aldys/borelis"
+     */
     mapId?: string,
+    /**
+     * The group that the marker belongs to.
+     * @example "capitals"
+     */
     group?: MapMarkerGroup,
+    /**
+     * The icon that the marker should use.
+     * @example "castle"
+     */
     icon?: MapMarkerIcon,
+    /**
+     * Cover image for the marker.
+     * This should be a valid image in the public folder.
+     *
+     * @example "Ambrose.webp"
+     */
     cover?: string,
+    /**
+     * The link to the cover image's source.
+     */
     coverLink?: string,
+    /**
+     * The author of the cover image.
+     */
     coverAuthor?: string,
+    /**
+     * Whether the cover image should be displayed in portrait mode.
+     */
     coverPortrait?: boolean
 }
 
+/**
+ * A marker that is used to display players' location on the map.
+ */
 export type PlayerMarker = {
+    /**
+     * The title of the marker (must be unique).
+     */
     title: string,
+    /**
+     * The coordinates of the marker.
+     * @example { x: 123, y: 456 }
+     */
     markerCoords: MapCoords,
+    /**
+     * The description of the marker.
+     */
     description?: string,
+    /**
+     * The link that can appear on the marker title.
+     * @example https://example.com
+     */
     link?: string,
 }
 
+/**
+ * A marker that is used to display a custom location on the map.
+ * These are only used on the client side and are not saved anywhere else.
+ */
 export type CustomMarker = {
     lat: number,
     lon: number,

src/types/Map.ts

@@ -1,33 +1,105 @@
 import type { MapMarker, PlayerMarker } from "./Leaflet"
 
+/**
+ * A breadcrumb item.
+ */
 export interface BreadcrumbItem {
-    name: string;
+    /**
-    url: string;
+     * The label of the breadcrumb.
+     */
+    name: string
+    /**
+     * The URL the breadcrumb points to.
+     */
+    url: string
 }
 
+/**
+ * Search configuration options for the map overlay.
+ * This is used to filter the markers on the map.
+ */
 export interface SearchConfig {
+    /** Whether to disable the quests in the search bar. */
     disableQuests?: boolean
+    /** Whether to disable the capitals in the search bar. */
     disableCapitals?: boolean
+    /** Whether to disable the landmarks in the search bar. */
     disableLandmarks?: boolean
 }
 
 export interface MapProps {
+    /**
+     * The ID of the map.
+     * This is used to identify the map and store custom markers in the local storage.
+     * @example "fr/aldys/borelis"
+     */
     mapKey: string
+    /**
+     * The ID of the map in the zoomify folder.
+     */
     zoomifyKey: string
+    /**
+     * Height of the map in pixels.
+     * This information is generated by the zoomify tool.
+     * @example 30000
+     */
     mapHeight: number
+    /**
+     * Width of the map in pixels.
+     * This information is generated by the zoomify tool.
+     * @example 30000
+     */
     mapWidth: number
+    /**
+     * List of markers to display on the map.
+     */
     markers?: MapMarker[]
+    /**
+     * Current player position on the map.
+     */
     players?: PlayerMarker
+    /**
+     * Main unit of the map.
+     */
     rulerMainUnit?: string
+    /**
+     * Ratio used to convert the map units to their relevant unit.
+     */
     rulerDistanceRatio?: number
+    /**
+     * Whether to show the walking distance in the ruler.
+     */
     rulerHideWalkDistance?: boolean
+    /**
+     * Default background color of the map.
+     * @exemple "#FFF"
+     */
     backgroundColor?: string
 }
 
 export interface MapOverlayProps {
+    /**
+     * The ID of the map.
+     * This is used to identify the map and store custom markers in the local storage.
+     * @example "fr/aldys/borelis"
+     */
     mapKey: string
+    /**
+     * List of markers to display on the map.
+     */
     markers?: MapMarker[]
+    /**
+     * Current player position on the map.
+     */
     players?: PlayerMarker
+    /**
+     * Configuration for the search bar.
+     * This is used to filter the markers on the map.
+     * @example { disableQuests: true, disableCapitals: false, disableLandmarks: false }
+     */
     searchConfig?: SearchConfig
+    /**
+     * List of breadcrumbs to display.
+     */
     breadcrumbs?: BreadcrumbItem[]
 }