itowns 2.44.3-next.1 → 2.44.3-next.11

package/lib/Source/TMSSource.js

@@ -1,8 +1,10 @@
 import Source from "./Source.js";
 import URLBuilder from "../Provider/URLBuilder.js";
-import Extent, { globalExtentTMS } from "../Core/Geographic/Extent.js";
+import Extent from "../Core/Geographic/Extent.js";
+import Tile from "../Core/Tile/Tile.js";
+import { globalExtentTMS } from "../Core/Tile/TileGrid.js";
 import CRS from "../Core/Geographic/Crs.js";
-const extent = new Extent(CRS.tms_4326, 0, 0, 0);
+const _tile = new Tile(CRS.tms_4326, 0, 0, 0);
 
 /**
  * An object defining the source of resources to get from a
@@ -107,8 +109,8 @@ class TMSSource extends Source {
       }
     }
   }
-  urlFromExtent(extent) {
-    return URLBuilder.xyz(extent, this);
+  urlFromExtent(tile) {
+    return URLBuilder.xyz(tile, this);
   }
   onLayerAdded(options) {
     super.onLayerAdded(options);
@@ -118,17 +120,17 @@ class TMSSource extends Source {
     const crs = parent ? parent.extent.crs : options.out.crs;
     if (this.tileMatrixSetLimits && !this.extentSetlimits[crs]) {
       this.extentSetlimits[crs] = {};
-      extent.crs = this.crs;
+      _tile.crs = this.crs;
       for (let i = this.zoom.max; i >= this.zoom.min; i--) {
         const tmsl = this.tileMatrixSetLimits[i];
         const {
           west,
           north
-        } = extent.set(i, tmsl.minTileRow, tmsl.minTileCol).as(crs);
+        } = _tile.set(i, tmsl.minTileRow, tmsl.minTileCol).toExtent(crs);
         const {
           east,
           south
-        } = extent.set(i, tmsl.maxTileRow, tmsl.maxTileCol).as(crs);
+        } = _tile.set(i, tmsl.maxTileRow, tmsl.maxTileCol).toExtent(crs);
         this.extentSetlimits[crs][i] = new Extent(crs, west, east, south, north);
       }
     }

package/lib/Source/VectorTilesSource.js

@@ -135,8 +135,8 @@ class VectorTilesSource extends TMSSource {
       this.urls = Array.from(new Set(TMSUrlList));
     });
   }
-  urlFromExtent(extent, url) {
-    return URLBuilder.xyz(extent, {
+  urlFromExtent(tile, url) {
+    return URLBuilder.xyz(tile, {
       tileMatrixCallback: this.tileMatrixCallback,
       url
     });

package/lib/Source/WFSSource.js

@@ -1,6 +1,8 @@
 import Source from "./Source.js";
 import URLBuilder from "../Provider/URLBuilder.js";
 import CRS from "../Core/Geographic/Crs.js";
+import Extent from "../Core/Geographic/Extent.js";
+const _extent = new Extent('EPSG:4326', [0, 0, 0, 0]);
 
 /**
  * An object defining the source of resources to get from a
@@ -155,7 +157,8 @@ class WFSSource extends Source {
       return [extent.zoom, extent.south, extent.west];
     }
   }
-  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/WMSSource.js

@@ -1,5 +1,7 @@
 import Source from "./Source.js";
 import URLBuilder from "../Provider/URLBuilder.js";
+import Extent from "../Core/Geographic/Extent.js";
+const _extent = new Extent('EPSG:4326', [0, 0, 0, 0]);
 
 /**
  * An object defining the source of images to get from a
@@ -120,7 +122,8 @@ class WMSSource extends Source {
       }
     }
   }
-  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/ThreeExtended/capabilities/WebGL.js

@@ -1,12 +1,4 @@
 class WebGL {
-  static isWebGLAvailable() {
-    try {
-      const canvas = document.createElement('canvas');
-      return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
-    } catch (e) {
-      return false;
-    }
-  }
   static isWebGL2Available() {
     try {
       const canvas = document.createElement('canvas');
@@ -25,9 +17,6 @@ class WebGL {
       return false;
     }
   }
-  static getWebGLErrorMessage() {
-    return this.getErrorMessage(1);
-  }
   static getWebGL2ErrorMessage() {
     return this.getErrorMessage(2);
   }
@@ -60,5 +49,21 @@ class WebGL {
     element.innerHTML = message;
     return element;
   }
+
+  // @deprecated, r168
+
+  static isWebGLAvailable() {
+    console.warn('isWebGLAvailable() has been deprecated and will be removed in r178. Use isWebGL2Available() instead.');
+    try {
+      const canvas = document.createElement('canvas');
+      return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
+    } catch (e) {
+      return false;
+    }
+  }
+  static getWebGLErrorMessage() {
+    console.warn('getWebGLErrorMessage() has been deprecated and will be removed in r178. Use getWebGL2ErrorMessage() instead.');
+    return this.getErrorMessage(1);
+  }
 }
 export default WebGL;

package/lib/ThreeExtended/loaders/GLTFLoader.js

@@ -1564,14 +1564,18 @@ class GLTFParser {
     // expensive work of uploading a texture to the GPU off the main thread.
 
     let isSafari = false;
+    let safariVersion = -1;
     let isFirefox = false;
     let firefoxVersion = -1;
     if (typeof navigator !== 'undefined') {
-      isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent) === true;
-      isFirefox = navigator.userAgent.indexOf('Firefox') > -1;
-      firefoxVersion = isFirefox ? navigator.userAgent.match(/Firefox\/([0-9]+)\./)[1] : -1;
-    }
-    if (typeof createImageBitmap === 'undefined' || isSafari || isFirefox && firefoxVersion < 98) {
+      const userAgent = navigator.userAgent;
+      isSafari = /^((?!chrome|android).)*safari/i.test(userAgent) === true;
+      const safariMatch = userAgent.match(/Version\/(\d+)/);
+      safariVersion = isSafari && safariMatch ? parseInt(safariMatch[1], 10) : -1;
+      isFirefox = userAgent.indexOf('Firefox') > -1;
+      firefoxVersion = isFirefox ? userAgent.match(/Firefox\/([0-9]+)\./)[1] : -1;
+    }
+    if (typeof createImageBitmap === 'undefined' || isSafari && safariVersion < 17 || isFirefox && firefoxVersion < 98) {
       this.textureLoader = new TextureLoader(this.options.manager);
     } else {
       this.textureLoader = new ImageBitmapLoader(this.options.manager);
@@ -2135,7 +2139,7 @@ class GLTFParser {
     }
     mesh.material = material;
   }
-  getMaterialType( /* materialIndex */
+  getMaterialType(/* materialIndex */
   ) {
     return MeshStandardMaterial;
   }

