itowns 2.44.3-next.3 → 2.44.3-next.30

package/lib/Source/WMSSource.js

@@ -1,5 +1,36 @@
 import Source from "./Source.js";
 import URLBuilder from "../Provider/URLBuilder.js";
+import Extent from "../Core/Geographic/Extent.js";
+import * as CRS from "../Core/Geographic/Crs.js";
+const _extent = new Extent('EPSG:4326', [0, 0, 0, 0]);
+
+/**
+ * Proj provides an optional param to define axis order and orientation for a
+ * given projection. 'enu' for instance stands for east, north, up.
+ * Elevation is not needed here. The two first characters are sufficient to map
+ * proj axis to iTowns bbox order formalism.
+ * 'enu' corresponds to 'wsen' because bbox starts by lower value coordinates
+ * and preserves axis ordering, here long/lat.
+ */
+const projAxisToBboxMappings = {
+  en: 'wsen',
+  es: 'wnes',
+  wn: 'eswn',
+  ws: 'enws',
+  ne: 'swne',
+  se: 'nwse',
+  nw: 'senw',
+  sw: 'nesw'
+};
+
+/**
+ * Provides the bbox axis order matching provided proj4 axis
+ * @param {string} projAxis the CRS axis order as defined in proj4
+ * @returns {string} the corresponding bbox axis order to use for WMS 1.3.0
+ */
+function projAxisToWmsBbox(projAxis) {
+  return projAxis && projAxisToBboxMappings[projAxis.slice(0, 2)] || 'wsen';
+}
 
 /**
  * An object defining the source of images to get from a
@@ -95,32 +126,39 @@ class WMSSource extends Source {
     this.version = source.version || '1.3.0';
     this.transparent = source.transparent || false;
     this.bboxDigits = source.bboxDigits;
-    if (!source.axisOrder) {
-      // 4326 (lat/long) axis order depends on the WMS version used
-      if (this.crs == 'EPSG:4326') {
-        // EPSG 4326 x = lat, long = y
-        // version 1.1.0 long/lat while version 1.3.0 mandates xy (so lat,long)
-        this.axisOrder = this.version === '1.1.0' ? 'wsen' : 'swne';
-      } else {
-        // xy,xy order
-        this.axisOrder = 'wsen';
-      }
+    if (source.axisOrder) {
+      this.axisOrder = source.axisOrder;
+    } else if (this.version === '1.3.0') {
+      // If not set, axis order depends on WMS version
+      // Version 1.3.0 depends on CRS axis order as defined in epsg.org database
+      this.axisOrder = projAxisToWmsBbox(CRS.axisOrder(this.crs));
+    } else {
+      // Versions 1.X.X mandate long/lat order, east-north orientation
+      this.axisOrder = 'wsen';
     }
     const crsPropName = this.version === '1.3.0' ? 'CRS' : 'SRS';
-
-    // Add ? at the end of the url if it is not already in the given URL
-    if (!this.url.endsWith('?')) {
-      this.url = `${this.url}?`;
-    }
-    this.url = `${this.url}SERVICE=WMS&REQUEST=GetMap&LAYERS=${this.name}&VERSION=${this.version}&STYLES=${this.style}&FORMAT=${this.format}&TRANSPARENT=${this.transparent}&BBOX=%bbox&${crsPropName}=${this.crs}&WIDTH=${this.width}&HEIGHT=${this.height}`;
+    const urlObj = new URL(this.url);
+    urlObj.searchParams.set('SERVICE', 'WMS');
+    urlObj.searchParams.set('REQUEST', 'GetMap');
+    urlObj.searchParams.set('LAYERS', this.name);
+    urlObj.searchParams.set('VERSION', this.version);
+    urlObj.searchParams.set('STYLES', this.style);
+    urlObj.searchParams.set('FORMAT', this.format);
+    urlObj.searchParams.set('TRANSPARENT', this.transparent);
+    urlObj.searchParams.set('BBOX', '%bbox');
+    urlObj.searchParams.set(crsPropName, this.crs);
+    urlObj.searchParams.set('WIDTH', this.width);
+    urlObj.searchParams.set('HEIGHT', this.height);
     this.vendorSpecific = source.vendorSpecific;
     for (const name in this.vendorSpecific) {
       if (Object.prototype.hasOwnProperty.call(this.vendorSpecific, name)) {
-        this.url = `${this.url}&${name}=${this.vendorSpecific[name]}`;
+        urlObj.searchParams.set(name, this.vendorSpecific[name]);
       }
     }
+    this.url = decodeURIComponent(urlObj.toString());
   }
-  urlFromExtent(extent) {
+  urlFromExtent(extentOrTile) {
+    const extent = extentOrTile.isExtent ? extentOrTile.as(this.crs, _extent) : extentOrTile.toExtent(this.crs, _extent);
     return URLBuilder.bbox(extent, this);
   }
   extentInsideLimit(extent) {

package/lib/Source/WMTSSource.js

@@ -69,18 +69,24 @@ class WMTSSource extends TMSSource {
     }
     super(source);
     this.isWMTSSource = true;
-
-    // Add ? at the end of the url if it is not already in the given URL
-    if (!this.url.endsWith('?')) {
-      this.url = `${this.url}?`;
-    }
-    this.url = `${this.url}` + `LAYER=${source.name}` + `&FORMAT=${this.format}` + '&SERVICE=WMTS' + `&VERSION=${source.version || '1.0.0'}` + '&REQUEST=GetTile' + `&STYLE=${source.style || 'normal'}` + `&TILEMATRIXSET=${source.tileMatrixSet}` + '&TILEMATRIX=%TILEMATRIX&TILEROW=%ROW&TILECOL=%COL';
+    const urlObj = new URL(this.url);
+    urlObj.searchParams.set('LAYER', source.name);
+    urlObj.searchParams.set('FORMAT', this.format);
+    urlObj.searchParams.set('SERVICE', 'WMTS');
+    urlObj.searchParams.set('VERSION', source.version || '1.0.0');
+    urlObj.searchParams.set('REQUEST', 'GetTile');
+    urlObj.searchParams.set('STYLE', source.style || 'normal');
+    urlObj.searchParams.set('TILEMATRIXSET', source.tileMatrixSet);
+    urlObj.searchParams.set('TILEMATRIX', '%TILEMATRIX');
+    urlObj.searchParams.set('TILEROW', '%ROW');
+    urlObj.searchParams.set('TILECOL', '%COL');
     this.vendorSpecific = source.vendorSpecific;
     for (const name in this.vendorSpecific) {
       if (Object.prototype.hasOwnProperty.call(this.vendorSpecific, name)) {
-        this.url = `${this.url}&${name}=${this.vendorSpecific[name]}`;
+        urlObj.searchParams.set(name, this.vendorSpecific[name]);
       }
     }
+    this.url = decodeURIComponent(urlObj.toString());
   }
 }
 export default WMTSSource;

package/lib/Utils/CameraUtils.js

@@ -156,7 +156,7 @@ class CameraRig extends THREE.Object3D {
 
   // set rig's objects transformation from camera's position and target's position
   setFromPositions(view, cameraPosition) {
-    this.setTargetFromCoordinate(view, new Coordinates(view.referenceCrs, targetPosition));
+    this.setTargetFromCoordinate(view, new Coordinates(view.referenceCrs).setFromVector3(targetPosition));
     this.target.rotation.set(0, 0, 0);
     this.updateMatrixWorld(true);
     this.camera.position.copy(cameraPosition);

package/lib/Utils/gui/C3DTilesStyle.js

@@ -1,4 +1,3 @@
-import Style from "../../Core/Style.js";
 import { C3DTILES_LAYER_EVENTS } from "../../Layer/C3DTilesLayer.js";
 import Widget from "./Widget.js";
 const DEFAULT_OPTIONS = {
@@ -187,7 +186,7 @@ class C3DTilesStyle extends Widget {
         }
 
         // set style
-        c3DTilesLayer.style = new Style({
+        c3DTilesLayer.style = {
           fill: {
             color: c3DTileFeature => {
               let result = null;
@@ -204,7 +203,7 @@ class C3DTilesStyle extends Widget {
               return result;
             }
           }
-        });
+        };
       });
     });
     updateSelectedLayer();

package/lib/Utils/placeObjectOnGround.js

@@ -55,7 +55,6 @@ function _updateVector3(layer, method, nodes, vecCRS, vec, offset) {
  *
  * @return {boolean} true if successful, false if we couldn't lookup the elevation at the given coords
  */
