Some fixes

src/markers/HtmlMarker.js

@@ -38,6 +38,8 @@ export class HtmlMarker extends Marker {
 
         this.data.label = null;
 
+        this.data.classes = [];
+
         this.elementObject = new CSS2DObject(htmlToElement(`<div id="bm-marker-${this.data.id}" class="bm-marker-${this.data.type}"></div>`));
         this.elementObject.onBeforeRender = (renderer, scene, camera) => this.onBeforeRender(renderer, scene, camera);
 
@@ -93,6 +95,7 @@ export class HtmlMarker extends Marker {
      *      label: string,
      *      anchor: {x: number, y: number},
      *      html: string,
+     *      classes: string[],
      *      minDistance: number,
      *      maxDistance: number
      *      }}
@@ -118,6 +121,13 @@ export class HtmlMarker extends Marker {
             this.element.innerHTML = markerData.html;
         }
 
+        // update style-classes
+        if (this.data.classes !== markerData.classes) {
+            this.data.classes = markerData.classes;
+            this.element.classList.value = `bm-marker-${this.data.type}`;
+            this.element.classList.add(...markerData.classes);
+        }
+
         // update min/max distances
         this.fadeDistanceMin = markerData.minDistance || 0;
         this.fadeDistanceMax = markerData.maxDistance !== undefined ? markerData.maxDistance : Number.MAX_VALUE;

src/markers/PlayerMarker.js

@@ -105,7 +105,7 @@ export class PlayerMarker extends Marker {
         if (!this.position.x && !this.position.y && !this.position.z) {
             this.position.set(
                 pos.x || 0,
-                pos.y || 0,
+                (pos.y || 0) + 1.8,
                 pos.z || 0
             );
         } else {

src/markers/PoiMarker.js

@@ -34,6 +34,8 @@ export class PoiMarker extends HtmlMarker {
         Object.defineProperty(this, 'isPoiMarker', {value: true});
         this.data.type = "poi";
 
+        this.data.detail = null;
+
         this.html = `<img src="" alt="POI Icon (${this.data.id})" class="bm-marker-poi-icon" draggable="false" style="pointer-events: auto"><div class="bm-marker-poi-label"></div>`;
 
         this.iconElement = this.element.getElementsByTagName("img").item(0);
@@ -87,7 +89,9 @@ export class PoiMarker extends HtmlMarker {
      *      anchor: {x: number, y: number},
      *      iconAnchor: {x: number, y: number},
      *      label: string,
+     *      detail: string,
      *      icon: string,
+     *      classes: string[],
      *      minDistance: number,
      *      maxDistance: number
      * }}
@@ -110,7 +114,12 @@ export class PoiMarker extends HtmlMarker {
         // update label
         if (this.data.label !== markerData.label){
             this.data.label = markerData.label || "";
-            this.labelElement.innerHTML = this.data.label || "";
+        }
+
+        // update detail
+        if (this.data.detail !== markerData.detail){
+            this.data.detail = markerData.detail || this.data.label;
+            this.labelElement.innerHTML = this.data.detail || "";
         }
 
         // update icon
@@ -119,6 +128,16 @@ export class PoiMarker extends HtmlMarker {
             this._lastIcon = markerData.icon;
         }
 
+        // update style-classes
+        if (this.data.classes !== markerData.classes) {
+            this.data.classes = markerData.classes;
+            let highlight = this.element.classList.contains("bm-marker-highlight");
+
+            this.element.classList.value = `bm-marker-html`;
+            if (highlight) this.element.classList.add("bm-marker-highlight");
+            this.element.classList.add(...markerData.classes);
+        }
+
         // update min/max distances
         this.fadeDistanceMin = markerData.minDistance || 0;
         this.fadeDistanceMax = markerData.maxDistance !== undefined ? markerData.maxDistance : Number.MAX_VALUE;