Fist Push

public/scripts/overlays/overlaysCoord.js

@@ -0,0 +1,26 @@
+import * as math from "../modules/math.js";
+
+var coordOverlay = L.control({ position: "bottomleft" });
+
+coordOverlay.onAdd = function (map) {
+  this._div = L.DomUtil.create("div", "coordinates-overlay");
+  this._div.innerHTML = "Cliquez sur la carte pour voir les coordonnées";
+  return this._div;
+};
+
+coordOverlay.update = function (coord, cardinal) {
+  this._div.innerHTML = "LandBlockId:" + "<br>" + 
+  "0x" + coord.x.toString(16).toUpperCase().padStart(2, '0') 
+  + "" + coord.y.toString(16).toUpperCase().padStart(2, '0') 
+  + "FFFF"
+  + "<br>"
+  + cardinal;
+};
+
+export function UpdateCoord(ev, map) {
+    coordOverlay.update(math.GetLandBlockId(ev, map), math.coordToCardinal(ev.latlng.lat, ev.latlng.lng));
+}
+
+export default function InitialisationOverlayCoord(map) {
+    coordOverlay.addTo(map);
+}

public/scripts/overlays/overlaysNpc.js

@@ -0,0 +1,21 @@
+import customIcons from '../modules/iconsMap.js';
+
+export default async function getOverlayNpc() {
+    const url = `/npcloc`;
+    try {
+        var markers = L.markerClusterGroup({
+            chunkedLoading: true,
+            disableClusteringAtZoom: 8,
+          });
+        const layerNpc = L.layerGroup();
+        const response = await fetch(url);
+        const data = await response.json();
+        let npcLoc = [];
+        data.forEach((npc) => {
+            markers.addLayer(L.marker([npc.locy, npc.locx], { icon: customIcons.yellowNpc }).bindPopup(npc.literalValue));
+        });
+        return markers;
+    } catch (error) {
+        console.error(`Error fetching ${url} data:`, error);
+    }
+}

public/scripts/overlays/overlaysPlayer.js

@@ -0,0 +1,46 @@
+import customIcons from '../modules/iconsMap.js';
+import { map } from "../map.js";
+// Dictionnaire pour stocker les marqueurs des personnages
+var characterMarkers = {};
+// Fonction pour récupérer les positions des personnages
+export default function fetchCharacterLocations() {
+    fetch("/characterloc") // Effectuer une requête GET vers /characterloc
+        .then((response) => response.json()) // Convertir la réponse en JSON
+        .then((data) => {
+            // Parcourir les données et afficher chaque position de personnage
+            data.forEach((character) => {
+                updateCharacterMarker(
+                    character.literalValue,
+                    character.locy,
+                    character.locx
+                );
+            });
+        })
+        .catch((error) => {
+            console.error("Error fetching character locations:", error);
+        });
+}
+// Fonction pour créer ou mettre à jour un marqueur de personnage
+function updateCharacterMarker(characterId, lat, lng) {
+    // Vérifier si le marqueur existe déjà
+    if (characterMarkers[characterId]) {
+        // Mettre à jour la position du marqueur existant
+        characterMarkers[characterId].setLatLng([lat, lng]);
+    } else {
+        // Créer un nouveau marqueur
+        var marker = L.marker([lat, lng], { icon: customIcons.greenPlayer }).bindPopup(characterId).addTo(map);
+        // Stocker le marqueur dans le dictionnaire
+        characterMarkers[characterId] = marker;
+    }
+}
+// Fonction pour récupérer les positions des personnages
+async function getPlayersLocations() {
+    const url = `/characterloc`;
+    try {
+        const response = await fetch(url);
+        let data = await response.json();
+        return data;
+    } catch (error) {
+        console.error(`Error fetching ${key} data:`, error);
+    }
+}

public/scripts/overlays/overlaysPoi.js

@@ -0,0 +1,54 @@
+import customIcons from '../modules/iconsMap.js';
+import npcLocOverlay from "./overlaysNpc.js";
+
+var overlayMaps = {};
+var layerControl = {};
+
+async function setupOverlayMaps() {
+    var overlayPoi = await getOverlayMaps(); // Attend que overlayPoi soit chargé
+
+    // Itérer sur les clés de overlayPoi
+    Object.keys(overlayPoi).forEach(key => {
+        const layerGroup = overlayPoi[key];
+        //overlayMaps[key] = layerGroup; // Assigner chaque layerGroup à la clé correspondante dans overlayMaps
+        layerControl.addOverlay(layerGroup, key); // Ajoute chaque couche à la carte avec son nom
+    });
+
+    //ADD OVERLAY NPC
+    let test =  await npcLocOverlay();
+    overlayMaps["Npc"] = test;
+    layerControl.addOverlay(test, "Npc");
+}
+
+async function getOverlayMaps() {
+    await Promise.all(Object.keys(overlayMapsTemplate).map(async (key) => {
+        const url = `/poi/${key.toLowerCase()}/`;
+        try {
+            const response = await fetch(url);
+            const data = await response.json();
+            let icon = overlayMapsTemplate[key].icon;
+            overlayMaps[key] = L.layerGroup(data.map((item) => L.marker([item.y, item.x], { icon: icon }).bindPopup(item.description)));
+        } catch (error) {
+            console.error(`Error fetching ${key} data:`, error);
+        }
+    }));
+    return overlayMaps;
+}
+
+// overlayMapsTemplate est l'objet avec les clés que vous avez définies
+const overlayMapsTemplate = {
+    Ringways: { icon: customIcons.blueCircleVoidIcon },
+    Gateways: { icon: customIcons.blueCircleFullIcon },
+    PoI: { icon: customIcons.blueCrossFullIcon },
+    Town: { icon: customIcons.yellowSquareFullIcon },
+    Outpost: { icon: customIcons.yellowSquareVoidIcon },
+    Vault: { icon: customIcons.redCrossFullIcon },
+    Dungeon: { icon: customIcons.redCrossVoidIcon },
+    City: { icon: customIcons.yellowCrownIcon },
+    Faction: { icon: customIcons.greySquareIcon },
+};
+
+export default function InitialisationOverlay(map) {
+    setupOverlayMaps();
+    layerControl = L.control.layers(null, overlayMaps).addTo(map);
+}