- modal form for layer infos

- query additional layer infos inside Map class

src/js/components/ShowModal.js

@@ -6,10 +6,12 @@ import * as util from "../core/utilities";
 import "./ShowModal.css";
 
 // @Component({})
-export default class Modal {
+export class ShowModal {
     defaultTitle = "3DViewer";
     declaredClass = "MobileDialog";
     options = {};
+    title;
+    description;
 
     constructor(title, parentContainer, options = {}) {
         // super(options);
@@ -49,19 +51,16 @@ export default class Modal {
                 ${this.title}
                     <button
                     type="button"
-                    class="btn-close"
-                    id="btn-close"
-                    v-on:click="close"
+                    class="btn-close"                   
                     aria-label="Close modal"
                     >
                     x
                     </button>
                 </slot>
                 </header>
-                <section class="modal-body" id="modalDescription">
-                <slot name="body">I'm the default body!</slot>
+                <section class="modal-body modalDescription">
                 </section>
-                <section class="modal-body" id="additionalDescription">               
+                <section class="modal-body additionalDescription">               
                 </section>
                 <footer class="modal-footer">
                 <slot name="footer">                 
@@ -74,10 +73,10 @@ export default class Modal {
 
         this.domNode = dom.createDom("div", { class: "popup" }, container);
         this.dialogDiv = dom.createDom("div", { class: this.options.klass + " fm_overlay hide", innerHTML: dialogHtml }, container);
-        this.popupcontent = dom.byId("modalDescription");
+        this.popupcontent =  this.dialogDiv.querySelector(".modalDescription");
         //additional info div
-        this.pageinfo = dom.byId("additionalDescription");
-        let popup_close = dom.byId("btn-close");
+        this.pageinfo = this.dialogDiv.querySelector(".additionalDescription");
+        let popup_close = this.dialogDiv.querySelector(".btn-close");
 
         domEvent.on(popup_close, 'click', domEvent.preventDefault);
         domEvent.on(popup_close, 'click', domEvent.stopPropagation);
@@ -99,9 +98,12 @@ export default class Modal {
         if (html instanceof HTMLElement) {
             this.popupcontent.innerHTML = "";
             this.popupcontent.appendChild(html);
+            // this.description = html;
         }
         else {
+            this.popupcontent.innerHTML = "";
             this.popupcontent.innerHTML = html;
+            // this.description = html;
         }
 
         // this.domNode.getElementsByClassName("popuptitle")[0].innerHTML = title || this.title;

src/js/controls/LayerControl.js

@@ -5,6 +5,7 @@ import * as dom from '../core/domUtil';
 import * as domEvent from '../core/domEvent';
 import { DemLayer } from "../layer/DemLayer";
 import { TinLayer } from "../layer/TinLayer";
+import { ShowModal } from "../components/ShowModal";
 import './LayerControl.css';
 
 export class LayerControl extends Control {
@@ -27,6 +28,7 @@ export class LayerControl extends Control {
     _overlaysList
     _layers;
     _handlingClick;
+    _dialog;
 
     constructor(overlayLayers, options) {
         super(options);
@@ -42,10 +44,12 @@ export class LayerControl extends Control {
                 this._addLayer(overlayLayers[i], overlayLayers[i].name, true);
             }
         }
+
     }
 
     onAdd(map) {
         this._mainMap = map;
+        this._dialog = new ShowModal("Layer Info", map.container, { klass: "fm_about" });
 
         let className = "gba-controllayers";
         let container;
@@ -90,7 +94,7 @@ export class LayerControl extends Control {
 
         this._updateLayerList();
 
-       
+
 
         if (toggleable == true) {
             return container;
@@ -153,21 +157,49 @@ export class LayerControl extends Control {
         dom.createDom("label", { for: util.stamp(obj.layer) }, chkDataCell);
 
         dom.createDom("span", { innerHTML: " " + obj.name + " " }, lblDataCell);
-        //legend entry label
-        // var _table = dom.createDom("table", { width: "95%", dir: "ltr" }, lblDataCell);
-        // var _tbody = dom.createDom("tbody", {}, _table);
-        // var _tr = dom.createDom("tr", {}, _tbody);
-        // var _td = dom.createDom("td", { innerHTML: obj.name, align: this.alignRight ? "right" : "left" }, _tr);
-
-        dom.createDom("i", { class: "fas fa-info-circle" }, lblDataCell);
-
-
-
-
-
+      
+        // thesaurus direct link link
+        // let layerInfo = dom.createDom(
+        //     "a",
+        //     { href: obj.layer.citation, target: '_blank', title: 'Layers', innerHTML: '<i class="fas fa-info-circle"></i>' },
+        //     lblDataCell
+        // );
+        // domEvent.on(layerInfo, 'click', (e) => {
+        //     e.preventDefault();
+        //     e.stopPropagation();          
+        //     window.open(
+        //         layerInfo.href,
+        //         '_blank' // <- This is what makes it open in a new window.
+        //       );
+        // }, this);
 
+        // or thesaurus link in popup:
+        if ( obj.layer.citation) {
+            let layerInfo = dom.createDom(
+                "i",
+                { class: "fas fa-info-circle" },
+                lblDataCell
+            );
+            domEvent.on(layerInfo, 'click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                let popupDiv = dom.createDom("div", {});
+                dom.createDom(
+                    "span",
+                    { href: obj.layer.citation, target: '_blank', title: 'Layers', innerHTML:  "feature type: " + obj.layer.feature_type +  "<br>"},
+                    popupDiv
+                );
+              dom.createDom(
+                    "a",
+                    { href: obj.layer.citation, target: '_blank', title: 'Layers', innerHTML:  obj.layer.citation},
+                    popupDiv
+                );
+    
+                this._dialog.show(popupDiv);
+            }, this);
+        }
+        
         return legendEntryRow;
-
     }
 
     _onInputClick(layerId) {

src/js/core/Map.js

@@ -85,7 +85,9 @@ class Map extends OrbitControls {
                 type: "3dface",
                 name: layerData.preview.legend_text, //layerData.legend_description,
                 description: "test",
-                color: layerData.preview.legend_color //layerData.color
+                color: layerData.preview.legend_color, //layerData.color
+                citation: layerData.characteristics !== null ? layerData.characteristics.citation : null,
+                feature_type: layerData.characteristics !== null ? layerData.characteristics.feature_type : null,
             });
             callStack.push(this.addLayer(dxfLayer))
         }

src/js/main.js

@@ -21,7 +21,7 @@ import * as util from './core/utilities';
 import * as browser from './core/browser';
 import * as domUtil from './core/domUtil';
 import { Picking } from './clip/Picking';
-import Modal from './components/ShowModal';
+import { ShowModal } from './components/ShowModal';
 
 import { Selection } from './clip/Selection';
 import _ from "lodash";
@@ -60,7 +60,7 @@ class Application {
         this.navigation = document.getElementsByClassName('navigation')[0];
         // this.addEventListeners();
 
-        this.dialog = new Modal("Help", container, { klass: "fm_about" });
+        this.dialog = new ShowModal("Help", container, { klass: "fm_about" });
 
         // this.dialog = new MobileDialog("Help", container, { klass: "fm_about" });
         this.aboutIcon = document.querySelector('#menu-about-icon');