---
import type { MapMarker, PlayerMarker } from '@/types/Leaflet';

import Layout from '@/layouts/Layout.astro';
import Map from '@/components/maps/Map.astro'
import MapOverlay from '@/components/maps/MapOverlay.astro'

import markersData from '@/components/maps/data/en/aldys/markers.json'
import playersData from '@/components/maps/data/en/aldys/players.json'

const markers = markersData.data as MapMarker[]
const players = playersData as PlayerMarker
---

<Layout
    title="Aldys ~ Maps"
    head={
        {
            description: "Carte de l'Alliance Kaldélienne sur la planète de Léim.",
            image: '/images/bailey-zindel-NRQV-hBF10M-unsplash.jpg'
        }
    }
>
    <MapOverlay
        mapKey='aldys'
        markers={markers}
        players={players}
        breadcrumbs={[
            { name: 'Aldys', url: '/' },
        ]}
    />
    <Map
        title='Aldys'
        mapKey='aldys'
        zoomifyKey='en/aldys-nord'
        mapHeight={21896}
        mapWidth={30000}
        markers={markers}
        players={players}
        rulerDistanceRatio={2}
        backgroundColor="#98BDD0"
    />
</Layout>