get available layers from the server

index.html

@@ -39,6 +39,13 @@
           <label>endpoint</label>
           <input type="text" class="form-control" id="endpoint" />
         </div>
+
+        <div class="form-group">
+          <label>layers</label>
+          <select class="form-control" id="layersList" size="10"></select>
+          <button id="getLayers" class="btn btn-primary btn-block" type="button">Get Layers</button>
+        </div>
+
         <div class="form-group">
           <label>bounding box</label>
           <input id="boundingBoxInput" type="text" class="form-control mb-2" />

lib/helpers/Layers.js

+define([
+  "dojo/_base/declare",
+  "dojox/xml/DomParser",
+], function (declare, DomParser) {
+
+  return declare(null, {
+
+    constructor: function (document) {
+
+      let parsed = DomParser.parse(document);
+      let parsedLayers = parsed.getElementsByTagName("Layer");
+      let layers = parsedLayers.map(layer => {
+        let name = layer.getElementsByTagName("Title")[0].childNodes[0].nodeValue;
+        let id = layer.getElementsByTagName("Identifier")[0].childNodes[0].nodeValue;
+        let lowerCorner = layer.getElementsByTagName("ows:LowerCorner")[0].childNodes[0].nodeValue;
+        let upperCorner = layer.getElementsByTagName("ows:UpperCorner")[0].childNodes[0].nodeValue;
+        let boundingbox = [...lowerCorner.split(" "), ...upperCorner.split(" ")];
+        boundingbox = boundingbox.map(value => parseFloat(value));
+
+        return {
+          name: name,
+          id: id,
+          boundingbox: boundingbox
+        }
+
+      });
+
+      this._layers = layers;
+
+      this.getLayers = function() {
+        return this._layers;
+      }
+
+      this.getLayerById = function (id) {
+
+      };
+
+      this.getLayerCenter = function (id) {
+        let layer = this._layers.find(l => {
+          if (id == l.id) {
+            return l;
+          }
+        });
+
+        return {
+          lon: (layer.boundingbox[0] + layer.boundingbox[2]) / 2,
+          lat: (layer.boundingbox[1] + layer.boundingbox[3]) / 2
+        };
+
+      };
+
+
+    }
+
+  });
+
+});
\ No newline at end of file

