- add BoreholePopup.s and BoreholePopup.cs

- add LayerGroup.js for adding marker layer
- correct BoreholeIdentify.js

package-lock.json

@@ -1405,9 +1405,9 @@
             "dev": true
         },
         "node_modules/@types/minimatch": {
-            "version": "3.0.3",
+            "version": "3.0.4",
-            "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
+            "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz",
-            "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
+            "integrity": "sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==",
             "dev": true,
             "peer": true
         },
@@ -2386,9 +2386,9 @@
             }
         },
         "node_modules/css-loader": {
-            "version": "5.1.3",
+            "version": "5.2.0",
-            "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.1.3.tgz",
+            "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.0.tgz",
-            "integrity": "sha512-CoPZvyh8sLiGARK3gqczpfdedbM74klGWurF2CsNZ2lhNaXdLIUks+3Mfax3WBeRuHoglU+m7KG/+7gY6G4aag==",
+            "integrity": "sha512-MfRo2MjEeLXMlUkeUwN71Vx5oc6EJnx5UQ4Yi9iUtYQvrPtwLUucYptz0hc6n++kdNcyF5olYBS4vPjJDAcLkw==",
             "dev": true,
             "dependencies": {
                 "camelcase": "^6.2.0",
@@ -2625,9 +2625,9 @@
             }
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.3.695",
+            "version": "1.3.699",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.695.tgz",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.699.tgz",
-            "integrity": "sha512-lz66RliUqLHU1Ojxx1A4QUxKydjiQ79Y4dZyPobs2Dmxj5aVL2TM3KoQ2Gs7HS703Bfny+ukI3KOxwAB0xceHQ==",
+            "integrity": "sha512-fjt43CPXdPYwD9ybmKbNeLwZBmCVdLY2J5fGZub7/eMPuiqQznOGNXv/wurnpXIlE7ScHnvG9Zi+H4/i6uMKmw==",
             "dev": true
         },
         "node_modules/emoji-regex": {
@@ -4905,9 +4905,9 @@
             "dev": true
         },
         "node_modules/regjsparser": {
-            "version": "0.6.8",
+            "version": "0.6.9",
-            "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.8.tgz",
+            "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.9.tgz",
-            "integrity": "sha512-3weFrFQREJhJ2PW+iCGaG6TenyzNSZgsBKZ/oEf6Trme31COSeIWhHw9O6FPkuXktfx+b6Hf/5e6dKPHaROq2g==",
+            "integrity": "sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==",
             "dev": true,
             "dependencies": {
                 "jsesc": "~0.5.0"
@@ -6225,9 +6225,9 @@
             }
         },
         "node_modules/webpack": {
-            "version": "5.27.2",
+            "version": "5.28.0",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.27.2.tgz",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.28.0.tgz",
-            "integrity": "sha512-brNF3N/EdvMzkaZ/Xzb8sqPn5Si3iw6meqCnmNFtcnkorZsFZCBFMa2ElpIMjx6sKWYsnUpBO2dnX+7xgj+mjg==",
+            "integrity": "sha512-1xllYVmA4dIvRjHzwELgW4KjIU1fW4PEuEnjsylz7k7H5HgPOctIq7W1jrt3sKH9yG5d72//XWzsHhfoWvsQVg==",
             "dev": true,
             "dependencies": {
                 "@types/eslint-scope": "^3.7.0",
@@ -7772,9 +7772,9 @@
             "dev": true
         },
         "@types/minimatch": {
-            "version": "3.0.3",
+            "version": "3.0.4",
-            "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
+            "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz",
-            "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
+            "integrity": "sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==",
             "dev": true,
             "peer": true
         },
@@ -8589,9 +8589,9 @@
             }
         },
         "css-loader": {
-            "version": "5.1.3",
+            "version": "5.2.0",
-            "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.1.3.tgz",
+            "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.0.tgz",
-            "integrity": "sha512-CoPZvyh8sLiGARK3gqczpfdedbM74klGWurF2CsNZ2lhNaXdLIUks+3Mfax3WBeRuHoglU+m7KG/+7gY6G4aag==",
+            "integrity": "sha512-MfRo2MjEeLXMlUkeUwN71Vx5oc6EJnx5UQ4Yi9iUtYQvrPtwLUucYptz0hc6n++kdNcyF5olYBS4vPjJDAcLkw==",
             "dev": true,
             "requires": {
                 "camelcase": "^6.2.0",
@@ -8750,9 +8750,9 @@
             }
         },
         "electron-to-chromium": {
-            "version": "1.3.695",
+            "version": "1.3.699",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.695.tgz",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.699.tgz",
-            "integrity": "sha512-lz66RliUqLHU1Ojxx1A4QUxKydjiQ79Y4dZyPobs2Dmxj5aVL2TM3KoQ2Gs7HS703Bfny+ukI3KOxwAB0xceHQ==",
+            "integrity": "sha512-fjt43CPXdPYwD9ybmKbNeLwZBmCVdLY2J5fGZub7/eMPuiqQznOGNXv/wurnpXIlE7ScHnvG9Zi+H4/i6uMKmw==",
             "dev": true
         },
         "emoji-regex": {
@@ -10506,9 +10506,9 @@
             "dev": true
         },
         "regjsparser": {
-            "version": "0.6.8",
+            "version": "0.6.9",
-            "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.8.tgz",
+            "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.9.tgz",
-            "integrity": "sha512-3weFrFQREJhJ2PW+iCGaG6TenyzNSZgsBKZ/oEf6Trme31COSeIWhHw9O6FPkuXktfx+b6Hf/5e6dKPHaROq2g==",
+            "integrity": "sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==",
             "dev": true,
             "requires": {
                 "jsesc": "~0.5.0"
@@ -11523,9 +11523,9 @@
             }
         },
         "webpack": {
-            "version": "5.27.2",
+            "version": "5.28.0",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.27.2.tgz",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.28.0.tgz",
-            "integrity": "sha512-brNF3N/EdvMzkaZ/Xzb8sqPn5Si3iw6meqCnmNFtcnkorZsFZCBFMa2ElpIMjx6sKWYsnUpBO2dnX+7xgj+mjg==",
+            "integrity": "sha512-1xllYVmA4dIvRjHzwELgW4KjIU1fW4PEuEnjsylz7k7H5HgPOctIq7W1jrt3sKH9yG5d72//XWzsHhfoWvsQVg==",
             "dev": true,
             "requires": {
                 "@types/eslint-scope": "^3.7.0",

src/js/controls/BoreholePopup.css

@@ -0,0 +1,115 @@
+.gba-control-borehole {
+    cursor: pointer;
+}
+
+.gba-control-borehole .maximize.hidden {
+    display: none;
+}
+
+.gba-control-borehole .maximize {
+    color: rgb(220, 220, 220);
+    background: gray;
+    border: 1px solid #000000;
+    border-radius: 4px;
+    font-size: 16px;
+    font-weight: bold;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    float: left;
+    cursor: pointer;
+}
+
+/*side-menu zumachen*/
+.gba-menu .close {
+    color: rgb(220, 220, 220);
+    background: gray;
+    border: 1px solid #000000;
+    border-radius: 4px;
+    font-size: 16px;
+    font-weight: bold;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    float: right;
+    cursor: pointer;
+}
+.gba-close-icon {
+    background-repeat: no-repeat;
+    /* background-image: url("img/16.png"); */
+    background-position: -52px -9px;
+    display: inline;
+    padding: 0 10px;
+}
+.toolbox {
+    list-style-image: none;
+    list-style-position: inside;
+    list-style-type: none;
+}
+.gba-menu .toolbox li {
+    color: #464646;
+    line-height: 46px;
+    cursor: pointer;
+    float: right;
+    padding: 0 5px;
+}
+.gba-menu .body {
+    clear: both;
+    height: calc(100% - 46px);
+}
+
+.gba-menu {
+    /*width: 400px;*/
+    position: absolute;
+    top: 0;
+    left: 0;
+    /*bottom: 0;*/
+    /*right: 0;*/
+    padding: 0 20px 2px 20px;
+    border-right: 1px solid #ddd;
+    border-left: 1px solid #ddd;
+    /*display: none;*/
+    overflow-y: auto;
+    z-index: 1000;
+    background-color: #fff;
+    opacity: 0.93;
+}
+
+.gba-menu::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+    background: #f2f2f2;
+}
+
+.gba-menu::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background: #777;
+}
+
+.chartTable {
+    margin-left: 20px;
+    border-width: 0;
+    border-spacing: 0; /* Removes the cell spacing via CSS */
+    border-collapse: collapse; /* Optional - if you don't want to have double border where cells touch */
+}
+
+.chartTable div {
+    font: 10px sans-serif;
+    /*background-color: steelblue;*/
+    text-align: left;
+    /*padding: 3px;
+  margin: 1px;*/
+    color: #464646;
+    /*width:75px;*/
+}
+
+.chartTable td {
+    vertical-align: central;
+    text-align: center;
+    padding: 0;
+    overflow: visible;
+}
+
+.chartTable td img {
+    display: block;
+}

