itowns 2.44.3-next.8 → 2.45.0

package/README.md

@@ -1,131 +1,5 @@
-![iTowns](https://raw.githubusercontent.com/iTowns/itowns.github.io/master/images/itowns_logo_300x134.png)
-# iTowns
-
-[![Coverage Status](https://coveralls.io/repos/github/iTowns/itowns/badge.svg?branch=master)](https://coveralls.io/github/iTowns/itowns?branch=master)
-[![example branch parameter](https://github.com/iTowns/itowns/actions/workflows/integration.yml/badge.svg?query=branch%3Amaster)](https://github.com/iTowns/itowns/actions/workflows/integration.yml?query=branch%3Amaster)
-[![DeepScan grade](https://deepscan.io/api/teams/2856/projects/10991/branches/159107/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=2856&pid=10991&bid=159107)
-
 ## What is it?
 
-iTowns is a [Three.js](https://threejs.org/)-based framework written in
-Javascript/WebGL for visualizing 3D geospatial data.
-
-It can connect to WMS/WMTS/TMS servers including elevation data and load many
-different data formats (3dTiles, GeoJSON, Vector Tiles, GPX and much more). A
-complete list of features and supported data formats is [available on the
-wiki](https://github.com/iTowns/itowns/wiki/Supported-Features).
-
-It officially targets the last two major versions of both Firefox, Safari and
-Chromium-based browsers (Chrome, Edge, ...) at the date of each release. Older
-browsers supporting WebGL 2.0 may work but we do not offer support.
-
-![iTowns screenshot](https://raw.githubusercontent.com/iTowns/itowns.github.io/master/images/itownsReleaseXS.jpg)
-
-## Documentation and examples
-
-The official documentation is [available
-here](http://www.itowns-project.org/itowns/docs/). It contains tutorials to help
-you start using iTowns, and an API reference. You can find more informations on
-its contribution [here](docs/README.md).
-
-Official examples can be [viewed
-here](http://www.itowns-project.org/itowns/examples/). Some examples available:
-
-* [Globe with WFS data](http://www.itowns-project.org/itowns/examples/#source_stream_wfs_3d)
-* [Plane mode with Vector Tiles](http://www.itowns-project.org/itowns/examples/#vector_tile_raster_2d)
-* [3D effect using scene postprocessing](http://www.itowns-project.org/itowns/examples/#effects_stereo)
-* [Globe with split rendering](http://www.itowns-project.org/itowns/examples/#effects_split)
-
-[![iTowns examples](http://www.itowns-project.org/images/montage.jpg)](http://www.itowns-project.org/itowns/examples/)
-
-## How to run it locally?
-
-Clone the repo and then run:
-
-```
-npm install
-npm start
-```
-
-Try out the examples at http://localhost:8080/examples
-
-## How to use it in your project?
-
-You can use it through npm (the preferred way) or download a bundle from our
-github release page.
-
-### With npm
-
-In your project:
-
-```bash
-npm install --save itowns
-```
-
-This package contains the ES5-compatible sources of iTowns, up to date with the latest release.
-
-If you're using a module bundler (like wepback), you can directly write
-`require('itowns')` in your code.
-
-Alternatively, we provide a bundle you can directly include in your html files
-that exposes `itowns` in `window`:
-
-```html
-<script src="node_modules/itowns/dist/itowns.js"></script>
-```
-
-**/!\ Please note that this bundle also contains the dependencies**.
-
-### From a release bundle
-
-See our [release page](https://github.com/iTowns/itowns/releases). Note that
-there isn't a lot of support for older version of iTowns, we highly recommend to
-use the last release everytime.
-
-### Try modifications before they are released
-
-If you want to try some features or bug fixes that are planned for the next release, we provide
-a @next version of itowns. You can install it as such :
-
-```bash
-npm install --save itowns@next
-```
-
-To switch back to the version to date with the latest release, you need to run :
-
-```bash
-npm install --save itowns@latest
-```
-
-## Contributing
-
-If you are interested in contributing to iTowns, please read the [CONTRIBUTING
-guide](CONTRIBUTING.md) and the [CODING guide](CODING.md).
-
-iTowns has been redesigned from this [early version](https://github.com/iTowns/itowns-legacy).
-
-## Licence
-
-iTowns is dual-licenced under Cecill-B V1.0 and MIT.
-Incorporated libraries are published under their original licences.
-
-See [LICENSE.md](LICENSE.md) for more information.
-
-## Maintainers
-
-iTowns is an original work from French IGN, [MATIS research
-laboratory](http://recherche.ign.fr/labos/matis/). It has been funded through
-various research programs involving the French National Research Agency, Cap
-Digital, UPMC, Mines ParisTec, CNRS, LCPC and maintained by several organizations
-along the years (IGN, Oslandia, AtolCD, CIRIL Group). It has also received contributions from people [listed
-here](CONTRIBUTORS.md).
-
-iTowns is currently maintained by [IGN](http://www.ign.fr) and
-[CIRIL Group](https://www.cirilgroup.com/en/). 
-
-Contributions in any forms and new contributors and maintainers are welcome. Get in touch with us if you are interested :)
-
-The governance of the project is open and explicited [here](https://github.com/iTowns/itowns-governance).
-
-[![IGN](./img/logo_ign.png)](https://www.ign.fr)
-[![CIRIL Group](./img/CIRIL_Group_logo.png)](https://www.cirilgroup.com/en/)
+This itowns module acts as a central point of access, allowing users to leverage the complete range of features offered by the @itowns submodules without needing to import or manage them individually.
+Refer to [README main](https://raw.githubusercontent.com/iTowns/itowns.github.io/master/README.md) for more information.
+The official documentation is [available here](http://www.itowns-project.org/itowns/docs/)

package/examples/3dtiles_loader.html

@@ -11,7 +11,15 @@
         <style type="text/css">
             #description {
                 z-index: 2;
-                right: 10px;
+                left: 10px;
+            }
+
+            #featureInfoText {
+                font-size: small;
+            }
+
+            #description .marg {
+                margin: 10px;
             }
         </style>
 
@@ -21,12 +29,17 @@
         <div id="viewerDiv"></div>
         <div id="description">Specify the URL of a tileset to load:
             <input type="text" id="url" />
-            <button onclick="setURL(document.getElementById('url').value)">
-                Load
-            </button>
+            <button onclick="readURL()">Load</button>
+            <div class="marg">
+                <button onClick="loadLyon()">Load Lyon 1 (Mesh)</button>
+                <button onClick="loadSete()">Load Sete (Point Cloud)</button>
+                <button onClick="loadLille()">Load Lille (Mesh)</button>
+                <div id="share"></div>
+            </div>
             <hr />
+            <p id="featureInfoText" class="marg"><em>Display feature information by clicking on it</em></p>
             <p><b>Feature Information:</b></p>
-            <div id="featureInfo"></div>
+            <div id="featureInfo" class="marg"></div>
         </div>
 
         <script src="js/GUI/GuiTools.js"></script>
@@ -37,14 +50,19 @@
         <script type="importmap">
             {
                 "imports": {
-                    "three": "https://cdn.jsdelivr.net/npm/three@0.165.0/build/three.module.js",
-                    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.165.0/examples/jsm/"
+                    "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
+                    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
                 }
             }
-		</script>
+        </script>
 
         <script type="module">
-            import { AmbientLight } from 'three';
+            import {
+                AmbientLight,
+                PMREMGenerator,
+            } from 'three';
+            import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
+            import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
             import {
                 zoomToLayer,
                 fillHTMLWithPickingInfo,
@@ -52,28 +70,17 @@
 
             const {
                 TMSSource, WMTSSource, OGC3DTilesSource,
-                ColorLayer, ElevationLayer, OGC3DTilesLayer,
+                ColorLayer, ElevationLayer, OGC3DTilesLayer, PNTS_SIZE_MODE,
                 GlobeView, Coordinates, Fetcher,
             } = itowns;
 
-            const uri = new URL(location);
-            const state = {
-                // URL to tileset JSON
-                tileset: uri.searchParams.get('tileset'),
-                // Cesium ION /
-                assetId: uri.searchParams.get('assetId'),
-            };
-
-            function setURL(url) {
-                if (!url) return;
+            window.layer = null; // 3D Tiles layer
 
-                uri.searchParams.set('tileset', url);
-                history.pushState(null, '', `?${uri.searchParams.toString()}`);
+            const uri = new URL(location);
 
-                location.reload();
-            }
+            window.gui = new dat.GUI();
 
-            // ---- CREATE A GlobeView FOR SUPPORTING DATA VISUALIZATION ----
+            // ---- Create a GlobeView ----
 
             // Define camera initial position
             const placement = {
@@ -85,45 +92,96 @@
             const viewerDiv = document.getElementById('viewerDiv');
 
             // Create a GlobeView
-            const view = new GlobeView(viewerDiv, placement, {});
+            const view = new GlobeView(viewerDiv, placement, {
+                controls: {
+                    minDistance: 100,
+                }
+            });
+
+            // Enable various compression support for 3D Tiles tileset:
+            // - `KHR_draco_mesh_compression` mesh compression extension
+            // - `KHR_texture_basisu` texture compression extension
+            // - `EXT_meshopt_compression` data compression extension
+            itowns.enableDracoLoader('./libs/draco/');
+            itowns.enableKtx2Loader('./lib/basis/', view.renderer);
+            itowns.enableMeshoptDecoder(MeshoptDecoder);
 
             // Add ambient light to globally illuminates all objects
-            const light = new AmbientLight(0x404040, 15);
+            const light = new AmbientLight(0x404040, 40);
             view.scene.add(light);
 
+            // Set the environment map for all physical materials in the scene.
+            // Otherwise, mesh with only diffuse colors will appear black.
+            const environment = new RoomEnvironment();
+            const pmremGenerator = new PMREMGenerator(view.renderer);
+            view.scene.environment = pmremGenerator.fromScene(environment).texture;
+            pmremGenerator.dispose();
+
             // Setup loading screen
             setupLoadingScreen(viewerDiv, view);
 
-            // Setup debug menu
-            const menuGlobe = new GuiTools('menuDiv', view, 300);
-            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer);
-
-
-            // ---- ADD A BASEMAP ----
+            // ---- Add a basemap ----
 
             // Add one imagery layer to the scene. This layer's properties are
             // defined in a json file, but it cou   ld be defined as a plain js
             // object. See `Layer` documentation for more info.
             Fetcher.json('./layers/JSONLayers/OPENSM.json').then((config) => {
-                const layer = new ColorLayer('Ortho', {
+                const colorLayer = new ColorLayer('Ortho', {
                     ...config,
                     source: new TMSSource(config.source),
                 });
-                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
+                view.addLayer(colorLayer);
             });
 
-            // ---- ADD 3D TILES TILESET ----
+            // ---- Add 3D terrain ----
 
-            // Enable various compression support for 3D Tiles tileset:
-            // - `KHR_draco_mesh_compression` mesh compression extension
-            // - `KHR_texture_basisu` texture compresion extension
-            itowns.enableDracoLoader('./libs/draco/');
-            itowns.enableKtx2Loader('./lib/basis/', view.renderer);
+            // Add two elevation layers: world terrain and a more precise terrain for france
+            // These will deform iTowns globe geometry to represent terrain elevation.
+            function addElevationLayerFromConfig(config) {
+                config.source = new itowns.WMTSSource(config.source);
+                var elevationLayer = new itowns.ElevationLayer(config.id, config);
+                view.addLayer(elevationLayer);
+            }
+            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
+            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
+
+            // ---------- 3D Tiles loading
+
+            function readURL() {
+                const url = document.getElementById('url').value;
+
+                if (url) {
+                    setUrl(url);
+                }
+            }
+
+            function setUrl(url) {
+                if (!url) return;
+
+                const input_url = document.getElementById('url');
+                if (!input_url) return;
+
+                uri.searchParams.set('copc', url);
+                history.replaceState(null, null, `?${uri.searchParams.toString()}`);
+
+                input_url.value = url;
+                load(url);
+            }
+
+
+            function load(url) {
+                const source = new OGC3DTilesSource({ url });
 
-            if (state.tileset) {
-                const source = new OGC3DTilesSource({ url: state.tileset });
-                const layer = new OGC3DTilesLayer('3DTiles', {
+                if (window.layer) {
+                    gui.removeFolder('Layer 3DTiles');
+                    view.removeLayer('3DTiles');
+                    view.notifyChange();
+                    window.layer.delete();
+                }
+
+                window.layer = new OGC3DTilesLayer('3DTiles', {
                     source,
+                    pntsSizeMode: PNTS_SIZE_MODE.ATTENUATED,
                 });
 
                 // Add an event for picking the 3D Tiles layer and displaying
@@ -131,20 +189,37 @@
                 const pickingArgs = {
                     htmlDiv: document.getElementById('featureInfo'),
                     view,
-                    layer,
+                    layer: window.layer,
                 };
 
                 // Add the layer to our view
-                view.addLayer(layer).then((layer) => {
+                view.addLayer(window.layer).then((layer) => {
                     zoomToLayer(view, layer);
                     window.addEventListener('click',
                         (event) => fillHTMLWithPickingInfo(event, pickingArgs), false);
                 });
 
-                debug.createOGC3DTilesDebugUI(menuGlobe.gui, view, layer);
+                window.layer.whenReady
+                    .then(() => debug.createOGC3DTilesDebugUI(gui, view, window.layer));
+            }
+
+            function loadLyon() {
+                setUrl("https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/refs/heads/master/3DTiles/lyon1-4978/tileset.json");
+            }
+
+            function loadSete() {
+                setUrl("https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/pointclouds/pnts-sete-2021-0756_6256/tileset.json");
             }
 
-            window.setURL = setURL;
+            function loadLille() {
+                setUrl("https://webimaging.lillemetropole.fr/externe/maillage/2020_mel_5cm/tileset.json");
+            }
+
+            window.readURL = readURL;
+            window.loadLyon = loadLyon;
+            window.loadSete = loadSete;
+            window.loadLille = loadLille;
+
         </script>
     </body>
 </html>

package/examples/config.json

@@ -14,16 +14,8 @@
         "geoid_geoidLayer": "Display geoid heights"
     },
 
-    "3d Tiles": {
-        "3dtiles_basic": "on 3D map",
-        "3dtiles_25d": "On 2.5D map",
-        "3dtiles_batch_table": "Batch table Hierarchy extension",
-        "3dtiles_ion": "From Cesium ion",
-        "3dtiles_pointcloud": "Pointcloud classification"
-    },
-
-    "3D Tiles (new)": {
-        "3dtiles_loader": "3D Tiles tileset loader"
+    "3D Tiles": {
+        "3dtiles_loader": "3D Tiles loader"
     },
 
     "Pointcloud": {
@@ -39,6 +31,7 @@
     "Vector tiles": {
         "vector_tile_raster_3d": "Raster on 3D map",
         "vector_tile_raster_2d": "Raster on 2D map",
+        "vector_tile_mapbox_raster": "Mapbox Vector Tiles to raster",
         "vector_tile_3d_mesh": "Vector tile to 3d objects",
         "vector_tile_3d_mesh_mapbox": "Mapbox Vector tile to 3d objects",
         "vector_tile_dragndrop": "Drag and drop a style"

package/examples/copc_simple_loader.html

@@ -19,7 +19,7 @@
     </head>
     <body>
         <div id="description">Specify the URL of a COPC file to load:
-            <input type="text" id="url" />
+            <input type="text" id="copc_url" />
             <button onclick="readURL()">Load</button>
             <div>
                 <button onClick="loadAutzen()">Load Autzen Stadium (80mb)</button>
@@ -71,7 +71,7 @@
 
 
             function readURL() {
-                const url = document.getElementById('url').value;
+                const url = document.getElementById('copc_url').value;
 
                 if (url) {
                     setUrl(url);
@@ -81,7 +81,7 @@
             function setUrl(url) {
                 if (!url) return;
 
-                const input_url = document.getElementById('url');
+                const input_url = document.getElementById('copc_url');
                 if (!input_url) return;
 
                 uri.searchParams.set('copc', url);
@@ -93,6 +93,13 @@
 
 
             function load(url) {
+                const options = {};
+                const urlParams = uri.searchParams
+                urlParams.keys().forEach(key => {
+                    if (key !== 'copc') {
+                        options[key] = parseInt(urlParams.get(key), 10);
+                    }
+                });
                 const source = new itowns.CopcSource({ url });
 
                 if (layer) {
@@ -102,12 +109,15 @@
                     layer.delete();
                 }
 
-                layer = new itowns.CopcLayer('COPC', {
+                const config = {
                     source,
                     crs: view.referenceCrs,
                     sseThreshold: 2,
                     pointBudget: 3000000,
-                });
+                    ...options,
+                };
+
+                layer = new itowns.CopcLayer('COPC', config);
                 view.addLayer(layer).then(onLayerReady);
                 layer.whenReady
                     .then(() => debug.PointCloudDebug.initTools(view, layer, gui));

package/examples/effects_stereo.html

@@ -23,8 +23,8 @@
         <script type="importmap">
             {
                 "imports": {
-                    "three": "https://cdn.jsdelivr.net/npm/three@0.159.0/build/three.module.js",
-                    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.159.0/examples/jsm/"
+                    "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
+                    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
                 }
             }
         </script>

package/examples/entwine_3d_loader.html

@@ -87,8 +87,10 @@
                 eptSource = new itowns.EntwinePointTileSource({ url });
 
                 if (eptLayer) {
-                    view.removeLayer('ept');
+                    debugGui.removeFolder(eptLayer.debugUI);
+                    view.removeLayer('Entwine Point Tile');
                     view.notifyChange();
+                    eptLayer.delete();
                 }
 
                 eptLayer = new itowns.EntwinePointTileLayer('Entwine Point Tile', {

package/examples/entwine_simple_loader.html

@@ -88,7 +88,7 @@
                 eptSource = new itowns.EntwinePointTileSource({ url });
 
                 if (eptLayer) {
-                    debugGUI.removeFolder(eptLayer.debugUI);
+                    debugGui.removeFolder(eptLayer.debugUI);
                     view.removeLayer('Entwine Point Tile');
                     view.notifyChange();
                     eptLayer.delete();

package/examples/images/itowns_logo.svg

@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="2123.8423"
+   height="504"
+   viewBox="0 0 2123.8423 504"
+   version="1.1"
+   id="svg91"
+   sodipodi:docname="logo.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   inkscape:label="layer_i"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview93"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="0.21100549"
+     inkscape:cx="1390.9591"
+     inkscape:cy="1049.7357"
+     inkscape:window-width="1850"
+     inkscape:window-height="1016"
+     inkscape:window-x="70"
+     inkscape:window-y="1107"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg91"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <sodipodi:guide
+       position="303,12"
+       orientation="0,-1"
+       id="guide149742" />
+    <sodipodi:guide
+       position="922.7708,353.293"
+       orientation="0,-1"
+       id="guide161704" />
+    <sodipodi:guide
+       position="1076.0872,118.0449"
+       orientation="0,-1"
+       id="guide161710" />
+    <sodipodi:guide
+       position="1172.7675,246.6387"
+       orientation="0,-1"
+       id="guide161712" />
+  </sodipodi:namedview>
+  <defs
+     id="defs85">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient124706">
+      <stop
+         style="stop-color:#7ea8c5;stop-opacity:1"
+         offset="0"
+         id="stop124702" />
+      <stop
+         style="stop-color:#404e73;stop-opacity:1"
+         offset="1"
+         id="stop124704" />
+    </linearGradient>
+    <style
+       id="style83">
+      .cls-1 {
+        opacity: 0.4;
+      }
+    </style>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient124706"
+       id="linearGradient124708"
+       x1="1129.2401"
+       y1="606.47083"
+       x2="1401.899"
+       y2="774.6546"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <g
+     id="g149219"
+     inkscape:label="Globe"
+     transform="translate(-523,-390)">
+    <ellipse
+       style="display:inline;fill:#c8d3da;fill-opacity:1;fill-rule:evenodd"
+       id="path1259"
+       cx="1227.5"
+       cy="692"
+       rx="202.5"
+       ry="202"
+       inkscape:label="Circle" />
+    <g
+       id="g124715"
+       style="display:inline;stroke:#355c77;stroke-opacity:1"
+       inkscape:label="Arrows">
+      <g
+         id="g124711"
+         style="stroke:#355c77;stroke-opacity:1"
+         inkscape:label="g124711">
+        <path
+           style="fill:url(#linearGradient124708);fill-opacity:1;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 1330,681 61,-12 c 3.02,7.842 4.076,15.87 6.019,24 0.623,2.608 1.725,6.621 4.931,7.079 3.39,0.484 5.145,-4.756 6.294,-7.079 4.368,-8.837 7.681,-18.455 10.126,-28 6.613,-25.808 -5.85,-43.846 -20.997,-64 -5.472,-7.282 -12.303,-17.758 -20.354,-22.338 -4.273,-2.4306 -5.13,2.0092 -4.714,5.3388 0.586,4.6919 7.851,20.6632 3.171,23.9322 -2.895,2.022 -10.95,0.067 -14.476,0.067 -10.657,-10e-4 -21.347,-0.246 -32,0.015 -4.325,0.106 -9.726,2.094 -13.892,0.382 -5.397,-2.219 -7.556,-13.418 -9.687,-18.397 -7.301,-17.0598 -16.733,-32.6765 -25.421,-49 5.562,-1.763 24.398,-1.5626 26.824,-7.2245 2.682,-6.2591 -15.778,-11.6544 -19.824,-13.3511 -16.725,-7.013 -34.232,-12.7414 -52,-16.4213 -6.905,-1.4301 -15.602,-3.9163 -21.535,1.4267 -9.584,8.6288 -15.545,24.2163 -21.218,35.5702 -1.756,3.5154 -6.626,10.6646 -1.928,13.821 8.653,5.8139 20.931,-6.3429 29.576,-1.7786 4.537,2.3953 6.205,9.4776 7.761,13.9576 4.228,12.1783 8.181,24.53 11.46,37 1.02,3.88 4.614,11.885 2.683,15.697 -2.377,4.69 -15.124,5.832 -19.799,7.163 -16.494,4.695 -32.732,10.384 -49,15.807 -4.374,1.458 -13.407,6.621 -17.891,4.977 -7.289,-2.674 -4.547,-35.284 -17.019,-27.036 -5.418,3.583 -8.841,11.197 -12.514,16.392 -10.2548,14.501 -20.0164,29.506 -28.7149,45 -3.9849,7.098 -10.3602,15.972 -4.2083,23.815 3.6295,4.627 10.3443,6.941 15.3472,9.761 13.8979,7.833 28.591,14.399 43,21.205 4.886,2.308 14.588,9.972 19.566,4.897 7.959,-8.114 -7.807,-22.054 -1.784,-30.399 3.34,-4.629 13.088,-4.493 18.218,-5.476 17.25,-3.306 34.664,-5.608 52,-8.393 4.543,-0.729 16.572,-4.766 20.411,-1.637 3.876,3.159 4.049,14.529 4.989,19.227 3.19,15.949 5.824,31.89 8.024,48 0.723,5.296 3.474,14.919 0.548,19.775 -5.411,8.981 -25.656,0.601 -29.171,11.33 -1.841,5.617 6.874,11.422 10.109,14.895 8.451,9.072 17.016,17.641 26.09,26.09 4.394,4.091 8.431,9.791 15,9.823 7.581,0.036 13.971,-7.022 19,-11.928 12.818,-12.503 24.842,-25.974 35.996,-39.985 3.543,-4.45 12.487,-12.805 12.176,-18.891 -0.593,-11.601 -26.368,5.893 -29.399,-4.168 -2.107,-6.995 0.227,-18.497 0.227,-25.941 0,-21.005 0.853,-42.26 -3,-63"
+           id="path1080"
+           sodipodi:nodetypes="ccsscccssscscccscsccsscsccscscsscsscccscscccscccscsc"
+           inkscape:label="path1080" />
+      </g>
+    </g>
+  </g>
+  <path
+     id="path952"
+     style="display:inline;fill:#404e73;fill-opacity:1"
+     inkscape:label="T wns"
+     d="M 177.03906,0 176.91602,93.58398 303,94 V 492 H 409.99414 L 410.5,94.5 538.5,93.5 539.0195,0 Z M 2011.0176,134.28125 c -13.0632,0.12998 -25.5667,1.33054 -36.8633,3.63281 -29.4349,5.99891 -57.9681,21.05292 -73.8867,38.98047 -12.3465,13.90461 -21.0569,31.08151 -24.6992,48.71485 -2.306,11.16435 -2.1202,33.20565 0.3613,42.9082 3.8861,15.19442 12.6728,29.33206 26.4336,42.5332 17.1315,16.43468 37.8519,27.767 72.9277,39.88477 26.8743,9.28436 38.5632,16.26831 43.2481,25.84375 2.4031,4.91179 2.6657,6.40755 2.2519,12.78711 -0.5206,8.02613 -2.1474,11.92677 -6.998,16.77734 -7.1349,7.1349 -19.3393,10.38075 -38.793,10.31445 -24.4588,-0.0833 -56.8353,-8.26242 -81.3359,-20.54687 -4.31,-2.161 -8.34,-3.76166 -8.9551,-3.55664 -1.2952,0.43175 -19.849,73.70135 -19.0078,75.0625 0.3086,0.4992 3.8636,2.41232 7.9004,4.25195 21.9315,9.99451 50.5827,16.99204 79.4902,19.41406 12.4848,1.04603 43.0849,0.48063 54.9082,-1.01367 38.4999,-4.86586 68.3037,-18.04186 88.5781,-39.16015 14.0553,-14.64031 22.6133,-31.44619 26.0528,-51.16797 2.1158,-12.13186 1.3753,-33.68965 -1.5606,-45.46875 -5.6685,-22.74204 -19.5206,-41.66585 -41.0273,-56.04688 -15.1873,-10.15539 -26.2884,-15.30705 -58.543,-27.16992 -36.0413,-13.25557 -46.6692,-22.13625 -45.248,-37.80859 0.83,-9.1535 5.475,-15.93482 13.8339,-20.19922 17.7737,-9.06744 56.359,-5.47043 87.0977,8.11914 11.915,5.26763 13.4655,5.6248 14.1797,3.27148 2.9956,-9.87087 17.6841,-68.85641 17.4472,-70.06445 -0.4198,-2.14067 -16.4538,-8.45661 -30.8222,-12.14063 -21.8739,-5.60839 -45.1988,-8.36897 -66.9707,-8.15234 z m -328.5235,8.21094 c -20.9646,0 -40.1175,4.76669 -57.4609,14.30078 -17.3434,9.33124 -33.7343,23.93681 -49.1719,43.81641 V 150.70703 H 1473.5156 V 491.5 h 102.3457 V 323.8418 c 0,-31.03651 6.0974,-55.27731 18.2949,-72.72266 12.1976,-17.64821 28.9707,-26.47266 50.3165,-26.47266 8.767,0 16.5802,2.02888 23.4414,6.08594 6.8612,3.85422 12.2926,9.3318 16.2949,16.43164 3.0494,5.27419 5.1455,13.48958 6.289,24.64649 1.3341,11.15691 2.002,31.44178 2.002,60.85547 V 457.72461 491.5 h 102.916 V 283.98047 c 0,-46.04763 -9.6238,-81.13979 -28.873,-105.2793 -19.0587,-24.1395 -47.0751,-36.20898 -84.0489,-36.20898 z M 922.7715,150.70703 1007.1504,492 h 111.8398 L 1172.7676,257.36133 1226.8262,492 h 111.8418 l 84.3808,-341.29297 h -99.541 l -54.0605,232.81055 -53.7735,-232.81055 h -85.5273 l -54.0586,235.24805 -53.7774,-235.24805 z" />
+  <path
+     id="path41630"
+     style="display:inline;fill:#7ea8c5;fill-opacity:1"
+     d="M 56.2207,0 C 25.17087,2e-5 2e-5,25.17087 0,56.2207 c 1e-5,31.04983 25.17087,56.22069 56.2207,56.22071 31.04984,-1e-5 56.2207,-25.17087 56.22071,-56.22071 C 112.44139,25.17087 87.27053,10e-6 56.2207,0 Z M 4.20703,151.33203 C 3.98701,264.88792 3.91235,378.44395 3.82849,492 c 34.67057,0 69.34114,0 104.01172,0 -0.29968,-113.55583 -0.46282,-227.11189 -0.63318,-340.66797 -34.33333,0 -68.66667,0 -103,0 z"
+     inkscape:label="i"
+     sodipodi:nodetypes="sssssccccc" />
+</svg>

package/examples/js/plugins/COGParser.js

@@ -235,7 +235,7 @@ const COGParser = (function _() {
          */
         parse: async function _(data, options) {
             const source = options.in;
-            const tileExtent = options.extent.as(source.crs);
+            const tileExtent = options.extent.isExtent ? options.extent.as(source.crs) : options.extent.toExtent(source.crs);
 
             const level = selectLevel(source, tileExtent, source.tileWidth, source.tileHeight);
             const viewport = makeWindowFromExtent(source, tileExtent, level.resolution);