Changed variable names

Because the map will eventually be used for everything, not just one continent

src/assets/scss/_leaflet.scss

@@ -5,7 +5,7 @@
     width: 100%;
     max-width: 100%;
     max-height: 100%;
-    background: #98bcd0 !important;
+    background: #f1f5f9;
 
     .leaflet-map-pane {
         .leaflet-tooltip-pane {

src/components/maps/WorldMap.astro

@@ -9,13 +9,15 @@ interface Props {
 const { markers, players } = Astro.props
 ---
 
-<div id="map"></div>
+<div class="world-wrapper">
+    <div id="world"></div>
+</div>
 
 <script lang="ts" define:vars={{ markers, players }}>
     const mapHeight = 15168;
     const mapWidth = 14658;
 
-    const map = L.map('map', {
+    const map = L.map('world', {
         crs: L.CRS.Simple,
         maxZoom: 12,
         minZoom: 2.5,
@@ -121,8 +123,6 @@ const { markers, players } = Astro.props
 
         const playerMarker = L.marker(playersPosition, { icon: playerIcon }).addTo(map)
         playerMarker.addTo(layerGroups['players'])
-
-        console.log(map)
     }
 
     map.fitBounds(layer.getBounds());

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

@@ -1,6 +1,6 @@
 import type { MapMarker } from "@/types/Leaflet";
 
-export const allianceMarkers: MapMarker[] = [
+export const worldMarkers: MapMarker[] = [
     {
         group: "capitals",
         title: "Ambrose",

src/pages/api/markers.json.ts

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

src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import AllianceKaldelienne from '../components/maps/AllianceKaldelienne.astro'
+import WorldMap from '../components/maps/WorldMap.astro'
 
 const fetchLandMarkers = await fetch('http://localhost:4321/api/markers.json');
 const fetchPlayersPosition = await fetch('http://localhost:4321/api/players.json');
@@ -9,5 +9,5 @@ const playerCoords = await fetchPlayersPosition.json();
 ---
 
 <Layout title="Cartographie">
-    <AllianceKaldelienne markers={landData} players={playerCoords} />
+    <WorldMap markers={landData} players={playerCoords} />
 </Layout>