- add GridLayer.js for representing cooridinates grid

- Map Constructor with min and may x and y
- deactivating NorthArrow 6 BoxLayer
- npm updates

src/css/page.css

@@ -51,14 +51,13 @@ section {
     /* margin: 10px; */
 }
 
-.input-area {
-    /* flex: 1;
+/*.input-area {
+     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center; */
-    /* margin: 10px; */
-}
+    justify-content: center;     
+}*/
 
 .btnDownloadMeme {
     margin-top: 10px;
@@ -569,7 +568,6 @@ label>.label-body {
     color: #757575;
     background-color: white;
     border-bottom: 1px solid #dcdcdc;
-    /* border-bottom: 1px solid #dcdcdc; */
 }
 
 .navigation ul {
@@ -773,6 +771,8 @@ there.
 
 @media (min-width: 1200px) {}
 
+
+
 .tab-content {
     min-height: 390px;
 }
@@ -813,4 +813,42 @@ ul.tab-nav li span.active.button {
 .tab-content .tab-pane.active {
     display: block;
     /* visibility: visible; */
+}
+
+
+
+.red-label {  
+    color: #f00;
+    padding: 2px;
+    text-shadow: -1px -1px #FFF, 0 -1px #FFF, 1px -1px #FFF, -1px 0 #FFF, 1px 0 #FFF, -1px 1px #FFF, 0 1px #FFF, 1px 1px #FFF;
+    position: absolute;
+    pointer-events: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+.green-label {   
+    color: #7cfc00;
+    padding: 2px;
+    text-shadow: -1px -1px #FFF, 0 -1px #FFF, 1px -1px #FFF, -1px 0 #FFF, 1px 0 #FFF, -1px 1px #FFF, 0 1px #FFF, 1px 1px #FFF;
+    position: absolute;
+    pointer-events: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+.blue-label {  
+    color: #00bfff;
+    padding: 2px;
+    text-shadow: -1px -1px #FFF, 0 -1px #FFF, 1px -1px #FFF, -1px 0 #FFF, 1px 0 #FFF, -1px 1px #FFF, 0 1px #FFF, 1px 1px #FFF;
+    position: absolute;
+    pointer-events: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
 }

src/js/controls/NorthArrow.js

@@ -9,10 +9,6 @@ import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer';
 import { Scene } from 'three/src/scenes/Scene';
 import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
 
-// import { SphereGeometry } from 'three/src/geometries/SphereGeometry';
-// import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
-// import { Mesh } from 'three/src/objects/Mesh';
-
 import './NorthArrow.css';
 
 export class NortArrow extends Control {

src/js/core/Map.js

@@ -12,12 +12,17 @@ class Map extends OrbitControls {
     _controlContainer;
     _controls;
 
-    constructor(size, center, camera, scene, domElement, container) {
+    constructor(x, y, z, size, center, camera, scene, domElement, container) {
         // call parent constructor of OrbitControls
         super(size, center, camera, scene, domElement);
 
         this.camera = camera;
         this.container = container;
+        this.length = x.max - x.min;      
+        this.width = y.max - y.min;
+        this.x = x;
+        this.y = y;
+        this.z = z;
 
         //init the control corners
         if (this._initControlPos) {

src/js/layer/BoxLayer.js

@@ -11,6 +11,7 @@ class BoxLayer extends Layer {
         this.visible = true;
         this.name = params.name;
         this.color = params.color;
+        this.center = params.center;
         this.geometry = new BoxGeometry(params.width, params.height, params.depth);
         this.material = new MeshBasicMaterial({
             color: this.color
@@ -18,9 +19,10 @@ class BoxLayer extends Layer {
         this.materials = [];
         this.materials.push(this.material);
         this.mesh = new Mesh(this.geometry, this.material);
-        this.mesh.position.x = 4282010;
-        this.mesh.position.y = 2302070;
-        this.mesh.position.z =  -13616.3;
+        // this.mesh.position.x = 4282010;
+        // this.mesh.position.y = 2302070;
+        // this.mesh.position.z =  -13616.3;
+        this.mesh.position.set(this.center.x, this.center.y, this.center.z);
     }
 
     setVisible(visible) {

src/js/layer/GridLayer.js

@@ -0,0 +1,383 @@
+import { BufferGeometry } from 'three/src/core/BufferGeometry';
+import { Float32BufferAttribute } from 'three/src/core/BufferAttribute';
+import { LineBasicMaterial } from 'three/src/materials/LineBasicMaterial';
+import { PointsMaterial } from 'three/src/materials/PointsMaterial';
+import { LineSegments } from 'three/src/objects/LineSegments';
+import { Layer } from './Layer';
+import { Group } from 'three/src/objects/Group';
+// import { Color } from 'three/src/math/Color';
+import { Vector3 } from 'three/src/math/Vector3';
+import { Geometry } from 'three/src/core/Geometry';
+import { Line } from 'three/src/objects/Line';
+import { Points } from 'three/src/objects/Points';
+
+export class GridLayer extends Layer {
+
+    constructor(params) {
+        super();
+        this.type = 'GridLayer';
+
+        //this.features = [];        
+        this.visible = true;
+        this.opacity = 1;
+        this.materials = [];
+        for (var k in params) {
+            this[k] = params[k];
+        }
+        this.objectGroup = new Group();
+        this.labelConnectorGroup = new Group();
+
+        //for labeling
+        // this.l = { i: 0, v: 4.99999999998, ht: 3 };//ht:3, ht:1 an der Ebene
+        this.labelInfo = { i: 0, v: 100, ht: 3 };//ht:3, ht:1 an der Ebene
+        this.labels = [];
+        this.scale = 1;
+    }
+
+    scaleZ(z) {
+        this.objectGroup.scale.z = z;
+        this.labelConnectorGroup.scale.z = z;
+    }
+
+    setWireframeMode(wireframe) {
+        this.materials.forEach(function (mat) {
+            //if (m.w) return;
+            //m.mat.wireframe = wireframe;
+            mat.wireframe = wireframe;
+        });
+    }
+
+    setVisible(visible) {
+        this.visible = visible;
+        this.objectGroup.visible = visible;
+        this.labelConnectorGroup.visible = visible;
+        this.labelParentElement.style.display = (this.objectGroup.visible == true) ? "block" : "none";
+        this.emit('visibility-change');
+    }
+
+    onRemove(map) {
+        this.getScene().remove(this.objectGroup);
+    }
+
+    onAdd(map) {
+        let divisions = 5;
+        // let size = map.length / 10;
+
+
+        let gridXZ = this.build(map.length, divisions, map.center.y, map.width);
+        // gridXZ.position.set(this.center.x, this.center.y, this.center.z);
+
+        // size = map.width / 10;
+        // let gridYZ = this.build(0, size, map.length / 2, map.width);
+        // gridYZ.rotation.z = Math.PI / 2;
+        // gridYZ.position.set(this.center.x, this.center.y, this.center.z);
+
+        let gridY = this.buildY(map.width, divisions, map.center.z, map.width);
+
+        //waagrechtes grid
+        // // let gridXY = this.build(map.length, divisions, 0, map.width);
+        // let gridXY = this.build(map.length, divisions, map.center.y, map.width);
+        // // gridXY.position.set(this.center.x, this.center.y, this.center.z);
+        // gridXY.rotation.x = Math.PI / 2;
+
+        this.buildLabels(divisions);
+
+        this.getScene().add(this.objectGroup);
+        this.getScene().add(this.labelConnectorGroup);
+    }
+
+    buildY(size, divisions, constant, height) {
+        let step = size / divisions;
+        let vertices = [];
+
+        for (let k = this._map.y.min; k <= this._map.y.max; k = k + step) {
+            vertices.push(this._map.x.min, k, constant, this._map.x.max, k, constant)
+        }
+
+        let geometry = new BufferGeometry();
+        let positions = new Float32BufferAttribute(vertices, 3);
+        geometry.setAttribute('position', positions);
+        let material = new LineBasicMaterial({
+            linewidth: 1,
+            color: 0xA0A1A3
+        });
+        this.materials.push(material);
+
+        //THREE.LineSegments.call(this, geometry, material);
+        let lineSegments = new LineSegments(geometry, material);
+        this.objectGroup.add(lineSegments);
+        return lineSegments;
+    }
+
+    build(size, divisions, constant_position, height) {
+        let step = size / divisions;
+        let vertices = [];
+
+        //for (var i = -size; i <= size; i += step) {
+        //    vertices.push(i, position, height, i, position, -height);//senkrecht
+        //}
+
+        // for (let k = - halfSize; k <= halfSize; k = k + step) {
+        for (let k = this._map.x.min; k <= this._map.x.max; k = k + step) {
+            vertices.push(k, constant_position, height / 2, k, constant_position, -height / 2);//senkrecht
+            // vertices.push(-halfSize, constant_position, k, halfSize, constant_position, k);//waagrecht 
+
+        }
+
+        // // for (let j = -height; j <= height; j += step) {
+        // for (let j = this._map.z.min; j <= this._map.z.max; j += step) {
+        //     // vertices.push(-halfSize, constant_position, j, halfSize, constant_position, j);//waagrecht  
+        //     vertices.push(this._map.x.min, constant_position, j, this._map.x.max, constant_position, j);//waagrecht   
+        // }
+
+        let geometry = new BufferGeometry();
+        let positions = new Float32BufferAttribute(vertices, 3);
+        geometry.setAttribute('position', positions);
+        let material = new LineBasicMaterial({
+            linewidth: 1,
+            color: 0xA0A1A3
+        });
+        this.materials.push(material);
+
+
+        //THREE.LineSegments.call(this, geometry, material);
+        let lineSegments = new LineSegments(geometry, material);
+        //this.visible = false;
+        //this.geometry.visible = this.visible;
+
+        this.objectGroup.add(lineSegments);
+        return lineSegments;
+    }
+
+    _round(value, decimals) {
+        return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
+    }
+
+    buildLabels(divisions = 5) {
+        let size = this._map.length;
+        let step = size / divisions;
+
+        // this.parent = parent;
+        // this.parentElement = parentElement;
+        // var width = 80;
+        let labels = new Array();
+
+        // for (let k = - halfSize; k <= halfSize; k = k + step) {
+        for (let k = this._map.x.min; k <= this._map.x.max; k = k + step) {
+            if (k % 1 != 0) k = this._round(k, 2);
+            let info = { a: k, size: step, axis: "x", color: 0xff0000, cl: "red-label", h: 0.6, centroid: [[k, this._map.center.y, this._map.width / 2]] };
+            labels.push(info);
+        }
+
+        size = this._map.width;
+        step = size / divisions;
+        for (let k = this._map.y.min; k <= this._map.y.max; k = k + step) {
+            if (k % 1 != 0) k = this._round(k, 2);
+            let info = { a: k, size: step, axis: "y", color: 0x00ff00, cl: "green-label", h: 0.6, centroid: [[this._map.x.min, k, this._map.center.z]] };
+            labels.push(info);
+        }
+
+        //label
+        // this.f = [
+        //     { a: [i18n.widgets.gridlayer.east], cl: "red-label", h: 0.0, centroid: [[0, width / 2 + 15, this.height]], axis: true },
+        //     { a: [this._map.getMapX(-10)], cl: "red-label", h: 0.0, centroid: [[-10, width / 2, this.height]] },
+        //     { a: [this._map.getMapX(-20)], cl: "red-label", h: 0.6, centroid: [[-20, width / 2, this.height]] },
+        //     { a: [this._map.getMapX(-30)], cl: "red-label", h: 0.6, centroid: [[-30, width / 2, this.height]] },
+        //     { a: [this._map.getMapX(-40)], cl: "red-label", h: 0.6, centroid: [[-40, width / 2, this.height]] },
+        //     { a: [this._map.getMapX(-50)], cl: "red-label", h: 0.6, hs: 4, centroid: [[-50, width / 2, this.height]] },
+        //     { a: [this._map.getMapX(0)], cl: "red-label", h: 0.6, centroid: [[0, width / 2, this.height]] },
+        //     { a: [this._map.getMapX(10)], cl: "red-label", h: 0.6, centroid: [[10, width / 2, this.height]] },
+        //     { a: [this._map.getMapX(20)], cl: "red-label", h: 0.6, centroid: [[20, width / 2, this.height]] },
+        //     { a: [this._map.getMapX(30)], cl: "red-label", h: 0.6, centroid: [[30, width / 2, this.height]] },
+        //     { a: [this._map.getMapX(40)], cl: "red-label", h: 0.6, centroid: [[40, width / 2, this.height]] },
+        //     { a: [this._map.getMapX(50)], cl: "red-label", h: 0.6, centroid: [[50, width / 2, this.height]] }
+        // ];
+        var getCentroidFunc = function (f) { return f.centroid; };
+
+        // Layer must belong to a project
+        let labelInfo = this.labelInfo;
+        if (labelInfo === undefined || getCentroidFunc === undefined) return;
+
+        // // let line_mat = new LineBasicMaterial({ color: Gba3D.Options.label.connectorColor });
+        // let line_mat = new LineBasicMaterial({
+        //     linewidth: 1,
+        //     color: 0x80CCFF
+        // });
+        // this.labelConnectorGroup = new Group();
+        this.labelConnectorGroup.userData.layerId = this.index;
+        // if (parent) {
+        //     parent.add(this.labelConnectorGroup);
+        // }
+        // this.getScene().add(this.labelConnectorGroup);
+        this.labelConnectorGroup.visible = this.objectGroup.visible;
+
+        // create parent element for labels
+        this.labelParentElement = document.createElement("div");
+        this._map.container.appendChild(this.labelParentElement);
+        this.labelParentElement.style.display = (this.objectGroup.visible) ? "block" : "none";
+
+        for (let i = 0, l = labels.length; i < l; i++) {
+            let f = labels[i];
+            f.aElems = [];
+            f.aObjs = [];
+            let text = f.a;
+            if (text === null || text === "") continue;
+
+            let classLabel = f.cl;
+            if (classLabel === undefined || classLabel === "") classLabel = "label";
+
+            let horizontalShiftLabel = f.hs;
+            if (horizontalShiftLabel === undefined || horizontalShiftLabel === "") horizontalShiftLabel = 0;
+
+            // let line_mat = new LineBasicMaterial({ color: Gba3D.Options.label.connectorColor });
+            let line_mat = new LineBasicMaterial({
+                linewidth: 1,
+                color: f.color //0x80CCFF
+            });
+
+            let pts = getCentroidFunc(f);
+            for (let j = 0, m = pts.length; j < m; j++) {
+                let pt = pts[j];
+
+                // create div element for label
+                let e = document.createElement("div");
+                e.appendChild(document.createTextNode(text));
+                e.className = classLabel;// "label";
+                this.labelParentElement.appendChild(e);
+
+                // let z = labelHeightFunc(f, pt);
+                let pt0, pt1;
+                if (f.axis == "x") {
+                    pt0 = new Vector3(pt[0], pt[1], pt[2]);    // bottom
+                    pt1 = new Vector3(pt[0] + horizontalShiftLabel, pt[1], pt[2] + f.size / 2);    // top    
+                }
+                else if (f.axis == "y") {
+                    pt0 = new Vector3(pt[0], pt[1], pt[2]);
+                    pt1 = new Vector3(pt[0] - horizontalShiftLabel - f.size, pt[1], pt[2]);
+                }
+                // create connector - not for axis 
+                // if (f.axis !== true) {
+                let geom = new Geometry();
+                geom.vertices.push(pt1, pt0);
+
+                let line = new Line(geom, line_mat);
+                // line.position.set(this.center.x, this.center.y, this.center.z);
+
+                line.userData.layerId = this.index;
+                line.userData.featureId = i;
+                this.labelConnectorGroup.add(line);
+                // }
+
+                f.aElems.push(e);
+                ////f.labelDiv = e;
+                f.aObjs.push(line);
+                this.labels.push({ labelDiv: e, obj: line, pt: pt1 });
+            }
+        }
+
+    }
+
+    animate() {
+        this._updateLabelPosition();
+    }
+
+    // update label position
+    _updateLabelPosition() {
+        if (this.labels.length === 0 || this.objectGroup.visible === false) return;
+
+        let container = document.getElementById("webgl");
+        // let widthHalf = 0.5 * container.clientWidth;
+        // let heightHalf = 0.5 * container.clientHeight;
+
+
+        // autosize = appSettings.Options.label.autoSize,
+        let autosize = true;
+        let camera = this._map.camera;
+        let camera_pos = camera.position;
+        let c2t = this._map.target.clone().sub(camera_pos);
+        let c2l = new Vector3();
+        
+        //neu
+        // app.labels = app.controls.gridlayer.labels;
+        let scaleFactor = this.scale;
+
+        // make a list of [label index, distance to camera]
+        let idx_dist = [];
+        for (var i = 0, l = this.labels.length; i < l; i++) {
+            // let firstLinePoint = this.labels[i].obj.geometry.vertices[0];
+            idx_dist.push([i, camera_pos.distanceTo(this.labels[i].pt)]);
+        }
+
+        // sort label indexes in descending order of distances
+        idx_dist.sort(function (a, b) {
+            if (a[1] < b[1]) return 1;
+            if (a[1] > b[1]) return -1;
+            return 0;
+        });
+
+        let label, labelDiv, x, y, dist, fontSize;
+        // var minFontSize = appSettings.Options.label.minFontSize;
+        for (let i = 0, l = idx_dist.length; i < l; i++) {
+            label = this.labels[idx_dist[i][0]];
+            labelDiv = label.labelDiv;
+            if (c2l.subVectors(label.pt, camera_pos).dot(c2t) > 0) {
+                // label is in front
+
+                // // calculate label position
+                // vector.copy(label.pt);
+                // vector.applyMatrix4(label.obj.matrixWorld);
+                // // map to normalized device coordinate (NDC) space
+                // camera.updateMatrixWorld();
+                // vector.project(camera);
+                // if (scaleFactor > 1) {
+                //     v.z = v.z * scaleFactor;
+                // }
+                // vector.x = (vector.x * widthHalf) + widthHalf;
+                // vector.y = - (vector.y * heightHalf) + heightHalf;
+
+                let proj = this.toScreenPosition(label.obj, label.pt, camera);
+                // set label position
+                labelDiv.style.display = "block";
+                labelDiv.style.left = proj.x + 'px';
+                labelDiv.style.top = proj.y + 'px';
+                labelDiv.style.zIndex = i + 1;
+                let minFontSize = 10;
+                // set font size
+                if (autosize) {
+                    dist = idx_dist[i][1];
+                    if (dist < 12) dist = 12;
+                    fontSize = Math.max(Math.round(1000 / dist), minFontSize);
+                    labelDiv.style.fontSize = fontSize + "px";
+                }
+            } else {
+                // label is in back
+                labelDiv.style.display = "none";
+            }
+        }
+    }
+
+    toScreenPosition(obj, pt, camera) {
+        let vector = new Vector3();
+        // calculate label position
+        vector.copy(pt);
+
+        // TODO: need to update this when resize window   
+        let container = document.getElementById("webgl");
+        let widthHalf = 0.5 * container.clientWidth;
+        let heightHalf = 0.5 * container.clientHeight;
+
+        // obj.updateMatrixWorld();        
+        // vector.applyMatrix4(obj.matrixWorld);
+        vector.project(camera);
+
+        vector.x = (vector.x * widthHalf) + widthHalf;
+        vector.y = - (vector.y * heightHalf) + heightHalf;
+
+        return {
+            x: vector.x,
+            y: vector.y
+        };
+
+    }
+
+}

src/js/layer/TinLayer.js

@@ -53,7 +53,6 @@ class TinLayer extends Layer {
     async onAdd(map) {
         await this.build(this.getScene());
         map.update();
-        // this.emit('add');
     }
 
     //build BufferGeometry with Index

src/js/main.js

@@ -5,11 +5,13 @@ import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
 import { Scene } from 'three/src/scenes/Scene';
 import { Vector3 } from 'three/src/math/Vector3';
 import { TinLayer } from './layer/TinLayer';
+import { GridLayer } from './layer/GridLayer';
+// import { BoxLayer } from './layer/BoxLayer';
 import { DemLayer } from './layer/DemLayer';
 import { Map } from './core/Map';
 import * as domEvent from './core/domEvent';
 import { Coordinates } from './controls/Coordinates';
-import { NortArrow } from './controls/NorthArrow';
+// import { NortArrow } from './controls/NorthArrow';
 import { LayerControl } from './controls/LayerControl';
 import { BasemapControl } from './controls/BasemapControl';
 import { SliderControl } from './controls/SliderControl';
@@ -108,36 +110,32 @@ class Application {
         var aspect = this.width / this.height;
         var near = 0.1; //This is the distance at which the camera will start rendering scene objects
         var far = 2000; //Anything beyond this distance will not be rendered                
-        this.camera = new PerspectiveCamera(angle, aspect, near, far);
+        // this.camera = new PerspectiveCamera(angle, aspect, near, far);
         // this.camera.position.set(0, -0.1, 150);
         // this.camera.lookAt(new Vector3(0, 0, 0));
 
         this.camera = new PerspectiveCamera(30, this.width / this.height, 100, 100000);
-
         // const dirLight = new DirectionalLight(0xffffff, 1);
         // dirLight.position.set(585000 + 10000, 6135000 + 10000, -500 + 5000);
         // this.camera.add(dirLight);
 
-
         let x = { min: 3955850, max: 4527300, avg: 4282010 };  
         // let y = { min: 2183600, max: 2502700, avg: 2302070 };
         let y = { min: 2182271.6538, max: 2504028.3462 , avg: 2302070 };
         let z = { min: -60066, max: 3574.94, avg: -13616.3 };
-        const center = new Vector3((x.min + x.max) / 2, (y.min + y.max) / 2, z.avg);
+        const center = new Vector3((x.min + x.max) / 2, (y.min + y.max) / 2, 0);
         // const center = new Vector3(x.avg, y.avg, z.avg);
-        const size = Math.max(x.max - x.min, y.max - y.min, z.max - z.min);
-
-        
+        const size = Math.max(x.max - x.min, y.max - y.min, z.max - z.min);        
         let baseExtent= {
             x: x,
             y: y
         };
 
         const camDirection = new Vector3(-0.5, -Math.SQRT1_2, 0.5);
+        // const camDirection = new Vector3(0, 0, 1);
         const camOffset = camDirection.multiplyScalar(size * 2);
-        this.camera.position.copy(center);
-        this.camera.position.add(camOffset);
-        // this.camera.position.set(0, 0, 1500);
+        this.camera.position.copy(center);        
+        this.camera.position.add(camOffset);       
         this.camera.near = size * 0.1;
         this.camera.far = size * 25;
         this.camera.updateProjectionMatrix();
@@ -153,13 +151,13 @@ class Application {
         // this.camera.position.set(0, -0.1, 150);
         // this.camera.lookAt(new Vector3(0, 0, 0));
 
-        // create map
-        this.map = new Map(size, center, this.camera, this.scene, this.renderer.domElement, this.container);
+        // create map 
+        this.map = new Map(x, y, z, size, center, this.camera, this.scene, this.renderer.domElement, this.container);
         // this.map.minDistance =  size*0.75;
         // this.map.maxDistance = size*15;
 
         // let boxLayer = new BoxLayer({ 
-        //     width: 10000, height: 10000, depth: 10000, name: 'test-box', color: 800080 
+        //     width: 10000, height: 10000, depth: 10000, name: 'center-box', color: 800080 , center: center
         // });
         // this.map.addLayer(boxLayer);
 
@@ -173,9 +171,7 @@ class Application {
             //     this.animate();
             // }, this);
         }
-        this.northArrow = new NortArrow({ headLength: 1, headWidth: 1 }).addTo(this.map);
-
-        // this.dialog = new MobileDialog("Help", { klass: "fm_about", parentDiv: 'basemap-control-parent' }).addTo(this.map);
+        // this.northArrow = new NortArrow({ headLength: 1, headWidth: 1 }).addTo(this.map);
 
         let demLayer = new DemLayer({
             q: 0, shading: true, type: 'dem', name: 'DEM Layer', color: 16382457, "baseExtent": baseExtent,
@@ -234,6 +230,9 @@ class Application {
         });
         this.map.addLayer(dxf140Layer);
 
+        this.gridlayer = new GridLayer({  center: center,  name: "coordinate grid", appWidth: this.width, appHeight: this.height });
+        this.map.addLayer(this.gridlayer);
+
         new LayerControl(this.map.layers, {
             collapsed: true,
             parentDiv: 'layer-control-parent-id'
@@ -332,7 +331,8 @@ class Application {
 
     animate() {
         this.renderer.render(this.scene, this.camera);
-        this.northArrow.animate();
+        // this.northArrow.animate();
+        this.gridlayer.animate();
     }
 
     addEventListeners() {
@@ -464,5 +464,5 @@ class Application {
 
 }
 
-var container = document.getElementById("webgl");
+let container = document.getElementById("webgl");
 new Application(container);