itowns 2.44.3-next.2 → 2.44.3-next.21

package/lib/Provider/URLBuilder.js

@@ -1,6 +1,9 @@
-import Extent from "../Core/Geographic/Extent.js";
-const extent = new Extent('EPSG:4326', [0, 0, 0, 0]);
 let subDomainsCount = 0;
+
+/**
+ * @param {string} url
+ * @returns {string}
+ */
 function subDomains(url) {
   const subDomainsPtrn = /\$\{u:([\w-_.|]+)\}/.exec(url);
   if (!subDomainsPtrn) {
@@ -51,8 +54,13 @@ export default {
    * // The resulting url is:
    * // http://server.geo/tms/15/2142/3412.jpg;
    *
-   * @param {Extent} coords - the coordinates
-   * @param {Source} source
+   * @param {Object} coords - tile coordinates
+   * @param {number} coords.row - tile row
+   * @param {number} coords.col - tile column
+   * @param {number} coords.zoom - tile zoom
+   * @param {Object} source
+   * @param {string} source.url
+   * @param {Function} source.tileMatrixCallback
    *
    * @return {string} the formed url
    */
@@ -79,8 +87,12 @@ export default {
    * // The resulting url is:
    * // http://server.geo/wms/BBOX=12,35,14,46&FORMAT=jpg&SERVICE=WMS
    *
-   * @param {Extent} bbox - the bounding box
-   * @param {Object} source
+   * @param {Object} bbox - the bounding box
+   * @param {number} bbox.west
+   * @param {number} bbox.south
+   * @param {number} bbox.east
+   * @param {number} bbox.north
+   * @param {Object} source - the source of data
    * @param {string} source.crs
    * @param {number} source.bboxDigits
    * @param {string} source.url
@@ -93,11 +105,10 @@ export default {
     if (source.bboxDigits !== undefined) {
       precision = source.bboxDigits;
     }
-    bbox.as(source.crs, extent);
-    const w = extent.west.toFixed(precision);
-    const s = extent.south.toFixed(precision);
-    const e = extent.east.toFixed(precision);
-    const n = extent.north.toFixed(precision);
+    const w = bbox.west.toFixed(precision);
+    const s = bbox.south.toFixed(precision);
+    const e = bbox.east.toFixed(precision);
+    const n = bbox.north.toFixed(precision);
     let bboxInUnit = source.axisOrder || 'wsen';
     bboxInUnit = bboxInUnit.replace('w', `${w},`).replace('s', `${s},`).replace('e', `${e},`).replace('n', `${n},`).slice(0, -1);
     return subDomains(source.url.replace('%bbox', bboxInUnit));

package/lib/Renderer/PointsMaterial.js

@@ -258,7 +258,7 @@ class PointsMaterial extends THREE.ShaderMaterial {
   /**
    * @class      PointsMaterial
    * @param      {object}  [options={}]  The options
-   * @param      {number}  [options.size=0]  size point
+   * @param      {number}  [options.size=1] point size
    * @param      {number}  [options.mode=PNTS_MODE.COLOR]  display mode.
    * @param      {number}  [options.shape=PNTS_SHAPE.CIRCLE]  rendered points shape.
    * @param      {THREE.Vector4}  [options.overlayColor=new THREE.Vector4(0, 0, 0, 0)]  overlay color.

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
@@ -118,22 +120,25 @@ class WFSSource extends Source {
     this.typeName = source.typeName;
     this.version = source.version || '2.0.2';
     this.bboxDigits = source.bboxDigits;
-
-    // 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 = `${source.url}SERVICE=WFS&REQUEST=GetFeature&typeName=${this.typeName}&VERSION=${this.version}&SRSNAME=${this.crs}&outputFormat=${this.format}&BBOX=%bbox,${this.crs}`;
     this.zoom = {
       min: 0,
       max: Infinity
     };
+    const urlObj = new URL(source.url);
+    urlObj.searchParams.set('SERVICE', 'WFS');
+    urlObj.searchParams.set('REQUEST', 'GetFeature');
+    urlObj.searchParams.set('typeName', this.typeName);
+    urlObj.searchParams.set('VERSION', this.version);
+    urlObj.searchParams.set('SRSNAME', this.crs);
+    urlObj.searchParams.set('outputFormat', this.format);
+    urlObj.searchParams.set('BBOX', `%bbox,${this.crs}`);
     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());
   }
   handlingError(err) {
     if (err.response && err.response.status == 400) {
@@ -155,7 +160,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
@@ -99,28 +101,36 @@ class WMSSource extends Source {
       // 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';
+        // version 1.X.X long/lat while version 1.3.0 mandates xy (so lat,long)
+        this.axisOrder = this.version === '1.3.0' ? 'swne' : 'wsen';
       } else {
         // xy,xy order
         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/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.2",
+  "version": "2.44.3-next.21",
   "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",
@@ -61,7 +61,7 @@
     "@mapbox/vector-tile": "^2.0.3",
     "@tmcw/togeojson": "^5.8.1",
     "@tweenjs/tween.js": "^25.0.0",
-    "3d-tiles-renderer": "^0.3.37",
+    "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",

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>