src/js/controls/BoreholePopup.js

@@ -0,0 +1,184 @@
+import { Control } from "./Control";
+import * as util from '../core/utilities';
+import * as domEvent from '../core/domEvent';
+import * as dom from '../core/domUtil';
+
+import './BoreholePopup.css';
+
+export class BoreholePopup extends Control {
+
+    options = {
+        position: 'topleft',
+        width: '300px',
+        height: '100%',
+        delay: '10'
+    };
+
+    constructor (options) {
+        super();
+        this._innerHTML = "Es wurde noch keine Bohrloch ausgewählt!";
+        util.setOptions(this, options);
+        //this._startPosition = -(parseInt(this.options.width, 10));
+        //this._isLeftPosition = true;
+        this._hasContent = false;
+    }
+
+    // happens after added to map
+    onAdd(map) {
+        if (!map) {
+            this.destroy();
+            //logger.warning('HomeButton::map required', true);
+            return;
+        }
+        // var b = this._nls = util.mixin({}, N.widgets.boreholepopup);
+        let container = this._container = dom.createDom("div", { "class": "gba-control-borehole" });
+
+        //button:
+        this._maxButton = dom.createDom('div', {
+            "class": "maximize", innerHTML: ">", title: "b.NLS_maximize"
+        }, this._container);
+        //link.title = 'Menu';
+        //dom.createDom('span', { "class": "close", innerHtml: '?' }, link);
+
+        //this._menu = dom.createDom('div', { "class": "gba-menu" }, document.getElementsByClassName('mapDesktop')[0]);
+        this._menu = dom.createDom('div', { "class": "gba-menu" }, dom.byId("webgl"));
+        this._menu.style.width = this.options.width;
+        this._menu.style.height = this.options.height;
+        this._menu.style.left = 0;// '-' + this.options.width;
+        this._menu.style.top = 0;
+
+        let toolboxList = dom.createDom('ul', { "class": "toolbox" }, this._menu);
+        this._clearButton = dom.createDom('li', { "class": "gba-close-link" }, toolboxList);
+        dom.createDom('i', { "class": "gba-close-icon" }, this._clearButton);
+        dom.createDom('span', { title: "b.NLS_close", innerHTML: "Close" }, this._clearButton);
+
+        this._body = dom.createDom('div', { "class": "body" }, this._menu);
+
+        //this._minimizeButton = dom.createDom('div', {
+        //    "class": "close", innerHTML: "<", title: b.NLS_minimize
+        //}, this._menu);
+        this._contenLable = dom.createDom('lable', { innerHTML: "Virtuelles Bohrprofil laut Modell <br /> (Höhenangaben in m Seehöhe)" },
+            this._body);
+
+        /* hier kommt nach dem Identify das Bohrprofil hinein */
+        this._contentPane = dom.createDom('div', { "class": "gba-menu-contents" }, this._body);
+        this._contentPane.innerHTML = this._innerHTML;
+        this._contentPane.style.clear = 'both';
+
+        domEvent
+            //.on(this._maxButton, 'click', domEvent.stopPropagation)
+            .on(this._maxButton, 'click',
+                this.show,
+                this);        
+        //domEvent.on(this._minimizeButton, 'click', domEvent.stopPropagation)
+        //    .on(this._minimizeButton, 'click',
+        //        this.hide,
+        //        this);
+        domEvent
+            //.on(this._clearButton, 'click', domEvent.stopPropagation)
+            .on(this._clearButton, 'click',
+                this._close,
+                this);
+
+        this._toggleVisibility(false);
+        return container;
+    }
+
+    show(a) {
+        //this._clearContent();
+        this._toggleVisibility(true);
+        //this._animate(true);
+    }
+
+    hide(e) {
+        //var test = this.isShowing;
+        if (this.isShowing) {
+            (this._toggleVisibility(false));
+        }
+        //if (e) {
+        //    domEvent.stop(e);
+        //}
+    }
+
+    _setContent(innerHTML) {
+        if (innerHTML instanceof HTMLElement) {
+            this._contentPane.innerHTML = "";
+            this._contentPane.appendChild(innerHTML);
+        }
+        else {
+            this._contentPane.innerHTML = innerHTML;
+        }
+        this._contentPane.style.display = "block";
+        //this._contentPane.innerHTML = innerHTML;
+        //this._contentPane.style.display = "block";            
+    }
+
+    setChartContent(data) {
+        this._contentPane.innerHTML = "";
+
+        var valTextColor = "ffffff";
+        // this.barChart = new BarChart("d17100",
+        //     320, valTextColor, 'full',
+        //     400);
+        // this.barChart.draw(data);
+        // this._contentPane.appendChild(this.barChart._container);
+
+        // var table = this.barChart.getStatTable(data);
+        // this._contentPane.appendChild(table);
+        this._hasContent = true;
+    }
+
+    _close() {
+        this._clearContent();
+        this._toggleVisibility(false);
+        this.emit("closed");
+    }
+
+    _clearContent() {
+        // $(this._contentPane).html('');
+        this._contentPane.innerHTML = '';
+        this._hasContent = false;
+    }
+
+    _toggleVisibility(visible) {
+        this._setVisibility(visible);
+        this.isShowing = visible;
+    }
+
+    _setVisibility(addOrRemove) {
+        //n.set(this.domNode, "visibility", addOrRemove ? "visible" : "hidden");
+        // $(this._menu).css("visibility", addOrRemove ? "visible" : "hidden");
+        this._menu.style.visibility = addOrRemove ? "visible" : "hidden";
+
+        //e.toggle(this.domNode, "esriPopupVisible", addOrRemove)
+
+        var maxButtonVisible = false;
+        //if add, max Button not visible
+        if (addOrRemove == true) {
+            maxButtonVisible = !addOrRemove;
+        }
+        //if remove , then max Button only visible if popup has content
+        else if (addOrRemove == false) {
+            maxButtonVisible = this._hasContent;
+        }
+        // $(this._maxButton).css("visibility", maxButtonVisible ? "visible" : "hidden");
+        this._maxButton.style.visibility = addOrRemove ? "visible" : "hidden";
+    }
+
+    onRemove() {
+        //this.cleanup();
+        this.isShowing && this.hide();
+        //for (var i = 0; i < this._eventConnections.length; i ++)
+        //{
+        //    var f = this._eventConnections[i];
+        //    f.remove();
+        //}
+        domEvent.off(this._clearButton, 'click', this._close, this);
+        domEvent.off(this._maxButton, 'click', this.show, this);
+        //this.map.off('mouse-pan', this.hide, this);
+        //C.destroy(this.domNode);
+        //this.getContainer().parentNode.removeChild(this.getContainer());
+        this._innerHTML = this._hasContent = this._nls = this._menu = this._body = this._contenLable = this._contentPane = this._maxButton = this._clearButton = null;
+    }
+
+}