-/* istanbul ignore next */
 function placeObjectOnGround(layer, crs, obj) {
   let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   let tileHint = arguments.length > 4 ? arguments[4] : undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itowns",
-  "version": "2.44.3-next.3",
+  "version": "2.44.3-next.30",
   "description": "A JS/WebGL framework for 3D geospatial data visualization",
   "type": "module",
   "main": "lib/Main.js",
@@ -9,7 +9,7 @@
     "./widgets": "./lib/Utils/gui/Main.js"
   },
   "scripts": {
-    "lint": "eslint \"src/**/*.js\" \"test/**/*.js\" \"examples/**/*.js\" \"docs/*.js\"",
+    "lint": "eslint \"src/**/*.{js,ts,tsx}\" \"test/**/*.js\" \"examples/**/*.js\" \"docs/*.js\"",
     "doc": "jsdoc --readme docs/HOMEPAGE.md -c docs/config.json",
     "doclint": "npm run doc -- -t templates/silent",
     "test": "npm run lint -- --max-warnings=0 && npm run build && npm run test-with-coverage && npm run test-functional",
@@ -21,13 +21,13 @@
     "base-test-unit": "cross-env BABEL_DISABLE_CACHE=1 mocha --file test/unit/bootstrap.js --import=./config/babel-register/register.mjs",
     "build": "cross-env NODE_ENV=production webpack",
     "build-dev": "cross-env NODE_ENV=development webpack",
-    "transpile": "cross-env BABEL_DISABLE_CACHE=1 babel src --out-dir lib",
+    "transpile": "cross-env BABEL_DISABLE_CACHE=1 babel src --out-dir lib --extensions .js,.ts",
     "start": "cross-env NODE_ENV=development webpack serve",
     "start-https": "cross-env NODE_ENV=development webpack serve --https",
     "debug": "cross-env noInline=true npm start",
     "prepublishOnly": "npm run build && npm run transpile",
     "prepare": "cross-env NO_UPDATE_NOTIFIER=true node ./config/prepare.mjs && node ./config/replace.config.mjs",
-    "watch": "cross-env BABEL_DISABLE_CACHE=1 babel --watch src --out-dir lib",
+    "watch": "npm run transpile -- --watch",
     "changelog": "conventional-changelog -n ./config/conventionalChangelog/config.cjs -i changelog.md -s",
     "bump": "if [ -z $npm_config_level ]; then grunt bump:minor;  else grunt bump:$npm_config_level; fi && npm run changelog && npm install && git add -A && git commit --amend --no-edit",
     "publish-next": "npm version prerelease --preid next && npm publish --access public --tag=next --provenance",
@@ -57,11 +57,11 @@
   },
   "homepage": "https://itowns.github.io/",
   "dependencies": {
-    "@mapbox/mapbox-gl-style-spec": "^13.28.0",
     "@mapbox/vector-tile": "^2.0.3",
+    "@maplibre/maplibre-gl-style-spec": "^22.0.0",
     "@tmcw/togeojson": "^5.8.1",
     "@tweenjs/tween.js": "^25.0.0",
-    "3d-tiles-renderer": "^0.3.38",
+    "3d-tiles-renderer": "^0.3.39",
     "brotli-compress": "^1.3.3",
     "copc": "^0.0.6",
     "earcut": "^3.0.0",
@@ -79,8 +79,13 @@
     "@babel/core": "^7.25.2",
     "@babel/plugin-transform-runtime": "^7.25.4",
     "@babel/preset-env": "^7.25.4",
+    "@babel/preset-typescript": "^7.24.7",
     "@babel/register": "^7.24.6",
+    "@stylistic/eslint-plugin": "^2.8.0",
+    "@types/proj4": "^2.5.5",
     "@types/three": "^0.168.0",
+    "@typescript-eslint/eslint-plugin": "^8.5.0",
+    "@typescript-eslint/parser": "^8.5.0",
     "@xmldom/xmldom": "^0.9.2",
     "babel-inline-import-loader": "^1.0.1",
     "babel-loader": "^9.2.1",
@@ -101,6 +106,7 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-tsdoc": "^0.3.0",
     "eslint-webpack-plugin": "^4.2.0",
     "github-url-from-git": "^1.5.0",
     "grunt": "^1.6.1",
@@ -115,6 +121,7 @@
     "sinon": "^19.0.2",
     "three": "^0.168.0",
     "typescript": "^5.6.2",
+    "undici": "^7.2.0",
     "webgl-mock": "^0.1.7",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",

package/examples/3dtiles_25d.html

@@ -1,120 +0,0 @@
-<html>
-    <head>
-        <title>Itowns - 3D Tiles on 2.5D map example</title>
-
-        <meta charset="UTF-8">
-        <link rel="stylesheet" type="text/css" href="css/example.css">
-        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
-    </head>
-    <body>
-        <div id="viewerDiv" class="viewer"></div>
-        <script src="../dist/itowns.js"></script>
-        <script src="js/GUI/LoadingScreen.js"></script>
-        <script src="../dist/debug.js"></script>
-        <script src="js/GUI/GuiTools.js"></script>
-        <script src="js/3dTilesHelper.js"></script>
-        <script type="text/javascript">
-            // Define crs projection that we will use (taken from https://epsg.io/3946, Proj4js section)
-            itowns.proj4.defs('EPSG:3946', '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
-
-            // Define geographic extent: CRS, min/max X, min/max Y
-            var extent = new itowns.Extent( 'EPSG:3946',
-                1837816.94334, 1847692.32501,
-                5170036.4587, 5178412.82698);
-
-            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
-            var viewerDiv = document.getElementById('viewerDiv');
-
-            // Instanciate PlanarView*
-            var cameraCoord = new itowns.Coordinates('EPSG:3946', 1841980,
-                5175682, 3000)
-            var view = new itowns.PlanarView(viewerDiv, extent, { placement: {
-                coord: cameraCoord, heading: 30, range: 4000, tilt: 30 } });
-
-            setupLoadingScreen(viewerDiv, view);
-
-            // Add a WMS imagery source
-            var wmsImagerySource = new itowns.WMSSource({
-                extent: extent,
-                name: 'ortho_latest',
-                url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
-                version: '1.3.0',
-                crs: 'EPSG:3946',
-                format: 'image/jpeg',
-            });
-
-            // Add a WMS imagery layer
-            var wmsImageryLayer = new itowns.ColorLayer('wms_imagery', {
-                updateStrategy: {
-                    type: itowns.STRATEGY_DICHOTOMY,
-                    options: {},
-                },
-                source: wmsImagerySource,
-            });
-
-            view.addLayer(wmsImageryLayer);
-
-            // Add a WMS elevation source
-            var wmsElevationSource = new itowns.WMSSource({
-                extent: extent,
-                url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
-                name: 'MNT2018_Altitude_2m',
-                crs: 'EPSG:3946',
-                width: 256,
-                format: 'image/jpeg',
-            });
-
-            // Add a WMS elevation layer
-            var wmsElevationLayer = new itowns.ElevationLayer('wms_elevation', {
-                useColorTextureElevation: true,
-                colorTextureElevationMinZ: 144,
-                colorTextureElevationMaxZ: 622,
-                source: wmsElevationSource,
-            });
-
-            view.addLayer(wmsElevationLayer);
-
-            // Add 3D Tiles layer
-            // This 3D Tiles tileset uses the draco compression that is an
-            // extension of gltf. We need to enable it.
-            itowns.enableDracoLoader('./libs/draco/');
-
-            var $3dTilesLayer = new itowns.C3DTilesLayer(
-                '3d-tiles-layer-building', {
-                    name: 'Lyon-2015-building',
-                    source: new itowns.C3DTilesSource({
-                        url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/' +
-                            '3DTiles/lyon_1_3946_textured_draco/tileset.json',
-                    }),
-                }, view);
-
-            // Lights
-            var dirLight = new itowns.THREE.DirectionalLight(0xffffff, 1);
-            dirLight.position.set(-0.9, 0.3, 1);
-            dirLight.updateMatrixWorld();
-            view.scene.add( dirLight );
-
-            var ambLight = new itowns.THREE.AmbientLight(0xffffff, 0.2);
-            view.scene.add( ambLight );
-
-            // Pick 3D Tiles features when hovering them with the mouse and
-            // display their semantic information in an html div
-            var pickingArgs = {};
-            pickingArgs.htmlDiv = document.getElementById('featureInfo');
-            pickingArgs.view = view;
-            pickingArgs.layer = $3dTilesLayer;
-            itowns.View.prototype.addLayer.call(view, $3dTilesLayer);
-
-            // Request redraw
-            view.notifyChange();
-
-            // Add a debug UI
-            var menu = new GuiTools('menuDiv', view);
-            var d = new debug.Debug(view, menu.gui);
-            debug.createTileDebugUI(menu.gui, view, view.tileLayer, d);
-            debug.create3dTilesDebugUI(menu.gui, view, $3dTilesLayer);
-        </script>
-    </body>
-</html>

package/examples/3dtiles_basic.html

@@ -1,94 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Itowns - 3d-tiles example</title>
-
-        <meta charset="UTF-8">
-        <link rel="stylesheet" type="text/css" href="css/example.css">
-        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
-    </head>
-    <body>
-        <div id="viewerDiv"></div>
-        <div id="description">
-            <p><b>Feature Information:</b></p>
-            <div id="featureInfo"></div>
-        </div>
-        <script src="js/GUI/GuiTools.js"></script>
-        <script src="../dist/itowns.js"></script>
-        <script src="js/GUI/LoadingScreen.js"></script>
-        <script src="../dist/debug.js"></script>
-        <script src="js/3dTilesHelper.js"></script>
-        <script type="text/javascript">
-            /* global itowns,document,GuiTools*/
-            var placement = {
-                coord: new itowns.Coordinates('EPSG:4326', -75.6114, 40.03428, 0),
-                range: 4000,
-                tilt: 22,
-                heading: 180
-            }
-            // iTowns namespace defined here
-            var viewerDiv = document.getElementById('viewerDiv');
-
-            var view = new itowns.GlobeView(viewerDiv, placement);
-            view.camera3D.near = 5;
-            setupLoadingScreen(viewerDiv, view);
-
-            var menuGlobe = new GuiTools('menuDiv', view, 300);
-
-            itowns.Fetcher.json('./layers/JSONLayers/OPENSM.json').then(function _(config) {
-                config.source = new itowns.TMSSource(config.source);
-                var layer = new itowns.ColorLayer('Ortho', config);
-                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
-            });
-
-            // Create a new Layer 3d-tiles For DiscreteLOD
-            // -------------------------------------------
-            var $3dTilesLayerDiscreteLOD = new itowns.C3DTilesLayer('3d-tiles-discrete-lod', {
-                name: 'DiscreteLOD',
-                sseThreshold: 0.05,
-                source: new itowns.C3DTilesSource({
-                    url: 'https://raw.githubusercontent.com/CesiumGS/3d-tiles-samples/master/1.0/TilesetWithDiscreteLOD/tileset.json',
-                }),
-            }, view);
-
-            itowns.View.prototype.addLayer.call(view, $3dTilesLayerDiscreteLOD);
-
-            // Create a new Layer 3d-tiles For Viewer Request Volume
-            // -----------------------------------------------------
-
-            var $3dTilesLayerRequestVolume = new itowns.C3DTilesLayer('3d-tiles-request-volume', {
-                name: 'RequestVolume',
-                source: new itowns.C3DTilesSource({
-                    url: 'https://raw.githubusercontent.com/CesiumGS/3d-tiles-samples/master/1.0/TilesetWithRequestVolume/tileset.json',
-                }),
-                sseThreshold: 1,
-            }, view);
-
-            // add an event for picking the 3D Tiles layer and displaying
-            // information about the picked feature in an html div
-            var pickingArgs = {};
-            pickingArgs.htmlDiv = document.getElementById('featureInfo');
-            pickingArgs.view = view;
-            pickingArgs.layer = $3dTilesLayerRequestVolume;
-            itowns.View.prototype.addLayer.call(view,
-                $3dTilesLayerRequestVolume).then(function _() {
-                    window.addEventListener('mousemove',
-                        (event) => fillHTMLWithPickingInfo(event, pickingArgs),false);
-                });
-
-            // Add the UI Debug
-            var d = new debug.Debug(view, menuGlobe.gui);
-            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
-            debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerDiscreteLOD);
-            debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerRequestVolume);
-            d.zoom = function() {
-                view.camera3D.position.set(1215013.9, -4736315.5, 4081597.5);
-                view.camera3D.quaternion.set(0.9108514448729665, 0.13456816437801225, 0.1107206134840362, 0.3741416847378546);
-                view.notifyChange(view.camera3D);
-            }
-            menuGlobe.gui.add(d, 'zoom').name('Go to point cloud');
-        </script>
-    </body>
-</html>

