---
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/bamast/markers.json'
import playersData from '@/components/maps/data/en/bamast/players.json'

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

<Layout
    title="Bamast ~ Maps"
    head={{
        description: "Map of the archipelago of Bamast and its many islands in the Balamian Ocean."
    }}
>
    <MapOverlay
        mapKey='bamast'
        markers={markers}
        players={players}
        breadcrumbs={[
            { name: 'Bamast', url: '/en/bamast' },
        ]}
    />
    <Map
        title='Bamast'
        mapKey='bamast'
        zoomifyKey='fr/bamast'
        mapHeight={18342}
        mapWidth={15000}
        markers={markers}
        players={players}
        rulerDistanceRatio={2}
        backgroundColor="#98BDD0"
    />
</Layout>