src/js/core/BaseEditor.js

@@ -24,7 +24,7 @@ export class BaseEditor {
         //this.editLayer = new LayerGroup();
         this.mapTool = map.mapTool; //this.options.editTools || map.mapTool;
 
-        // this.marker.bindPopup(map._controls.boreholePopup);
+        this.marker.bindPopup(map._controls.boreholePopup);
     }
 
     enable() {
@@ -101,18 +101,48 @@ export class BaseEditor {
         if (e._cancelled) return;
         //if (!this.isConnected()) {
         //    this.connect(e);
-        //}
+        //}        
-        var dxfIdentifyParams = {};
+        let eventX = (e.clientX !== undefined) ? e.clientX : (e.touches && e.touches[0].clientX);
-        dxfIdentifyParams.clientX = e.clientX;
+        let eventY = (e.clientY !== undefined) ? e.clientY : (e.touches && e.touches[0].clientY);
-        dxfIdentifyParams.clientY = e.clientY;
+        let dxfIdentifyParams = {};
+        dxfIdentifyParams.clientX = eventX;
+        dxfIdentifyParams.clientY = eventY;
         dxfIdentifyParams.width = this.map.container.clientWidth;
         dxfIdentifyParams.height = this.map.container.clientHeight;
-        // var deferred = this.mapTool.drillTask.execute(dxfIdentifyParams);
+        let deferred = this.mapTool.drillTask.execute(dxfIdentifyParams);
-        // deferred.then(this.handleQueryResults3.bind(this));
+        deferred.then(this.handleQueryResults.bind(this));
 
         this._processDrawingClick(e);
     }
 
+    handleQueryResults() {
+        let results = arguments;
+        //var content = [];
+        let features = results[0].features;
+        let aufschlag = results[0].aufschlag;
+        if (!this.isConnected()) {
+            this.connect(aufschlag);
+        }
+        else {
+            this.marker.setLatLng(aufschlag);
+        }
+        this.marker.setPopupChartData("test");
+        this.marker.openPopup();
+
+    }
+
+    connect(e) {
+        // On touch, the latlng has not been updated because there is
+        // no mousemove.
+        if (e) this.marker._latlng = { x: e.x, y: e.y, z: e.z }; //e.latlng;
+        //this.marker.update();
+
+        //L.Editable.BaseEditor.prototype.connect.call(this, e);
+        this.mapTool.connectCreatedToMap(this.marker);
+        //this.mapTool.editLayer.addLayer(this.editLayer);
+    }
+
+
     _processDrawingClick(e) {
         this.fireAndForward('editable:drawing:clicked', e);
         this._commitDrawing(e);

src/js/core/Map.js

@@ -3,6 +3,7 @@ import * as dom from './domUtil';
 import { HomeButton } from '../controls/HomeButton';
 import { ZoomControl } from '../controls/ZoomControl';
 import { BoreholeControl } from '../controls/BoreholeControl';
+import { BoreholePopup } from '../controls/BoreholePopup';
 import * as util from './utilities';
 import { TinLayer } from '../layer/TinLayer';
 
@@ -28,7 +29,7 @@ class Map extends OrbitControls {
         // call parent constructor of OrbitControls
         super(size, center, camera, scene, container);
 
-        this.size = size;        
+        this.size = size;
         this.camera = camera;
         this.container = container;
         this.length = x.max - x.min;
@@ -50,7 +51,6 @@ class Map extends OrbitControls {
         // to do: initialize layers via serviceUrl:
         // this.serviceUrl = serviceUrl;
         this._layers = {};
-        this.initControls();
 
         this.basemaps = {
             "currentVersion": 10.01,
@@ -68,6 +68,8 @@ class Map extends OrbitControls {
         // now instantiate and return a class
         let map = new Map(x, y, z, center, camera, scene, container);
         map._initDataLayers(modelData.mappedfeatures);
+        map._initControls();
+
         map.title = modelData.model.model_name;
         return map;
     }
@@ -118,7 +120,7 @@ class Map extends OrbitControls {
         createCorner('bottom', 'right');
     }
 
-    initControls() {
+    _initControls() {
         this._controls = this._controls || {};
         // this._controls.homeControl = (new HomeButton()).addTo(this);
         let homeControl = this._controls.homeControl = new HomeButton();
@@ -128,6 +130,8 @@ class Map extends OrbitControls {
         zoomControl.addTo(this);
 
         this._controls.maptoolControl = new BoreholeControl().addTo(this);
+        this._controls.boreholePopup = new BoreholePopup({});
+        this._controls.boreholePopup.addTo(this);
     }
 
     async addLayer(layer) {
@@ -149,11 +153,42 @@ class Map extends OrbitControls {
         return this;
     }
 
+    removeLayer(layer) {
+        let id = util.stamp(layer);
+
+        if (!this._layers[id]) { return this; }
+
+        //if (this._loaded) {
+        //    layer.onRemove(this);
+        //}
+        layer.onRemove(this);
+        this.emit("change");
+        //if (layer.getAttribution && this.attributionControl) {
+        //    this.attributionControl.removeAttribution(layer.getAttribution());
+
+        //}
+
+        //if (layer.getEvents) {
+        //    this.off(layer.getEvents(), layer);
+        //}
+
+        delete this._layers[id];
+
+        //if (this._loaded) {
+        //    this.emit('layerremove', { layer: layer });
+        //    layer.emit('remove');
+        //}
+
+        layer._map = layer._mapToAdd = null;
+
+        return this;
+    }
+
     hasLayer(layer) {
         return !!layer && (util.stamp(layer) in this._layers);
     }
 
-    getCenter () { // (Boolean) -> LatLng      
+    getCenter() { // (Boolean) -> LatLng      
         return this.target;
     }
 

src/js/layer/DemLayer.js

@@ -28,6 +28,9 @@ export class DemLayer extends Layer {
     }
     ];
 
+    queryableObjects;
+    borderVisible;
+
     constructor(params) {
         super();
 

src/js/layer/Layer.js

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../core/EventEmitter';
+import { BoreholePopup } from '../controls/BoreholePopup';
 
 class Layer extends EventEmitter {
 
@@ -38,6 +39,10 @@ class Layer extends EventEmitter {
         //map.fire('layeradd', { layer: this });
     }
 
+    setWireframeMode(wireframe) {
+        return;
+    }
+
     getScene() {
         return this._map.scene;
     }

src/js/layer/LayerGroup.js

@@ -0,0 +1,99 @@
+import { Layer } from './Layer';
+import * as util from '../core/utilities';
+
+ export class LayerGroup extends Layer {
+
+    _layers;
+
+    constructor (layers) {
+        super();
+        this._layers = {};
+        let i, len;
+
+        if (layers) {
+            for (i = 0, len = layers.length; i < len; i++) {
+                this.addLayer(layers[i]);
+            }
+        }
+    }
+
+    addLayer (layer) {
+        var id = this.getLayerId(layer);
+
+        this._layers[id] = layer;
+
+        if (this._map) {
+            this._map.addLayer(layer);
+        }
+
+        return this;
+    }    
+
+    removeLayer (layer) {
+        var id = layer in this._layers ? layer : this.getLayerId(layer);
+
+        if (this._map && this._layers[id]) {
+            this._map.removeLayer(this._layers[id]);
+        }
+
+        delete this._layers[id];
+
+        return this;
+    }
+
+    hasLayer(layer) {
+        return !!layer && (layer in this._layers || this.getLayerId(layer) in this._layers);
+    }
+
+    clearLayers () {
+        for (var i in this._layers) {
+            this.removeLayer(this._layers[i]);
+        }
+        return this;
+    }
+
+    onAdd (map) {
+        for (var i in this._layers) {
+            map.addLayer(this._layers[i]);
+        }
+    }
+
+    onRemove(map) {
+        for (var i in this._layers) {
+            map.removeLayer(this._layers[i]);
+        }
+    }
+
+    eachLayer(method, context) {
+        for (var i in this._layers) {
+            method.call(context, this._layers[i]);
+        }
+        return this;
+    }
+
+    getLayer(id) {
+        return this._layers[id];
+    }
+
+    getLayers() {
+        var layers = [];
+
+        for (var i in this._layers) {
+            layers.push(this._layers[i]);
+        }
+        return layers;
+    }
+
+    //setZIndex: function (zIndex) {
+    //    return this.invoke('setZIndex', zIndex);
+    //},
+
+    scaleZ(z) {
+       return;
+    }
+
+    getLayerId(layer) {
+        return util.stamp(layer);
+    }
+}
+

src/js/layer/MarkerLayer.js

@@ -1,9 +1,20 @@
 import { Layer } from './Layer';
 import * as util from '../core/utilities';
 import { BaseEditor } from '../core/BaseEditor';
+import { CylinderGeometry } from 'three/src/geometries/CylinderGeometry';
+import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
+import { MathUtils } from 'three/src/math/MathUtils';
+import { Mesh } from 'three/src/objects/Mesh';
 
 export class MarkerLayer extends Layer {
 
+    constructor(latlng, options) {
+        super();
+        util.setOptions(this, options);
+        this._latlng = latlng;
+
+    }
+
     createEditor(map) {
         map = map || this._map;
         var Klass = this.options.editorClass || this.getEditorClass(map);
@@ -29,16 +40,11 @@ export class MarkerLayer extends Layer {
         clickable: true,
     };
 
-    constructor(latlng, options) {
-        super();
-        util.setOptions(this, options);
-        this._latlng = latlng;
 
-    }
 
     onAdd(map) {
         //this._zoomAnimated = this._zoomAnimated && map.options.markerZoomAnimation;
-
+        this.map = map;
         this._initIcon();
         this.update();
         this.emit('add');
@@ -71,13 +77,13 @@ export class MarkerLayer extends Layer {
 
     _initIcon() {
         //create default icon
-        var opt = { r: 0.25, c: 0xffff00, o: 0.8 };
+        let options = { r: 0.25, c: 0xffff00, o: 0.8 };
-        var icon = new THREE.Mesh(new THREE.CylinderGeometry(0, 0.5, 2),
+        let icon = new Mesh(new CylinderGeometry(0, 500, 1500),
-            new THREE.MeshLambertMaterial({ color: 0x38eeff, opacity: opt.o, transparent: (opt.o < 1) }));
+            new MeshLambertMaterial({ color: 0x38eeff, opacity: options.o, transparent: (options.o < 1) }));
-        icon.rotation.x = THREE.Math.degToRad(-90);
+        icon.rotation.x = MathUtils.degToRad(-90);
         icon.visible = true;
         //app.scene.add(app.boreholeMarker);
-        var addIcon = false;
+        let addIcon = false;
 
         // if we're not reusing the icon, remove the old one and init new one
         if (icon !== this._icon) {
@@ -98,10 +104,15 @@ export class MarkerLayer extends Layer {
         //this._initInteraction();
 
         if (addIcon === true) {
-            this.getPane().add(this._icon);
+            this.getScene().add(this._icon);
         }
     }
 
+    scaleZ(z) {
+        // this._icon.scale.z = z;    
+        return;    
+    }
+
     _removeIcon() {
         //if (this.options.riseOnHover) {
         //    this.off({
@@ -111,7 +122,7 @@ export class MarkerLayer extends Layer {
         //}
 
         //L.DomUtil.remove(this._icon);
-        this.getPane().remove(this._icon);
+        this.getScene().remove(this._icon);
         //this.removeInteractiveTarget(this._icon);
 
         this._icon = null;

src/js/layer/TinLayer.js

@@ -8,7 +8,7 @@ import { Plane } from 'three/src/math/Plane';
 import { Vector3 } from 'three/src/math/Vector3';
 import { Color } from 'three/src/math/Color';
 import { MyMeshStandardMaterial } from '../clip/MyMeshStandardMaterial';
-import { Object3D } from 'three/src/core/Object3D';
+import { Group } from 'three/src/objects/Group';
 
 
 const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/';
@@ -16,6 +16,11 @@ const EDGEURL = 'https://geusegdi01.geus.dk/geom3d/data/triangles/';
 
 class TinLayer extends Layer {
 
+    queryableObjects;
+    borderVisible;
+    scale;
+    objectGroup;
+
     constructor(params) {
         super();
 
@@ -31,6 +36,7 @@ class TinLayer extends Layer {
         this.queryableObjects = [];
         this.borderVisible = false;
         this.scale = 1;
+        this.objectGroup = new Group();
     }
 
     setWireframeMode(wireframe) {
@@ -43,22 +49,30 @@ class TinLayer extends Layer {
 
     setVisible(visible) {
         this.visible = visible;
-        this.mainMesh.visible = visible;
+        this.objectGroup.visible = visible;
         this.emit('visibility-change');
     }
 
+    addObject (object, queryable) {
+        if (queryable === undefined) {
+            queryable = this.q;
+        }
+        this.objectGroup.add(object);
+        if (queryable) {
+            this._addQueryableObject(object);
+        }
+    }
+
+    _addQueryableObject (object) {
+        this.queryableObjects.push(object);
+        //for (var i = 0, l = object.children.length; i < l; i++) {
+        //    this._addQueryableObject(object.children[i]);
+        //}
+    }
+
     scaleZ(z) {
         this.scale = z;
-        this.mainMesh.scale.z = z;
+        this.objectGroup.scale.z = z;
-    //     let highObject = new Object3D();
-    //     highObject.position.copy(this.uniforms.clipping.clippingHigh.value);
-    //     let lowObject = new Object3D();
-    //     lowObject.position.copy(this.uniforms.clipping.clippingLow.value);
-    //    highObject.scale.z =z;
-    //    lowObject.scale.z = z;
-    //     this.uniforms.clipping.clippingHigh.value.z = highObject.position.z;
-    //     this.uniforms.clipping.clippingLow.value.z = lowObject.position.z;
-        // this.uniforms.clipping.scale.value = z;
     }
 
     async onAdd(map) {
@@ -125,9 +139,10 @@ class TinLayer extends Layer {
         }, uniforms.clipping);   
         this.materialsArray.push(this.material);
         let mesh = this.mainMesh = new Mesh(geometry, this.material);
-        // mesh.userData.layerId = this.index;        
+        mesh.userData.layerId = this.index;
+        this.addObject(mesh, true);              
         if (app_scene) {
-            app_scene.add(mesh);
+            app_scene.add(this.objectGroup);
         }
     }
 

src/js/tasks/BoreholeIdentify.js

@@ -20,10 +20,25 @@ export class BoreholeIdentify {
         this.layers = defaults.layers;
     }
 
+    _getOffset(element) {
+        if (!element.getClientRects().length) {
+            return { top: 0, left: 0 };
+        }
+
+        let rect = element.getBoundingClientRect();
+        let win = element.ownerDocument.defaultView;
+        return (
+            {
+                top: rect.top + win.pageYOffset,
+                left: rect.left + win.pageXOffset
+            });
+    }
+
     execute(params) {
-        let canvasOffset = $(this.domElement).offset();
+        // let canvasOffset = $(this.domElement).offset();
+        let canvasOffset = this._getOffset(this.domElement);
         let xClickedOnCanvas = params.clientX - canvasOffset.left;
-        let yClickedonCanvas = params.clientY - canvasOffset.top;
+        let yClickedonCanvas = params.clientY - canvasOffset.top;       
         //this.camera = params.camera;
 
         let eventsResponse = this._intersectObjects(xClickedOnCanvas, yClickedonCanvas, params.width, params.height);
@@ -47,7 +62,7 @@ export class BoreholeIdentify {
                     // calculate mouse position in normalized device coordinates                  
                     let mouseXForRay = (offsetX / width) * 2 - 1;
                     let mouseYForRay = -(offsetY / height) * 2 + 1;
-                    let z = 0.5;
+                    let z = 0;
 
                     let vector = new Vector3(mouseXForRay, mouseYForRay, z);
                     vector.unproject(this.camera);
@@ -60,17 +75,17 @@ export class BoreholeIdentify {
                     //raycaster.set(vector, direction);
 
                     //raycaster.setFromCamera(mouse, this.camera);
-                    let a = this._getQueryableObjects();//nur die sichtbar sind
+                    let visibleMehses = this._getQueryableObjects();//nur die sichtbar sind
-                    let b = this._getQueryableObjects2();//alle
+                    let allMeshes = this._getQueryableObjects2();//alle
                     let intersects = [];
-                    let intersects1 = raycaster.intersectObjects(a, true);
+                    let intersects1 = raycaster.intersectObjects(visibleMehses, true);
                     if (intersects1.length > 0) {
                         this.start = intersects1[0].point.clone();
                         let startPosition = intersects1[0].point;
-                        startPosition.z = 60;// += 0.5;
+                        startPosition.z += 0.5;
                         let direction = new Vector3(0, 0, -1);
                         let raycaster = new Raycaster(startPosition, direction);
-                        intersects = raycaster.intersectObjects(b, false);
+                        intersects = raycaster.intersectObjects(allMeshes, false);
                     }
 
                     let resultObjects = [];
@@ -85,7 +100,7 @@ export class BoreholeIdentify {
                         let layer = obj.object;
                         let layerId = layer.userData.layerId;
                         let objectGroup = layer.parent;
-                        let featureId = obj.index;// obj.faceIndex;
+                        let featureId = obj.faceIndex;// obj.faceIndex;
                         let scaleFactor = parseFloat(objectGroup.scale.z);
 
                         if (scaleFactor > 1) {
@@ -154,7 +169,8 @@ export class BoreholeIdentify {
 
     _getQueryableObjects() {
         let _queryableObjects = [];
-        this.layers.forEach(function (layer) {
+        // this.layers.forEach(function (layer) {
+            Object.values(this.layers).forEach(layer => {
             if (layer.visible && layer.queryableObjects.length) {
                 _queryableObjects = _queryableObjects.concat(layer.queryableObjects);
             }
@@ -164,7 +180,8 @@ export class BoreholeIdentify {
 
     _getQueryableObjects2() {
         let _queryableObjects = [];
-        this.layers.forEach(function (layer) {
+        // this.layers.forEach(function (layer) {
+        Object.values(this.layers).forEach(layer => {
             //if (layer.visible && layer.queryableObjects.length) {
             if (layer.queryableObjects.length) {
                 _queryableObjects = _queryableObjects.concat(layer.queryableObjects);

src/js/tools/BoreholeTool.js

@@ -4,6 +4,10 @@ import * as domEvent from '../core/domEvent';
 import { MarkerLayer } from '../layer/MarkerLayer';
 import * as dom from '../core/domUtil';
 import * as util from '../core/utilities';
+import { BoreholeIdentify } from '../tasks/BoreholeIdentify';
+import { TinLayer } from '../layer/TinLayer';
+import { DemLayer } from '../layer/DemLayer';
+import { LayerGroup } from '../layer/LayerGroup';
 
 export class BoreholeTool extends EventEmitter {
 
@@ -31,6 +35,21 @@ export class BoreholeTool extends EventEmitter {
 
         let highlightMaterial = new MeshLambertMaterial({ emissive: 0x999900, transparent: true, opacity: 0.5 });
         this.defaultMapCursor = this.map.domElement.style.cursor;
+        this.featuresLayer = this._createFeaturesLayer();
+
+        let dataLayer = [];
+        Object.values(this.map.layers).forEach(layer => {
+            //if (layer.visible && layer.queryableObjects.length) {
+            if (layer instanceof DemLayer || layer instanceof TinLayer) {
+                dataLayer.push(layer);
+            }
+        });
+        this.drillTask = new BoreholeIdentify({
+            camera: this.map.object,
+            domElement: this.map.domElement, //layer: layer,
+            highlightMaterial: highlightMaterial,
+            layers: dataLayer
+        });
     }
 
     // _createFeaturesLayer () {
@@ -60,7 +79,7 @@ export class BoreholeTool extends EventEmitter {
     disable() {
         //if (this.map.mapTool) this.map.mapTool.off('editable:drawing:start', this.disable.bind(this));
         dom.removeClass(this.map.container, 'measure-enabled');
-        // this.featuresLayer.clearLayers();
+        this.featuresLayer.clearLayers();
         //this.fireAndForward('hidemeasure');
         if (this._drawingEditor) {
             this._drawingEditor.cancelDrawing();
@@ -74,6 +93,14 @@ export class BoreholeTool extends EventEmitter {
         this.map.emit(type, e);
     }
 
+    connectCreatedToMap(layer) {
+        return this.featuresLayer.addLayer(layer);
+    }
+
+    _createFeaturesLayer() {
+        return new LayerGroup().addTo(this.map);
+    }
+
     _startMarker(latlng, options) {
         latlng = latlng || this.map.getCenter().clone();
         let markerLayer = this._createMarker(latlng, options);//.addTo(this.map);
@@ -165,8 +192,8 @@ export class BoreholeTool extends EventEmitter {
         //var xClickedOnCanvas = e.clientX - canvasOffset.left;
         //var yClickedonCanvas = e.clientY - canvasOffset.top;
         //var event = { x: xClickedOnCanvas, y: yClickedonCanvas };
-        this.mapTool._mouseDown = e;
+        this.mapTool._mouseDown = e[0];
-        this.mapTool._drawingEditor.onDrawingMouseDown(e);
+        this.mapTool._drawingEditor.onDrawingMouseDown(e[0]);
     }
 
     _onMouseup(e) {