package/examples/3dtiles_batch_table.html

@@ -1,86 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Itowns - 3d-tiles hierarchy example</title>
-
-        <meta charset="UTF-8">
-        <link rel="stylesheet" type="text/css" href="css/example.css">
-        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
-    </head>
-    <body>
-        <div id="viewerDiv"></div>
-        <div id="description">
-            <p><b>Feature Information:</b></p>
-            <div id="featureInfo"></div>
-        </div>
-        <script src="js/GUI/GuiTools.js"></script>
-        <script src="../dist/itowns.js"></script>
-        <script src="js/GUI/LoadingScreen.js"></script>
-        <script src="../dist/debug.js"></script>
-        <script src="js/3dTilesHelper.js"></script>
-        <script type="text/javascript">
-            // Note: The following positions and camera parameters have been
-            // obtained manually using view.controls.getCameraCoordinate() ;
-            // view.controls.getCameraTargetPosition() ;
-            // view.controls.getCameraOrientation()
-            var placement = {
-                coord: new itowns.Coordinates('EPSG:4326', -75.61349, 40.044259),
-                range: 200,
-                tilt: 10,
-                heading: 145,
-            };
-
-            var viewerDiv = document.getElementById('viewerDiv');
-
-            var view = new itowns.GlobeView(viewerDiv, placement);
-
-            setupLoadingScreen(viewerDiv, view);
-
-            var menuGlobe = new GuiTools('menuDiv', view, 300);
-
-            // Add Open Street Map orthographic layer
-            itowns.Fetcher.json('./layers/JSONLayers/OPENSM.json')
-                .then(function _(config) {
-                    config.source = new itowns.TMSSource(config.source);
-                    var layer = new itowns.ColorLayer('Ortho', config);
-                    view.addLayer(layer)
-                        .then(menuGlobe.addLayerGUI.bind(menuGlobe));
-                });
-
-	        // Create a new 3D tiles layer with batch table hierarchy extension
-            const extensions = new itowns.C3DTExtensions();
-            extensions.registerExtension("3DTILES_batch_table_hierarchy",
-                { [itowns.C3DTilesTypes.batchtable]:
-                    itowns.C3DTBatchTableHierarchyExtension });
-
-            // Create the 3D Tiles layer
-            var $3dTilesLayerBTHierarchy = new itowns.C3DTilesLayer(
-                '3d-tiles-bt-hierarchy', {
-                    name: 'BTHierarchy',
-                    source: new itowns.C3DTilesSource({
-                        url: 'https://raw.githubusercontent.com/AnalyticalGraphicsInc/cesium/master/Apps/SampleData/Cesium3DTiles/Hierarchy/BatchTableHierarchy/tileset.json',
-                    }),
-                    registeredExtensions: extensions,
-                },
-            view);
-
-            // add an event for picking the 3D Tiles layer and displaying
-            // information about the picked feature in an html div
-            var pickingArgs = {};
-            pickingArgs.htmlDiv = document.getElementById('featureInfo');
-            pickingArgs.view = view;
-            pickingArgs.layer = $3dTilesLayerBTHierarchy;
-            itowns.View.prototype.addLayer.call(view, $3dTilesLayerBTHierarchy).then(function _() {
-                window.addEventListener('mousemove',
-                    (event) => fillHTMLWithPickingInfo(event, pickingArgs),false);
-            });
-
-            // Add a debug UI
-            var d = new debug.Debug(view, menuGlobe.gui);
-            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
-            debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerBTHierarchy);
-        </script>
-    </body>
-</html>