More tweaks

src/MapViewer.js

@@ -176,21 +176,44 @@ export class MapViewer {
 
 			// check Object3D interactions
 			let intersects = this.raycaster.intersectObjects([this.map.hiresTileManager.scene, this.map.lowresTileManager.scene, this.markers], true);
+			let hit = null;
+			let lowresHit = null;
+			let hiresHit = null;
 			let covered = false;
 			for (let i = 0; i < intersects.length; i++) {
 				if (intersects[i].object){
 					let object = intersects[i].object;
 
-					if (object.visible) {
+					// check if deeply-visible
+					let parent = object;
+					let visible = parent.visible;
+					while (visible && parent.parent){
+						parent = parent.parent;
+						visible = parent.visible;
+					}
+
+					if (visible) {
+						if (!hit) hit = intersects[i];
+
+						// find root-scene
+						let parentRoot = object;
+						while(parentRoot.parent) parentRoot = parentRoot.parent;
+
+						if (parentRoot === this.map.lowresTileManager.scene) {
+							if (!lowresHit) lowresHit = intersects[i];
+						}
+
+						if (parentRoot === this.map.hiresTileManager.scene) {
+							if (!hiresHit) hiresHit = intersects[i];
+						}
+
 						if (!covered || (object.material && !object.material.depthTest)) {
-							if (object.onClick({
+							if (object.onClick && object.onClick({
 								data: data,
 								intersection: intersects[i]
 							})) return;
 						}
 
-						let parentRoot = object;
-						while(parentRoot.parent) parentRoot = parentRoot.parent;
 						if (parentRoot !== this.map.lowresTileManager.scene) {
 							covered = true;
 						}
@@ -201,7 +224,11 @@ export class MapViewer {
 			// fire event
 			dispatchEvent(this.events, "bluemapMapInteraction", {
 				data: data,
-				intersections: intersects
+				hit: hit,
+				hiresHit: hiresHit,
+				lowresHit: lowresHit,
+				intersections: intersects,
+				ray: this.raycaster.ray
 			});
 		}
 	}
@@ -285,6 +312,10 @@ export class MapViewer {
 		if (this.map && this.map.isMap) {
 			return map.load(HIRES_VERTEX_SHADER, HIRES_FRAGMENT_SHADER, LOWRES_VERTEX_SHADER, LOWRES_FRAGMENT_SHADER, this.data.uniforms)
 				.then(() => {
+					for (let texture of this.map.loadedTextures){
+						this.renderer.initTexture(texture);
+					}
+
 					this.data.uniforms.skyColor.value = map.data.skyColor;
 					this.data.uniforms.ambientLight.value = map.data.ambientLight;
 					this.data.uniforms.hiresTileMap.value.map = map.hiresTileManager.tileMap.texture;

src/controls/freeflight/FreeFlightControls.js

@@ -142,8 +142,8 @@ export class FreeFlightControls {
     }
 
     onMouseUp = evt => {
-        if (this.clickStart.x !== evt.x) return;
+        if (Math.abs(this.clickStart.x - evt.x) > 5) return;
-        if (this.clickStart.y !== evt.y) return;
+        if (Math.abs(this.clickStart.y - evt.y) > 5) return;
 
         this.target.requestPointerLock();
     }

src/controls/freeflight/keyboard/KeyHeightControls.js

@@ -35,6 +35,7 @@ export class KeyHeightControls {
         ],
         DOWN: [
             new KeyCombination("ShiftLeft"),
+            new KeyCombination("ShiftRight"),
             new KeyCombination("PageDown")
         ],
     }

src/controls/map/MapControls.js

@@ -244,7 +244,7 @@ export class MapControls {
     }
 
     initializeHammer() {
-        let touchTap = new Tap({ event: 'tap', pointers: 1, taps: 1, threshold: 2 });
+        let touchTap = new Tap({ event: 'tap', pointers: 1, taps: 1, threshold: 5 });
         let touchMove = new Pan({ event: 'move', pointers: 1, direction: DIRECTION_ALL, threshold: 0 });
         let touchTilt =  new Pan({ event: 'tilt', pointers: 2, direction: DIRECTION_VERTICAL, threshold: 0 });
         let touchRotate = new Rotate({ event: 'rotate', pointers: 2, threshold: 0 });

src/map/TileManager.js

@@ -74,10 +74,15 @@ export class TileManager {
     loadAroundTile(x, z, viewDistanceX, viewDistanceZ) {
         this.unloaded = false;
 
+        let unloadTiles = false;
+        if (this.viewDistanceX > viewDistanceX || this.viewDistanceZ > viewDistanceZ) {
+            unloadTiles = true;
+        }
+
         this.viewDistanceX = viewDistanceX;
         this.viewDistanceZ = viewDistanceZ;
 
-        if (this.centerTile.x !== x || this.centerTile.y !== z) {
+        if (unloadTiles || this.centerTile.x !== x || this.centerTile.y !== z) {
             this.centerTile.set(x, z);
             this.removeFarTiles();
 

src/markers/HtmlMarker.js

@@ -82,7 +82,7 @@ export class HtmlMarker extends Marker {
      * @returns {Element}
      */
     get element() {
-        return this.elementObject.element;
+        return this.elementObject.element.getElementsByTagName("div")[0];
     }
 
     /**

src/markers/MarkerManager.js

@@ -59,12 +59,17 @@ export class MarkerManager {
      * @param ms - interval in milliseconds
      */
     setAutoUpdateInterval(ms) {
-        if (this._updateInterval) clearInterval(this._updateInterval);
+        if (this._updateInterval) clearTimeout(this._updateInterval);
         if (ms > 0) {
             let autoUpdate = () => {
-                this.update().finally(() => {
+                this.update()
-                    this._updateInterval = setTimeout(autoUpdate, ms);
+                    .then(() => {
-                });
+                        this._updateInterval = setTimeout(autoUpdate, ms);
+                    })
+                    .catch(e => {
+                        alert(this.events, e, "warning");
+                        this._updateInterval = setTimeout(autoUpdate, Math.max(ms, 1000 * 15));
+                    });
             };
 
             this._updateInterval = setTimeout(autoUpdate, ms);
@@ -77,10 +82,7 @@ export class MarkerManager {
      */
     update() {
         return this.loadMarkerFile()
-            .then(markerFileData => this.updateFromData(markerFileData))
+            .then(markerFileData => this.updateFromData(markerFileData));
-            .catch(error => {
-                alert(this.events, error, "warning");
-            });
     }
 
     /**

src/markers/ObjectMarker.js

@@ -38,6 +38,7 @@ export class ObjectMarker extends Marker {
         this.data.type = "object";
 
         this.data.label = null;
+        this.data.detail = null;
         this.data.link = null;
         this.data.newTab = true;
     }
@@ -49,8 +50,8 @@ export class ObjectMarker extends Marker {
             pos.sub(this.position);
         }
 
-        if (this.data.label) {
+        if (this.data.detail || this.data.label) {
-            let popup = new LabelPopup(this.data.label);
+            let popup = new LabelPopup(this.data.detail || this.data.label);
             popup.position.copy(pos);
             this.add(popup);
             popup.open();
@@ -67,6 +68,7 @@ export class ObjectMarker extends Marker {
      * @param markerData {{
      *      position: {x: number, y: number, z: number},
      *      label: string,
+     *      detail: string,
      *      link: string,
      *      newTab: boolean
      *      }}
@@ -82,10 +84,12 @@ export class ObjectMarker extends Marker {
         // update label
         this.data.label = markerData.label || null;
 
+        //update detail
+        this.data.detail = markerData.detail || null;
+
         // update link
         this.data.link = markerData.link || null;
         this.data.newTab = !!markerData.newTab;
-
     }
 
 }

src/markers/PoiMarker.js

@@ -43,7 +43,7 @@ export class PoiMarker extends HtmlMarker {
     }
 
     onClick(event) {
-        if (this.highlight) return;
+        if (this.highlight || !this.data.label) return true;
         this.highlight = true;
 
         let eventHandler = evt => {
@@ -102,12 +102,15 @@ export class PoiMarker extends HtmlMarker {
 
         // update anchor
         let anch = markerData.anchor || markerData.iconAnchor || {}; //"iconAnchor" for backwards compatibility
-        this.anchor.setX(anch.x || 0);
+        this.iconElement.style.transform = `translate(${-anch.x}px, ${-anch.y}px)`;
-        this.anchor.setY(anch.y || 0);
+        //this.anchor.setX(anch.x || 0);
+        //this.anchor.setY(anch.y || 0);
+
 
         // update label
-        if (this.labelElement.innerHTML !== markerData.label){
+        if (this.data.label !== markerData.label){
-            this.labelElement.innerHTML = markerData.label || "";
+            this.data.label = markerData.label || "";
+            this.labelElement.innerHTML = this.data.label || "";
         }
 
         // update icon

src/util/CSS2DRenderer.js

@@ -38,8 +38,18 @@ var CSS2DObject = function ( element ) {
 
     } );
 
-    this.element.addEventListener("click", event => this.onClick(event));
+    this.element.addEventListener("click", event => {
-    this.element.addEventListener("touch", event => this.onClick(event));
+        if (this.onClick(event)) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    });
+    this.element.addEventListener("touch", event => {
+        if (this.onClick(event)) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    });
 
 };