itowns 2.35.0 → 2.37.0

package/examples/images/widget-logo.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.2" width="79.01mm" height="158.01mm" viewBox="5500 2100 7901 15801" preserveAspectRatio="xMidYMid" fill-rule="evenodd" stroke-width="28.222" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:presentation="http://sun.com/xmlns/staroffice/presentation" xmlns:smil="http://www.w3.org/2001/SMIL20/" xmlns:anim="urn:oasis:names:tc:opendocument:xmlns:animation:1.0" xml:space="preserve">
+ <defs class="EmbeddedBulletChars">
+  <g id="bullet-char-template-57356" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 580,1141 L 1163,571 580,0 -4,571 580,1141 Z"/>
+  </g>
+  <g id="bullet-char-template-57354" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 8,1128 L 1137,1128 1137,0 8,0 8,1128 Z"/>
+  </g>
+  <g id="bullet-char-template-10146" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 174,0 L 602,739 174,1481 1456,739 174,0 Z M 1358,739 L 309,1346 659,739 1358,739 Z"/>
+  </g>
+  <g id="bullet-char-template-10132" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 2015,739 L 1276,0 717,0 1260,543 174,543 174,936 1260,936 717,1481 1274,1481 2015,739 Z"/>
+  </g>
+  <g id="bullet-char-template-10007" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 0,-2 C -7,14 -16,27 -25,37 L 356,567 C 262,823 215,952 215,954 215,979 228,992 255,992 264,992 276,990 289,987 310,991 331,999 354,1012 L 381,999 492,748 772,1049 836,1024 860,1049 C 881,1039 901,1025 922,1006 886,937 835,863 770,784 769,783 710,716 594,584 L 774,223 C 774,196 753,168 711,139 L 727,119 C 717,90 699,76 672,76 641,76 570,178 457,381 L 164,-76 C 142,-110 111,-127 72,-127 30,-127 9,-110 8,-76 1,-67 -2,-52 -2,-32 -2,-23 -1,-13 0,-2 Z"/>
+  </g>
+  <g id="bullet-char-template-10004" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 285,-33 C 182,-33 111,30 74,156 52,228 41,333 41,471 41,549 55,616 82,672 116,743 169,778 240,778 293,778 328,747 346,684 L 369,508 C 377,444 397,411 428,410 L 1163,1116 C 1174,1127 1196,1133 1229,1133 1271,1133 1292,1118 1292,1087 L 1292,965 C 1292,929 1282,901 1262,881 L 442,47 C 390,-6 338,-33 285,-33 Z"/>
+  </g>
+  <g id="bullet-char-template-9679" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 813,0 C 632,0 489,54 383,161 276,268 223,411 223,592 223,773 276,916 383,1023 489,1130 632,1184 813,1184 992,1184 1136,1130 1245,1023 1353,916 1407,772 1407,592 1407,412 1353,268 1245,161 1136,54 992,0 813,0 Z"/>
+  </g>
+  <g id="bullet-char-template-8226" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 346,457 C 273,457 209,483 155,535 101,586 74,649 74,723 74,796 101,859 155,911 209,963 273,989 346,989 419,989 480,963 531,910 582,859 608,796 608,723 608,648 583,586 532,535 482,483 420,457 346,457 Z"/>
+  </g>
+  <g id="bullet-char-template-8211" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M -4,459 L 1135,459 1135,606 -4,606 -4,459 Z"/>
+  </g>
+  <g id="bullet-char-template-61548" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 173,740 C 173,903 231,1043 346,1159 462,1274 601,1332 765,1332 928,1332 1067,1274 1183,1159 1299,1043 1357,903 1357,740 1357,577 1299,437 1183,322 1067,206 928,148 765,148 601,148 462,206 346,322 231,437 173,577 173,740 Z"/>
+  </g>
+ </defs>
+ <g class="Page">
+  <g class="com.sun.star.drawing.CustomShape">
+   <g id="id3">
+    <rect class="BoundingBox" stroke="none" fill="none" x="5899" y="5100" width="7103" height="1902"/>
+    <path fill="rgb(255,255,255)" stroke="none" d="M 6216,5100 L 6217,5100 C 6161,5100 6107,5115 6058,5142 6010,5170 5970,5210 5942,5258 5915,5307 5900,5361 5900,5417 L 5900,6684 5900,6684 C 5900,6740 5915,6794 5942,6843 5970,6891 6010,6931 6058,6959 6107,6986 6161,7001 6217,7001 L 12684,7001 12684,7001 C 12740,7001 12794,6986 12843,6959 12891,6931 12931,6891 12959,6843 12986,6794 13001,6740 13001,6684 L 13001,5416 13001,5417 13001,5417 C 13001,5361 12986,5307 12959,5258 12931,5210 12891,5170 12843,5142 12794,5115 12740,5100 12684,5100 L 6216,5100 Z"/>
+   </g>
+  </g>
+  <g class="com.sun.star.drawing.CustomShape">
+   <g id="id4">
+    <rect class="BoundingBox" stroke="none" fill="none" x="5500" y="2100" width="7901" height="7901"/>
+   </g>
+  </g>
+  <g class="com.sun.star.drawing.CustomShape">
+   <g id="id5">
+    <rect class="BoundingBox" stroke="none" fill="none" x="8499" y="2499" width="1903" height="7103"/>
+    <path fill="rgb(255,255,255)" stroke="none" d="M 8500,9285 L 8500,9284 C 8500,9340 8515,9394 8542,9443 8570,9491 8610,9531 8658,9559 8707,9586 8761,9601 8817,9601 L 10084,9601 10084,9601 C 10140,9601 10194,9586 10243,9559 10291,9531 10331,9491 10359,9443 10386,9394 10401,9340 10401,9284 L 10401,2817 10401,2817 C 10401,2761 10386,2707 10359,2658 10331,2610 10291,2570 10243,2542 10194,2515 10140,2500 10084,2500 L 8816,2500 8817,2500 8817,2500 C 8761,2500 8707,2515 8658,2542 8610,2570 8570,2610 8542,2658 8515,2707 8500,2761 8500,2817 L 8500,9285 Z"/>
+   </g>
+  </g>
+  <g class="com.sun.star.drawing.CustomShape">
+   <g id="id6">
+    <rect class="BoundingBox" stroke="none" fill="none" x="5899" y="13000" width="7103" height="1902"/>
+    <path fill="rgb(255,255,255)" stroke="none" d="M 6216,13000 L 6217,13000 C 6161,13000 6107,13015 6058,13042 6010,13070 5970,13110 5942,13158 5915,13207 5900,13261 5900,13317 L 5900,14584 5900,14584 C 5900,14640 5915,14694 5942,14743 5970,14791 6010,14831 6058,14859 6107,14886 6161,14901 6217,14901 L 12684,14901 12684,14901 C 12740,14901 12794,14886 12843,14859 12891,14831 12931,14791 12959,14743 12986,14694 13001,14640 13001,14584 L 13001,13316 13001,13317 13001,13317 C 13001,13261 12986,13207 12959,13158 12931,13110 12891,13070 12843,13042 12794,13015 12740,13000 12684,13000 L 6216,13000 Z"/>
+   </g>
+  </g>
+  <g class="com.sun.star.drawing.CustomShape">
+   <g id="id7">
+    <rect class="BoundingBox" stroke="none" fill="none" x="5500" y="10000" width="7901" height="7901"/>
+   </g>
+  </g>
+ </g>
+</svg>

