Update index with ThreeJS

+ add id in NPC marker.

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>
 

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) {