From 8b52d69ae9b08659ee92fc8197b14e5b5992f4d7 Mon Sep 17 00:00:00 2001
From: troispoils <troispoils@live.com>
Date: Thu, 9 May 2024 17:35:24 +0200
Subject: [PATCH] Update index with ThreeJS

+ add id in NPC marker.
---
 public/index.html                      | 8 ++++++++
 public/scripts/overlays/overlaysNpc.js | 7 ++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 27bb704..ee8ac63 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,6 +7,14 @@
         <link rel="stylesheet" href="/scripts/dist/MarkerCluster.css" />
         <link rel="stylesheet" href="/scripts/dist/MarkerCluster.Default.css" />
         <script src="/scripts/dist/leaflet.markercluster-src.js"></script>
+        <script type="importmap">
+            {
+              "imports": {
+                "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
+                "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/"
+              }
+            }
+          </script>
         <link rel="stylesheet" href="/style/style.css" />
     </head>
 
diff --git a/public/scripts/overlays/overlaysNpc.js b/public/scripts/overlays/overlaysNpc.js
index 01954b3..72181ae 100644
--- a/public/scripts/overlays/overlaysNpc.js
+++ b/public/scripts/overlays/overlaysNpc.js
@@ -6,13 +6,18 @@ export default async function getOverlayNpc() {
         var markers = L.markerClusterGroup({
             chunkedLoading: true,
             disableClusteringAtZoom: 8,
+            spiderfyOnMaxZoom: false,
+            showCoverageOnHover: false,
+            zoomToBoundsOnClick: false
           });
         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, id: npc.entityid }).bindPopup(npc.literalValue));
+            markers.addLayer(L.marker([npc.locy, npc.locx], { icon: customIcons.yellowNpc, id: npc.entityid }).bindPopup(npc.literalValue).on('click', function (a) {
+                console.log('marker ' + this.options.id);
+            }));
         });
         return markers;
     } catch (error) {