Added current player marker

src/components/maps/AllianceKaldelienne.astro

@@ -2,15 +2,16 @@
 import type { MapMarker } from '@/types/Leaflet';
 
 interface Props {
-    markers: MapMarker;
+    markers: MapMarker[];
+    players?: MapMarker;
 }
 
-const { markers } = Astro.props
+const { markers, players } = Astro.props
 ---
 
 <div id="map"></div>
 
-<script lang="ts" define:vars={{ markers }}>
+<script lang="ts" define:vars={{ markers, players }}>
     const mapHeight = 15168;
     const mapWidth = 14658;
 
@@ -29,6 +30,7 @@ const { markers } = Astro.props
     }).addTo(map);
 
     const layerGroups = {
+        players: L.layerGroup(),
         capitals: L.layerGroup(),
         cities: L.layerGroup(),
         towns: L.layerGroup(),
@@ -38,8 +40,6 @@ const { markers } = Astro.props
     /**
      * Build all markers and their related info
      */
-
-
     for (let i = 0; i < markers.length; i++) {
         const m = markers[i];
 
@@ -53,9 +53,9 @@ const { markers } = Astro.props
                     iconUrl: `icons/castle.png`,
                     shadowUrl: `icons/castle-shadow.png`,
                     iconSize: [25, 25],
-                    shadowSize: [40, 30],
+                    shadowSize: [35, 30],
                     iconAnchor: [12.5, 8],
-                    shadowAnchor: [12.5, 12]
+                    shadowAnchor: [11, 12]
                 });
                 break;
             
@@ -104,6 +104,27 @@ const { markers } = Astro.props
         marker.addTo(layerGroups[m.group])
     }
 
+    /**
+     * Add player's position marker
+     */
+    if ( players ) {
+        const playersPosition = [players.markerCoords.y, players.markerCoords.x];
+
+        const playerIcon = L.icon({
+            iconUrl: `icons/location-pin.png`,
+            shadowUrl: `icons/location-pin-shadow.png`,
+            iconSize: [18, 24],
+            shadowSize: [20, 16],
+            iconAnchor: [11, 8],
+            shadowAnchor: [3, 0],
+        });
+
+        const playerMarker = L.marker(playersPosition, { icon: playerIcon }).addTo(map)
+        playerMarker.addTo(layerGroups['players'])
+
+        console.log(map)
+    }
+
     map.fitBounds(layer.getBounds());
 
     // L.control.layers({ "base": layer }, layerGroups).addTo(map);

src/pages/api/data/players.markers.ts

@@ -0,0 +1,9 @@
+import type { PlayerMarker } from "@/types/Leaflet";
+
+export const playerPosition: PlayerMarker = {
+    markerCoords: {
+        y: -57.83673,
+        x: 162.05197
+    },
+    title: "L'Éclipse",
+}

src/pages/api/players.json.ts

@@ -0,0 +1,8 @@
+import type { APIRoute } from "astro";
+import { playerPosition } from "./data/players.markers";
+
+export const GET: APIRoute = ({ params, request }) => {
+    return new Response(
+        JSON.stringify(playerPosition)
+    )
+}

src/pages/index.astro

@@ -2,10 +2,12 @@
 import Layout from '../layouts/Layout.astro';
 import AllianceKaldelienne from '../components/maps/AllianceKaldelienne.astro'
 
-const res = await fetch('http://localhost:4321/api/markers.json');
+const fetchLandMarkers = await fetch('http://localhost:4321/api/markers.json');
-const data = await res.json();
+const fetchPlayersPosition = await fetch('http://localhost:4321/api/players.json');
+const landData = await fetchLandMarkers.json();
+const playerCoords = await fetchPlayersPosition.json();
 ---
 
 <Layout title="Leim Wiki - Cartographie">
-    <AllianceKaldelienne markers={data} />
+    <AllianceKaldelienne markers={landData} players={playerCoords} />
 </Layout>

src/types/Leaflet.ts

@@ -10,3 +10,13 @@ export type MapMarker = {
     link?: string,
     group?: MapMarkerGroup,
 }
+
+export type PlayerMarker = {
+    title: string,
+    markerCoords: {
+        x: number,
+        y: number,
+    }
+    description?: string,
+    link?: string,
+}