itowns 2.44.3-next.3 → 2.44.3-next.31

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>
@@ -41,10 +54,11 @@
                     "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.165.0/examples/jsm/"
                 }
             }
-		</script>
+        </script>
 
         <script type="module">
             import { AmbientLight } from 'three';
+            import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
             import {
                 zoomToLayer,
                 fillHTMLWithPickingInfo,
@@ -52,28 +66,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 +88,89 @@
             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);
 
             // 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);
+            }
 
-            if (state.tileset) {
-                const source = new OGC3DTilesSource({ url: state.tileset });
-                const layer = new OGC3DTilesLayer('3DTiles', {
+
+            function load(url) {
+                const source = new OGC3DTilesSource({ url });
+
+                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 +178,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");
             }
 
-            window.setURL = setURL;
+            function loadSete() {
+                setUrl("https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/pointclouds/pnts-sete-2021-0756_6256/tileset.json");
+            }
+
+            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/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);

package/examples/jsm/OGC3DTilesHelper.js

@@ -47,7 +47,7 @@ function zoomToSphere(view, tile, sphere) {
     const distance = radius * Math.tan(fov * 2);
 
     return {
-        coord: new Coordinates('EPSG:4978', center),
+        coord: new Coordinates('EPSG:4978').setFromVector3(center),
         range: distance + radius,
     };
 }

package/examples/layers/JSONLayers/GeoidMNT.json

@@ -4,7 +4,9 @@
     "updateStrategy": {
         "type": 0
     },
-    "zmin": -12000,
+    "clampValues": {
+        "min": -12000
+    },
     "source": {
         "url": "https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/geoid/geoid/bil/%TILEMATRIX/geoid_%COL_%ROW.bil",
         "format": "image/x-bil;bits=32",

package/examples/source_file_geojson_3d.html

@@ -54,7 +54,6 @@
                     crs: 'EPSG:4326',
                     format: 'application/json',
                 }),
-                transparent: true,
                 opacity: 0.7,
                 zoom: { min: 10 },
                 style: {

package/examples/source_file_kml_raster_usgs.html

@@ -69,7 +69,6 @@
             }
 
             var kmlStyle = {
-                zoom: { min: 10, max: 20 },
                 text: {
                     field: '{name}',
                     haloColor: 'black',

package/examples/source_stream_wfs_raster.html

@@ -53,12 +53,6 @@
             itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
             itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
 
-            function isValidData(data) {
-                if(data.features[0].geometries.length < 1000) {
-                    return data;
-                }
-            }
-
             var wfsBuildingSource = new itowns.WFSSource({
                 url: 'https://data.geopf.fr/wfs/ows?',
                 version: '2.0.0',
@@ -102,7 +96,6 @@
                         width: 2.0,
                     },
                 },
-                isValidData: isValidData,
                 source: wfsBuildingSource,
                 zoom: { max: 20, min: 13 },
             });

package/examples/vector_tile_mapbox_raster.html

@@ -0,0 +1,91 @@
+<html>
+  <head>
+    <title>Itowns - vector-tiles 2d </title>
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="css/example.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="css/LoadingScreen.css"
+    />
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
+  </head>
+  <body>
+    <div id="viewerDiv"></div>
+
+    <!-- Import iTowns source code -->
+    <script src="../dist/itowns.js"></script>
+    <script src="../dist/debug.js"></script>
+    <!-- Import iTowns LoadingScreen and GuiTools plugins -->
+    <script src="js/GUI/GuiTools.js"></script>
+    <script src="js/GUI/LoadingScreen.js"></script>
+
+    <script>
+      const typeView = 'Planar';
+      // const typeView = 'Globe';
+
+      // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
+      var viewerDiv = document.getElementById('viewerDiv');
+      let view;
+
+      if (typeView === 'Globe') {
+        const coord = new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712); // Paris
+        // const coord = new itowns.Coordinates("EPSG:4326", 60.599525, 56.834341); // Yekaterinburg
+        const placement = {
+          coord,
+          range: 950000,
+        };
+        view = new itowns.GlobeView(viewerDiv, placement);
+      } else if (typeView === 'Planar') {
+        // Define geographic extent: CRS, min/max X, min/max Y
+        var extent = new itowns.Extent(
+            'EPSG:3857',
+            -20037508.342789244, 20037508.342789244,
+            -20037508.342789255, 20037508.342789244);
+
+        // Instanciate PlanarView
+        view = new itowns.PlanarView(viewerDiv, extent, {
+            maxSubdivisionLevel: 20,
+            controls: {
+                // We do not want the user to zoom out too much
+                maxAltitude: 40000000,
+                // We want to keep the rotation disabled, to only have a view from the top
+                enableRotation: false,
+                // Don't zoom too much on smart zoom
+                smartTravelHeightMax: 100000,
+            },
+        });
+      }
+ 
+      const debugMenu = new GuiTools("menuDiv", view);
+      setupLoadingScreen(viewerDiv, view);
+
+      const source = new itowns.VectorTilesSource({
+        style: "mapbox://styles/mapbox/streets-v8",
+        accessToken:
+          "pk.eyJ1IjoiZnRvcm9tYW5vZmYiLCJhIjoiY2xrc2Zpa2o3MDQxNTNxcG5sczJyaTlncyJ9.5KFKdMLIiy-b_fAjSVhjCQ",
+      });
+
+      const layer = new itowns.ColorLayer("vector-map", {
+        source,
+        noTextureParentOutsideLimit: true,
+        addLabelLayer: true,
+      });
+
+      view.addLayer(layer).then(() => {
+        debugMenu.addLayerGUI.bind(debugMenu);
+        itowns.ColorLayersOrdering.moveLayerToIndex(view, "vector-map", 15);
+      });
+
+      debug.createTileDebugUI(debugMenu.gui, view);
+    </script>
+  </body>
+</html>