package/examples/itowns-potree.html

@@ -0,0 +1,252 @@
+<html>
+    <head>
+        <title>iTowns - Potree</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">
+
+        <link rel="stylesheet" type="text/css" href="../potree/build/potree/potree.css">
+        <link rel="stylesheet" type="text/css" href="../potree/libs/jquery-ui/jquery-ui.min.css">
+        <link rel="stylesheet" type="text/css" href="../potree/libs/spectrum/spectrum.css">
+        <link rel="stylesheet" type="text/css" href="../potree/libs/jstree/themes/mixed/style.css">
+
+        <style type="text/css">
+            tr { color: white; }
+        </style>
+    </head>
+    <body>
+
+        <div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
+            <div id="potree_render_area"></div>
+            <div id="potree_sidebar_container"></div>
+        </div>
+
+        <!-- Import iTowns source code -->
+        <script src="../dist/itowns.js"></script>
+        <script src="../dist/debug.js"></script>
+        <!-- Import iTowns LoadingScreen pluggin -->
+        <script src="js/GUI/LoadingScreen.js"></script>
+
+        <!-- Define THREE and proj4 constants so that Potree may access them. Otherwise, we would need to access them
+             with `itowns.THREE` or `itowns.proj4`. -->
+        <script type="text/javascript">
+            const THREE = itowns.THREE;
+            THREE.Object3D.DefaultUp.set(0, 0, 1);
+
+            const proj4 = itowns.proj4;
+        </script>
+
+        <!-- Import Potree source code -->
+        <script src="../potree/libs/jquery/jquery-3.1.1.min.js"></script>
+        <script src="../potree/libs/i18next/i18next.js"></script>
+        <script src="../potree/libs/jstree/jstree.min.js"></script>
+        <script src="../potree/libs/plasio/js/laslaz.js"></script>
+        <script src="../potree/build/potree/potree.js"></script>
+
+        <script type="text/javascript">
+
+
+
+            // `viewerDiv` contains both iTowns and Potree rendering area (`<canvas>`)
+            const viewerDiv = document.getElementById('potree_render_area');
+
+
+
+            // ---------- CREATE A POTREE VIEWER FOR SUPPORTING POINT CLOUD VISUALIZATION : ----------
+
+            const coordinates = new itowns.Coordinates('EPSG:4978');
+
+            // Define crs projection of the point cloud data (taken from https://epsg.io/2154, Proj4js section)
+            proj4.defs(
+                'EPSG:2154',
+                '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80'
+                + ' towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
+            );
+            const pointCloudCRS = 'EPSG:2154';
+
+            Potree.setTHREEShaderChunk(itowns.ShaderChunk.target);
+
+            // Create a Potree Viewer to support point cloud visualization
+            const potreeViewer = new Potree.Viewer(viewerDiv, {
+                dynamicNearFar: false,
+                isGeocentric: true,
+                crs: pointCloudCRS,
+
+                // Callback to transform coordinates displayed by Potree `Point measurement` in `EPSG:2154`
+                measureCoordinateCallback: (position) => {
+                    return coordinates.setFromVector3(position).as(pointCloudCRS).toVector3();
+                },
+            });
+
+            potreeViewer.setEDLEnabled(true);
+            potreeViewer.setControls(null);
+            potreeViewer.setBackground('black');
+            potreeViewer.loadGUI();
+
+            // Override Potree area measure method. The original Potree method gives a planar area delimited from given
+            // points (summits of the area). The area returned by the method is computed from `x` and `y` components of
+            // the points coordinates.
+            //
+            // By default, the points coordinates passed to the method are in iTowns viewer CRS, which is geocentric.
+            // Therefore, computing an area over the `x` and `y` components of these coordinates is incorrect - it
+            // actualy computes its orthogonal projection on the equatorial plane.
+            //
+            // To fix this, we transform each coordinates of the area summits in the point cloud CRS, which is
+            // geographic. We store each transformed coordinates in an array. Finally we override Potree area measure
+            // method so that it computes area from this array.
+            potreeViewer.scene.addEventListener('measurement_added', (e) => {
+                const { measurement } = e;
+
+                if(measurement.name === "Area") {
+                    // Array containing the geographic coordinates of each area summits
+                    const areaPoints = [new itowns.Coordinates(pointCloudCRS)];
+
+                    // Add a Coordinates to the array when an area summit is created.
+                    measurement.addEventListener('marker_added', () => {
+                        areaPoints.push(new itowns.Coordinates(pointCloudCRS));
+                    }, false)
+                    // Translate the area summit coordinates from itowns viewer CRS to geographic CRS when the summit is
+                    // moved. It also happens when the summit is created.
+                    measurement.addEventListener('marker_moved', (event) => {
+                        coordinates.setFromVector3(event.position).as(pointCloudCRS, areaPoints[event.index]);
+                    }, false);
+                    // Clear the coordinates array when we remove an area summit.
+                    measurement.addEventListener('marker_removed', () => {
+                        areaPoints.splice(areaPoints.length - 1, 1);
+                    }, false);
+
+                    // Override potree `Measure.getArea` method to use projected coordinates to compute area
+                    measurement.getArea = () => {
+                        let area = 0;
+                        let j = areaPoints.length - 1;
+
+                        for (let i = 0; i < areaPoints.length; i++) {
+                            let p1 = areaPoints[i];
+                            let p2 = areaPoints[j];
+                            area += (p2.x + p1.x) * (p1.y - p2.y);
+                            j = i
+                        }
+
+                        return Math.abs(area / 2);
+                    };
+                }
+            });
+
+
+
+            // ---------- CREATE A GlobeView FOR SUPPORTING ORTHO-PHOTOGRAPHIES AND DEM VISUALIZATION : ----------
+
+            // Define camera initial position.
+            const placement = {
+                heading: -35,
+                tilt: 30,
+            }
+
+            // Create a GlobeView.
+            const itownsViewer = new itowns.GlobeView(viewerDiv, placement, {
+                renderer: potreeViewer.renderer,
+                scene3D: potreeViewer.scene.scene,
+            });
+
+            // Setup loading screen.
+            setupLoadingScreen(viewerDiv, itownsViewer);
+
+            // Make atmosphere realistic.
+            itownsViewer.getLayerById('atmosphere').setRealisticOn(true);
+
+            // Controls and camera specific setting.
+            itownsViewer.controls.minDistanceCollision = 0.01;
+            itownsViewer.controls.minDistance = 20;
+            itownsViewer.camera.camera3D.near = 0.1;
+
+
+
+            // ---------- TWEAK ITOWNS VIEWER TO SUPPORT POTREE VISUALIZATION : ----------
+
+            itownsViewer.render = () => {};
+
+            // Force iTowns viewer to resize when changing #potree_render_area div size.
+            // This allows the viewer resizing when toggling potree menu.
+            new ResizeObserver(() => itownsViewer.resize()).observe(viewerDiv);
+
+            // Disable iTowns controls when hovering Potree tool (such as a vertex of a displayed polygon).
+            // This prevents iTowns camera from moving when we want to displace a Potree tool marker.
+            viewerDiv.addEventListener('mousemove', () => {
+                itownsViewer.controls.states.enabled = potreeViewer.inputHandler.hoveredElements.length === 0;
+            })
+
+            // Set Potree viewer camera as iTowns viewer camera.
+            const camera = itownsViewer.camera.camera3D;
+            camera.zoomTo = () => {};
+            potreeViewer.scene.cameraP = camera;
+
+            // TODO : should be moved to Label2DRenderer constructor
+            itownsViewer.mainLoop.gfxEngine.label2dRenderer.domElement.style.pointerEvents = 'none';
+
+
+
+            // ---------- DISPLAY CONTEXTUAL DATA USING ITOWNS : ----------
+
+            // Add one imagery layer to the scene. This layer's properties are defined in a json file, but it could be
+            // defined as a plain js object. See `Layer` documentation for more info.
+            itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
+                config.source = new itowns.WMTSSource(config.source);
+                config.source.zoom = { max: 19, min: 3 };
+                itownsViewer.addLayer(
+                    new itowns.ColorLayer(config.id, config),
+                );
+            });
+
+            // Add two elevaion layers, each with a different level of detail. Here again, each layer's properties are
+            // defined in a json file.
+            function addElevationLayerFromConfig(config) {
+                config.source = new itowns.WMTSSource(config.source);
+                itownsViewer.addLayer(
+                    new itowns.ElevationLayer(config.id, config),
+                );
+            }
+            itowns.Fetcher.json('layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
+            itowns.Fetcher.json('layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
+
+
+
+            // ---------- DISPLAY POINT CLOUD DATA USING POTREE : ----------
+
+            const pointcloudUrl = `${location.protocol}//lidarhd.pocgpf.ovh/data/`;
+
+            itowns.Fetcher.json(
+                pointcloudUrl + 'metadata/pivotTHREE.json'
+            ).then(
+                (pivot) => new THREE.ObjectLoader().parse(pivot)
+            ).then(
+                (pivotTHREE) => {
+                    Potree.loadPointCloud(pointcloudUrl + 'ept/ept.json', 'pointcloud', function(e) {
+                        const pointcloud = e.pointcloud;
+                        const material = pointcloud.material;
+
+                        potreeViewer.scene.addPointCloud(pointcloud);
+
+                        pointcloud.getAttribute('intensity').range = [0, 10000];
+
+                        material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
+                        material.shape = Potree.PointShape.CIRCLE
+
+                        pointcloud.position.copy(pivotTHREE.position);
+                        pointcloud.quaternion.copy(pivotTHREE.quaternion);
+                        pointcloud.updateMatrixWorld(true);
+
+                        // Move itowns viewer camera to the center of the point cloud
+                        itownsViewer.controls.lookAtCoordinate({
+                            coord: new itowns.Coordinates('EPSG:4978').setFromVector3(pivotTHREE.position),
+                            range: 1500
+                        }, false);
+                    });
+                }
+            );
+
+        </script>
+    </body>
+</html>

package/examples/js/GUI/GuiTools.js

@@ -44,8 +44,10 @@ function GuiTools(domId, view, w) {
         document.body.appendChild(element);
         this.colorGui = this.gui.addFolder('Color Layers');
         this.elevationGui = this.gui.addFolder('Elevation Layers');
+        this.geoidGui = this.gui.addFolder('Geoid Layers');
         this.elevationGui.hide();
         this.colorGui.hide();
+        this.geoidGui.hide();
         this.view = view;
         view.addEventListener('layers-order-changed', (function refreshColorGui() {
             var i;
@@ -64,6 +66,8 @@ GuiTools.prototype.addLayerGUI = function fnAddLayerGUI(layer) {
         this.addImageryLayerGUI(layer);
     } else if (layer.isElevationLayer) {
         this.addElevationLayerGUI(layer);
+    } else if (layer.isGeoidLayer) {
+        this.addGeoidLayerGUI(layer);
     }
 };
 
@@ -107,6 +111,19 @@ GuiTools.prototype.addElevationLayerGUI = function addElevationLayerGUI(layer) {
     }).bind(this));
 };
 
+GuiTools.prototype.addGeoidLayerGUI = function addGeoidLayerGUI(layer) {
+    if (this.geoidGui.hasFolder(layer.id)) { return; }
+    this.geoidGui.show();
+    var folder = this.geoidGui.addFolder(layer.id);
+    folder.add({ frozen: layer.frozen }, 'frozen').onChange(function refreshFrozenGui(value) {
+        layer.frozen = value;
+    });
+    folder.add({ visible: layer.visible }, 'visible').onChange((function updateVisibility(value) {
+        layer.visible = value;
+        this.view.notifyChange(layer);
+    }).bind(this));
+};
+
 GuiTools.prototype.addImageryLayersGUI = function addImageryLayersGUI(layers) {
     var i;
     var seq = itowns.ImageryLayers.getColorLayersIdOrderedBySequence(layers);

package/examples/js/Scale.js

@@ -13,6 +13,7 @@ function roundPixelsFromMeters(view, pixelSize) {
 
     // Round the metric distance :
     distanceMeters = Math.floor(distanceMeters);
+    // eslint-disable-next-line prefer-exponentiation-operator
     var digit = Math.pow(10, distanceMeters.toString().length - 1);
     distanceMeters = Math.round(distanceMeters / digit) * digit;
 

package/examples/js/plugins/CSVnVRTParser.js

@@ -18,7 +18,6 @@
  * }).then(function _(res) {
  *     res.csv = Papa.parse(res.csv.trim()).data;
  *     return CSVnVRTParser.parse(res, { out: {
- *              buildExtent: true,
  *              crs: 'EPSG:4326'
  *          }
  *     });

package/examples/layers/JSONLayers/Administrative.json

@@ -6,7 +6,7 @@
   "transparent": true,
   "source": {
     "crs": "EPSG:3857",
-    "url": "https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wmts",
+    "url": "https://wxs.ign.fr/administratif/geoportail/wmts",
     "format": "image/png",
     "name": "LIMITES_ADMINISTRATIVES_EXPRESS.LATEST",
     "style": "normal",

package/examples/layers/JSONLayers/Cada.json

@@ -5,7 +5,7 @@
   "opacity": 1,
   "transparent": true,
   "source": {
-    "url": "https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wmts",
+    "url": "https://wxs.ign.fr/parcellaire/geoportail/wmts",
     "crs": "EPSG:3857",
     "networkOptions": {
       "crossOrigin": "omit"

package/examples/layers/JSONLayers/EtatMajor.json

@@ -4,7 +4,7 @@
     "transparent": true,
     "source": {
         "crs": "EPSG:3857",
-        "url":        "http://wxs.ign.fr/va5orxd0pgzvq3jxutqfuy0b/geoportail/wmts",
+        "url":        "http://wxs.ign.fr/cartes/geoportail/wmts",
         "networkOptions": {
             "crossOrigin": "anonymous"
         },

package/examples/layers/JSONLayers/IGN_MNT.json

@@ -8,7 +8,7 @@
         }
     },
     "source": {
-        "url":        "https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wmts",
+        "url":        "https://wxs.ign.fr/altimetrie/geoportail/wmts",
         "crs": "EPSG:4326",
         "format": "image/x-bil;bits=32",
         "attribution" : {

package/examples/layers/JSONLayers/IGN_MNT_HIGHRES.json

@@ -8,7 +8,7 @@
 		}
 	},
 	"source": {
-		"url":        "https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wmts",
+		"url":        "https://wxs.ign.fr/altimetrie/geoportail/wmts",
         "crs": "EPSG:4326",
 		"format": "image/x-bil;bits=32",
 		"attribution" : {

package/examples/layers/JSONLayers/WORLD_DTM.json

@@ -11,7 +11,7 @@
     "source": {
         "format": "image/x-bil;bits=32",
         "crs": "EPSG:4326",
-        "url":        "https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wmts",
+        "url":        "https://wxs.ign.fr/altimetrie/geoportail/wmts",
         "name": "ELEVATION.ELEVATIONGRIDCOVERAGE.SRTM3",
         "tileMatrixSet": "WGS84G",
         "tileMatrixSetLimits": {

package/examples/misc_custom_label.html

@@ -124,8 +124,6 @@
         // create new featureCollection
         const collection = new itowns.FeatureCollection({
             crs: view.tileLayer.extent.crs,
-            buildExtent: true,
-            structure: '2d',
         });
 
         // create new feature

package/examples/plugins_vrt.html

@@ -50,7 +50,6 @@
             }).then(function _(res) {
                 res.csv = Papa.parse(res.csv.trim()).data;
                 return CSVnVRTParser.parse(res, { out: {
-                    buildExtent: true,
                     crs: view.tileLayer.extent.crs,
                 }});
             }).then(function _(features) {

package/examples/source_file_from_fetched_data.html

@@ -0,0 +1,90 @@
+<html>
+<head>
+    <title>Itowns - FileSource - Handle fetching step</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="js/GUI/GuiTools.js"></script>
+<script src="../dist/itowns.js"></script>
+<script src="../dist/debug.js"></script>
+<script src="js/GUI/LoadingScreen.js"></script>
+<script src="js/plugins/FeatureToolTip.js"></script>
+<script type="text/javascript">
+    /* global itowns, setupLoadingScreen, GuiTools, ToolTip */
+
+
+
+    // ---------- CREATE A GlobeView : ----------
+
+    // Define camera initial position
+    const placement = {
+        coord: new itowns.Coordinates('EPSG:4326', 3.05, 48.95),
+        range: 70000,
+    };
+
+    // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
+    const viewerDiv = document.getElementById('viewerDiv');
+
+    // Instantiate iTowns GlobeView
+    const view = new itowns.GlobeView(viewerDiv, placement);
+
+    // Setup loading screen and debug menu
+    setupLoadingScreen(viewerDiv, view);
+    const debugMenu = new GuiTools('menuDiv', view);
+
+
+
+    // ---------- DISPLAY CONTEXTUAL DATA : ----------
+
+    // Add one imagery layer to the scene
+    // This layer is defined in a json file but it could be defined as a plain js
+    // object. See Layer* for more info.
+    itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
+        config.source = new itowns.WMTSSource(config.source);
+        var layer = new itowns.ColorLayer('Ortho', config);
+        view.addLayer(layer).then(debugMenu.addLayerGUI.bind(debugMenu));
+    });
+
+
+
+    // ---------- DEFINE DATA SOURCE FROM FETCHED DATA : ----------
+
+    // Handle fetching step.
+    // Should you implement a custom fetcher, it would need to be called here.
+    itowns.Fetcher.json(
+        'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/lyon-roads.geojson',
+    ).then((fetched) => {
+        // Then, create a FileSource, passing it the data just fetched. We also need to specify the `format` or the
+        // `parser` parameter so that iTowns knows which parser it can use.
+        const sourceFromFetchedData = new itowns.FileSource({
+            fetchedData: fetched,
+            crs: 'EPSG:4326',
+            format: 'application/json',
+        });
+
+        view.addLayer(new itowns.ColorLayer('Roads', {
+            source: sourceFromFetchedData,
+            style: new itowns.Style({
+                stroke: { color: 'yellow' },
+            }),
+        })).then(debugMenu.addLayerGUI.bind(debugMenu));
+    });
+
+
+
+    view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
+        // Organize the order with which layers are superposing.
+        itowns.ColorLayersOrdering.moveLayerToIndex(view, 'Ortho', 0);
+        // Move the camera to visualize all data.
+        view.controls.lookAtCoordinate(view.getLayerById('Roads').source.extent, false);
+    });
+
+</script>
+</body>
+</html>

package/examples/source_file_from_format.html

@@ -0,0 +1,85 @@
+<html>
+<head>
+    <title>Itowns - Source - format</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="js/GUI/GuiTools.js"></script>
+<script src="../dist/itowns.js"></script>
+<script src="../dist/debug.js"></script>
+<script src="js/GUI/LoadingScreen.js"></script>
+<script src="js/plugins/FeatureToolTip.js"></script>
+<script type="text/javascript">
+    /* global itowns, setupLoadingScreen, GuiTools, ToolTip */
+
+
+
+    // ---------- CREATE A GlobeView : ----------
+
+    // Define camera initial position
+    const placement = {
+        coord: new itowns.Coordinates('EPSG:4326', 3.05, 48.95),
+        range: 70000,
+    };
+
+    // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
+    const viewerDiv = document.getElementById('viewerDiv');
+
+    // Instantiate iTowns GlobeView
+    const view = new itowns.GlobeView(viewerDiv, placement);
+
+    // Setup loading screen and debug menu
+    setupLoadingScreen(viewerDiv, view);
+    const debugMenu = new GuiTools('menuDiv', view);
+
+
+
+    // ---------- DISPLAY CONTEXTUAL DATA : ----------
+
+    // Add one imagery layer to the scene
+    // This layer is defined in a json file but it could be defined as a plain js
+    // object. See Layer* for more info.
+    itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
+        config.source = new itowns.WMTSSource(config.source);
+        var layer = new itowns.ColorLayer('Ortho', config);
+        view.addLayer(layer).then(debugMenu.addLayerGUI.bind(debugMenu));
+    });
+
+
+
+    // ---------- DEFINE DATA SOURCE SPECIFYING ITS FORMAT : ----------
+
+    const sourceFromFormat = new itowns.FileSource({
+        url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/lyon-ZU.geojson',
+        crs: 'EPSG:4326',
+        format: 'application/json',
+    });
+
+    view.addLayer(new itowns.ColorLayer('Urban Area', {
+        source: sourceFromFormat,
+        style: new itowns.Style({
+            fill: { color: 'red', opacity: 0.5 },
+            stroke: { color: 'red' },
+        }),
+    })).then(debugMenu.addLayerGUI.bind(debugMenu));
+
+
+
+    // ---------- REORDER ColorLayers AND MOVE CAMERA : ----------
+
+    view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
+        // Organize the order with which layers are superposing.
+        itowns.ColorLayersOrdering.moveLayerToIndex(view, 'Ortho', 0);
+        // Move the camera to visualize all data.
+        view.controls.lookAtCoordinate(sourceFromFormat.extent, false);
+    });
+
+</script>
+</body>
+</html>