package/lib/ThreeExtended/loaders/KTX2Loader.js

@@ -120,15 +120,22 @@ class KTX2Loader extends Loader {
     loader.setResponseType('arraybuffer');
     loader.setWithCredentials(this.withCredentials);
     loader.load(url, buffer => {
-      // Check for an existing task using this buffer. A transferred buffer cannot be transferred
-      // again from this thread.
-      if (_taskCache.has(buffer)) {
-        const cachedTask = _taskCache.get(buffer);
-        return cachedTask.promise.then(onLoad).catch(onError);
-      }
-      this._createTexture(buffer).then(texture => onLoad ? onLoad(texture) : null).catch(onError);
+      this.parse(buffer, onLoad, onError);
     }, onProgress, onError);
   }
+  parse(buffer, onLoad, onError) {
+    if (this.workerConfig === null) {
+      throw new Error('THREE.KTX2Loader: Missing initialization with `.detectSupport( renderer )`.');
+    }
+
+    // Check for an existing task using this buffer. A transferred buffer cannot be transferred
+    // again from this thread.
+    if (_taskCache.has(buffer)) {
+      const cachedTask = _taskCache.get(buffer);
+      return cachedTask.promise.then(onLoad).catch(onError);
+    }
+    this._createTexture(buffer).then(texture => onLoad ? onLoad(texture) : null).catch(onError);
+  }
   _createTextureFrom(transcodeResult, container) {
     const {
       faces,

package/lib/Utils/CameraUtils.js

@@ -231,7 +231,7 @@ class CameraRig extends THREE.Object3D {
     if (Math.abs(difference) > Math.PI) {
       this.end.target.rotation.z = this.start.target.rotation.z + difference - Math.sign(difference) * 2 * Math.PI;
     }
-    animations.push(new TWEEN.Tween(factor, tweenGroup).to({
+    animations.push(new TWEEN.Tween(factor).to({
       t: 1
     }, time).easing(params.easing).onUpdate(d => {
       // rotate to coord destination in geocentric projection
@@ -248,14 +248,15 @@ class CameraRig extends THREE.Object3D {
 
     // translate to coordinate destination in planar projection
     if (view.referenceCrs != 'EPSG:4978') {
-      animations.push(new TWEEN.Tween(this.position, tweenGroup).to(this.end.position, time).easing(params.easing));
+      animations.push(new TWEEN.Tween(this.position).to(this.end.position, time).easing(params.easing));
     }
 
     // translate to altitude zero
-    animations.push(new TWEEN.Tween(this.seaLevel.position, tweenGroup).to(this.end.seaLevel.position, time).easing(params.easing));
+    animations.push(new TWEEN.Tween(this.seaLevel.position).to(this.end.seaLevel.position, time).easing(params.easing));
 
     // translate camera position
-    animations.push(new TWEEN.Tween(this.camera.position, tweenGroup).to(this.end.camera.position, time).easing(params.easing));
+    animations.push(new TWEEN.Tween(this.camera.position).to(this.end.camera.position, time).easing(params.easing));
+    tweenGroup.add(...animations);
 
     // update animations, transformation and view
     this.animationFrameRequester = () => {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itowns",
-  "version": "2.44.3-next.1",
+  "version": "2.44.3-next.11",
   "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",
@@ -60,30 +60,35 @@
     "@mapbox/mapbox-gl-style-spec": "^13.28.0",
     "@mapbox/vector-tile": "^2.0.3",
     "@tmcw/togeojson": "^5.8.1",
-    "@tweenjs/tween.js": "^23.1.2",
-    "3d-tiles-renderer": "^0.3.37",
+    "@tweenjs/tween.js": "^25.0.0",
+    "3d-tiles-renderer": "^0.3.38",
     "brotli-compress": "^1.3.3",
     "copc": "^0.0.6",
     "earcut": "^3.0.0",
     "js-priority-queue": "^0.1.5",
     "pbf": "^4.0.1",
-    "shpjs": "^6.0.1",
+    "shpjs": "^6.1.0",
     "threads": "^1.7.0"
   },
   "peerDependencies": {
-    "proj4": "^2.11.0",
-    "three": "^0.165.0"
+    "proj4": "^2.12.1",
+    "three": "^0.168.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.8",
-    "@babel/core": "^7.24.9",
-    "@babel/plugin-transform-runtime": "^7.24.7",
-    "@babel/preset-env": "^7.24.8",
+    "@babel/cli": "^7.25.6",
+    "@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",
-    "@types/three": "^0.165.0",
-    "@xmldom/xmldom": "^0.8.10",
+    "@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.1.3",
+    "babel-loader": "^9.2.1",
     "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-minify-dead-code-elimination": "^0.5.2",
     "babel-plugin-minify-replace": "^0.5.0",
@@ -91,34 +96,34 @@
     "babel-plugin-module-resolver": "^5.0.2",
     "c8": "^10.1.2",
     "chalk": "^5.3.0",
-    "chart.js": "^4.4.3",
+    "chart.js": "^4.4.4",
     "compare-func": "^2.0.0",
     "conventional-changelog-cli": "^4.1.0",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.37.1",
+    "core-js": "^3.38.1",
     "cross-env": "^7.0.3",
     "eslint": "^8.55.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-webpack-plugin": "^4.0.1",
+    "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",
     "grunt-bump": "^0.8.0",
     "https-proxy-agent": "^7.0.5",
     "jsdoc": "^4.0.3",
-    "mocha": "^10.2.0",
-    "node-fetch": "^2.7.0",
-    "proj4": "^2.11.0",
-    "puppeteer": "^22.13.1",
+    "mocha": "^10.7.3",
+    "proj4": "^2.12.1",
+    "puppeteer": "^23.3.1",
     "q": "^1.5.1",
-    "replace-in-file": "^7.2.0",
-    "sinon": "^18.0.0",
-    "three": "^0.165.0",
-    "typescript": "^5.5.2",
+    "replace-in-file": "^8.1.0",
+    "sinon": "^19.0.2",
+    "three": "^0.168.0",
+    "typescript": "^5.6.2",
     "webgl-mock": "^0.1.7",
-    "webpack": "^5.93.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "webpack-dev-server": "^5.1.0"
   }
 }

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>