lib/main.js

 require([
-  'dojo/topic',
-  'CesiumAdaptor/CesiumViewer',
-  'helpers/NodeCache',
-  'style/NodeStyler',
-  'style/DefaultStyle',
-  'style/NodeLevelStyle',
-  'gui/Legend',
-  'helpers/Timeout',
-  'state/State',
-  'dojo/domReady!'
-], function (topic, CesiumViewer, NodeCache, NodeStyler, DefaultStyle, NodeLevelStyle, Legend, Timeout, State) {
+  "dojo/topic",
+  "CesiumAdaptor/CesiumViewer",
+  "helpers/NodeCache",
+  "style/NodeStyler",
+  "style/DefaultStyle",
+  "style/NodeLevelStyle",
+  "gui/Legend",
+  "helpers/Timeout",
+  "state/State",
+  "state/Operations",
+  "dojo/domReady!"
+], function (topic, CesiumViewer, NodeCache, NodeStyler, DefaultStyle, NodeLevelStyle, Legend, Timeout, State, Operations) {
 
   Cesium.BingMapsApi.defaultKey = "AmdoJEIiP8BcA__QO9SjBAgv4h73-uiH4lGinmzwyfjK-Fjs8t7GbmfpFjmyj1cl";
   let osm = Cesium.createOpenStreetMapImageryProvider({
-    url: 'https://a.tile.openstreetmap.org/'
+    url: "https://a.tile.openstreetmap.org/"
   });
 
-  CesiumViewer.createViewer('cesiumContainer', {
+  CesiumViewer.createViewer("cesiumContainer", {
     baseLayerPicker: false,
     imageryProvider: osm,
     fullscreenButton: false,
@@ -41,10 +42,11 @@ require([
   legend.setVisible(false);
   legend.render();
 
-  let state = new State();
+  let operations = new Operations();
+  let state = new State(operations);
 
   $("#host").val("81.169.187.7");
-  $("#port").val("9000");
+  $("#port").val("9001");
   $("#endpoint").val("service/v1");
 
   $("#request").click(function (event) {
@@ -53,6 +55,10 @@ require([
 
   });
 
+  $("#layersList").change(function (event) {
+    state.selectLayer(this.value);
+  });
+
   $("#stylesList").change(function () {
 
     let selection = this.value;
@@ -91,9 +97,8 @@ require([
     timeout.trigger();
   });
 
-  $("#setPlace").click(function (event) {
-    state.changeState("ManualRequest");
-    state.makeRequest();
+  $("#getLayers").click(function (event) {
+    state.getLayers();
   });
 
 });
\ No newline at end of file

lib/state/BoundingBoxDefined.js

@@ -11,7 +11,7 @@ define([
     init(target, bb) {
       bb.unregister();
       $("#boundingBoxInput").val(bb.toString());
-      $('#toggleFreezeScene').prop('disabled', false);
+      $("#toggleFreezeScene").prop("disabled", false);
       target.makeRequest();
     },
 
@@ -34,6 +34,16 @@ define([
 
     toggleFreezingScene: function (target) {
       target.changeState("FreezeScene");
+    },
+
+    selectingLayer: function (target, layer) {
+      target.operations.selectLayer(layer);
+      target.changeState("BoundingBoxUndefined");
+    },
+
+    gettingLayers: function (target) {
+      target.operations.getLayers();
+      target.changeState("NoLayerSelected");
     }
 
   });

lib/state/BoundingBoxDefining.js

@@ -25,6 +25,14 @@ define([
 
     toggleFreezingScene: function (target) {
       // no-op
+    },
+
+    selectingLayer: function (target, layer) {
+      // no-op
+    },
+
+    gettingLayers: function (target) {
+      // no-op
     }
 
   });

lib/state/BoundingBoxUndefined.js

 define([
   "dojo/_base/declare",
-], function (declare) {
+  "helpers/NodeCache"
+], function (declare, NodeCache) {
 
   return declare(null, {
 
@@ -10,6 +11,7 @@ define([
 
     init(target, bb) {
       bb.clear();
+      NodeCache.clearAll();
       $("#boundingBoxInput").val("");
       $('#toggleFreezeScene').prop('disabled', true);
     },
@@ -24,6 +26,15 @@ define([
 
     toggleFreezingScene: function (target) {
       // no-op
+    },
+
+    selectingLayer: function (target, layer) {
+      target.operations.selectLayer(layer);
+    },
+
+    gettingLayers: function (target) {
+      target.operations.getLayers();
+      target.changeState("NoLayerSelected");
     }
 
   });

lib/state/FreezeScene.js

@@ -25,6 +25,16 @@ define([
 
     toggleFreezingScene: function (target) {
       target.changeState("BoundingBoxDefined");
+    },
+
+    selectingLayer: function (target, layer) {
+      target.operations.selectLayer(layer);
+      target.changeState("BoundingBoxUndefined");
+    },
+
+    gettingLayers: function (target) {
+      target.operations.getLayers();
+      target.changeState("NoLayerSelected");
     }
 
   });

lib/state/NoLayerSelected.js

+define([
+  "dojo/_base/declare",
+  "helpers/NodeCache"
+], function (declare, NodeCache) {
+
+  return declare(null, {
+
+    constructor: function () {
+
+    },
+
+    init(target, bb) {
+      bb.clear();
+      NodeCache.clearAll();
+      $("#boundingBoxInput").val("");
+      $('#toggleFreezeScene').prop('disabled', true);
+    },
+
+    settingBoundingBox: function (target, bb) {
+      // no-op
+    },
+
+    makingRequest: function (target) {
+      // no-op
+    },
+
+    toggleFreezingScene: function (target) {
+      // no-op
+    },
+
+    selectingLayer: function (target, layer) {
+      target.operations.selectLayer(layer);
+      target.changeState("BoundingBoxUndefined");
+    },
+
+    gettingLayers: function (target) {
+      target.operations.getLayers();
+      target.changeState("NoLayerSelected");
+    }
+
+  });
+
+});
\ No newline at end of file

lib/state/Operations.js

+define([
+  "dojo/_base/declare",
+  "dojo/request",
+  "helpers/UrlBuilder",
+  "CesiumAdaptor/CesiumViewer",
+  "helpers/Layers"
+], function (declare, request, UrlBuilder, CesiumViewer, Layers) {
+
+  return declare(null, {
+
+    constructor: function () {
+      this._layers = null;
+
+    },
+
+    getLayers: function () {
+
+      let url = new UrlBuilder(location.protocol.slice(0, -1), $("#host").val())
+        .port($("#port").val())
+        .path($("#endpoint").val())
+        .param("service", "3DPS")
+        .param("acceptversions", "1.0")
+        .param("request", "GetCapabilities")
+        .build();
+
+      request(url, { handleAs: "text" }).then(document => {
+
+        this._layers = new Layers(document);
+
+        $("#layersList").empty();
+
+        $.each(this._layers.getLayers(), function (i, layer) {
+          $("#layersList").append($("<option>", {
+            value: layer.id,
+            text: layer.name
+          }));
+        });
+
+      });
+
+
+    },
+
+    selectLayer: function (layer) {
+      // let selection = listElement.value;
+      let layerCenter = this._layers.getLayerCenter(layer);
+      let viewer = CesiumViewer.getViewer();
+      let center = Cesium.Cartesian3.fromDegrees(layerCenter.lon, layerCenter.lat, 20000.0);
+      viewer.camera.setView({
+        destination: center
+      });
+    }
+
+  });
+
+});
\ No newline at end of file

lib/state/SceneRendered.js

@@ -31,6 +31,16 @@ define([
 
     toggleFreezingScene: function (target) {
       target.changeState("FreezeScene");
+    },
+
+    selectingLayer: function (target, layer) {
+      target.operations.selectLayer(layer);
+      target.changeState("BoundingBoxUndefined");
+    },
+
+    gettingLayers: function (target) {
+      target.operations.getLayers();
+      target.changeState("NoLayerSelected");
     }
 
   });

lib/state/State.js

@@ -7,9 +7,10 @@ define([
 
   return declare(null, {
 
-    constructor: function () {
+    constructor: function (operations) {
+      this.operations = operations;
       this._stateFactory = new StateFactory();
-      this._current = this._stateFactory.createState("BoundingBoxUndefined");
+      this._current = this._stateFactory.createState("NoLayerSelected");
       this._boundingBox = new BoundingBox();
       topic.subscribe("BoundingBoxCreated", this.changeState.bind(this));
       topic.subscribe("PortrayalResponseHandled", this.changeState.bind(this));
@@ -34,7 +35,15 @@ define([
 
     getBB: function () {
       return this._boundingBox;
-    }
+    },
+
+    selectLayer: function (layer) {
+      this._current.selectingLayer(this, layer);
+    },
+
+    getLayers: function () {
+      this._current.gettingLayers(this);
+    },
 
   });
 

lib/state/StateFactory.js

 define([
   "dojo/_base/declare",
+  "state/NoLayerSelected",
   "state/BoundingBoxUndefined",
   "state/BoundingBoxDefining",
   "state/BoundingBoxDefined",
   "state/WaitingForPortrayal",
   "state/FreezeScene",
   "state/SceneRendered"
-], function (declare, BoundingBoxUndefined, BoundingBoxDefining, BoundingBoxDefined, WaitingForPortrayal, FreezeScene, SceneRendered) {
+], function (declare, NoLayerSelected, BoundingBoxUndefined, BoundingBoxDefining, BoundingBoxDefined, WaitingForPortrayal, FreezeScene, SceneRendered) {
 
   return declare(null, {
 
@@ -16,26 +17,22 @@ define([
 
     createState: function (stateName) {
       switch (stateName) {
+        case "NoLayerSelected":
+          return new NoLayerSelected();
         case "BoundingBoxUndefined":
           return new BoundingBoxUndefined();
-          break;
         case "BoundingBoxDefining":
           return new BoundingBoxDefining();
-          break;
         case "BoundingBoxDefined":
           return new BoundingBoxDefined();
-          break;
         case "WaitingForPortrayal":
           return new WaitingForPortrayal();
-          break;
         case "FreezeScene":
           return new FreezeScene();
-          break;
         case "SceneRendered":
           return new SceneRendered();
-          break;
         default:
-          return new BoundingBoxUndefined();
+          return new NoLayerSelected();
       }
     }
 

lib/state/WaitingForPortrayal.js

@@ -27,6 +27,14 @@ define([
 
     toggleFreezingScene: function (target) {
       // no-op
+    },
+
+    selectingLayer: function (target, layer) {
+      // no-op
+    },
+
+    gettingLayers: function (target) {
+      // no-op
     }
 
   });