npm - itowns - Versions diffs - 2.36.2 → 2.37.0 - Mend

itowns 2.36.2 → 2.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

package/CONTRIBUTING.md +30 -17
package/changelog.md +52 -0
package/dist/debug.js +1 -1
package/dist/debug.js.LICENSE.txt +1 -1
package/dist/debug.js.map +1 -1
package/dist/itowns.js +1 -1
package/dist/itowns.js.map +1 -1
package/dist/itowns_widgets.js +2 -0
package/dist/itowns_widgets.js.map +1 -0
package/examples/config.json +25 -6
package/examples/css/widgets.css +248 -0
package/examples/geoid_geoidLayer.html +102 -0
package/examples/images/compass.svg +60 -0
package/examples/images/widget-logo.svg +66 -0
package/examples/itowns-potree.html +252 -0
package/examples/js/GUI/GuiTools.js +17 -0
package/examples/js/Scale.js +1 -0
package/examples/source_file_from_fetched_data.html +90 -0
package/examples/source_file_from_format.html +85 -0
package/examples/source_file_from_methods.html +87 -0
package/examples/source_file_from_parsed_data.html +104 -0
package/examples/source_file_geojson_raster.html +21 -45
package/examples/source_file_gpx_raster.html +28 -36
package/examples/source_file_kml_raster.html +1 -4
package/examples/source_file_shapefile.html +39 -34
package/examples/source_stream_wfs_25d.html +21 -13
package/examples/source_stream_wfs_3d.html +21 -12
package/examples/source_stream_wfs_raster.html +20 -20
package/examples/view_immersive.html +13 -14
package/examples/widgets_minimap.html +122 -0
package/examples/widgets_navigation.html +119 -0
package/lib/Controls/GlobeControls.js +13 -0
package/lib/Controls/PlanarControls.js +1 -1
package/lib/Converter/convertToTile.js +5 -1
package/lib/Core/3DTiles/C3DTBoundingVolume.js +4 -1
package/lib/Core/Deprecated/Undeprecator.js +1 -1
package/lib/Core/Feature.js +3 -4
package/lib/Core/Geographic/Extent.js +1 -1
package/lib/Core/Geographic/GeoidGrid.js +143 -0
package/lib/Core/MainLoop.js +1 -1
package/lib/Core/Math/Ellipsoid.js +1 -1
package/lib/Core/Prefab/Globe/SkyShader.js +3 -1
package/lib/Core/Prefab/Planar/PlanarLayer.js +3 -1
package/lib/Core/Style.js +1 -1
package/lib/Core/TileGeometry.js +3 -1
package/lib/Core/TileMesh.js +11 -17
package/lib/Core/View.js +40 -2
package/lib/Layer/ElevationLayer.js +6 -2
package/lib/Layer/FeatureGeometryLayer.js +3 -1
package/lib/Layer/GeoidLayer.js +131 -0
package/lib/Layer/InfoLayer.js +1 -1
package/lib/Layer/Layer.js +1 -1
package/lib/Layer/LayerUpdateStrategy.js +1 -1
package/lib/Layer/PotreeLayer.js +3 -1
package/lib/Layer/TiledGeometryLayer.js +3 -1
package/lib/Main.js +214 -174
package/lib/MainBundle.js +1 -1
package/lib/Parser/B3dmParser.js +2 -1
package/lib/Parser/GDFParser.js +118 -0
package/lib/Parser/GTXParser.js +92 -0
package/lib/Parser/ISGParser.js +121 -0
package/lib/Parser/LASParser.js +3 -1
package/lib/Parser/XbilParser.js +1 -1
package/lib/Process/3dTilesProcessing.js +2 -2
package/lib/Process/FeatureProcessing.js +3 -1
package/lib/Process/LayeredMaterialNodeProcessing.js +7 -4
package/lib/Provider/URLBuilder.js +1 -1
package/lib/Renderer/LayeredMaterial.js +2 -2
package/lib/Renderer/OBB.js +18 -25
package/lib/Renderer/PointsMaterial.js +5 -6
package/lib/Renderer/RasterTile.js +1 -1
package/lib/Renderer/Shader/ShaderUtils.js +4 -2
package/lib/Source/C3DTilesSource.js +3 -1
package/lib/Source/EntwinePointTileSource.js +3 -1
package/lib/Source/PotreeSource.js +3 -1
package/lib/Source/Source.js +15 -10
package/lib/Source/WMTSSource.js +3 -1
package/lib/ThreeExtended/loaders/GLTFLoader.js +85 -35
package/lib/Utils/CameraUtils.js +11 -1
package/lib/Utils/DEMUtils.js +1 -1
package/lib/Utils/FeaturesUtils.js +8 -4
package/package.json +25 -25

package/examples/itowns-potree.html ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/source_file_from_fetched_data.html ADDED Viewed

@@ -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 ADDED Viewed

@@ -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>

package/examples/source_file_from_methods.html ADDED Viewed

@@ -0,0 +1,87 @@
+<html>
+<head>
+    <title>Itowns - Source - fetcher and parser</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 FETCHER AND PARSER METHODS : ----------
+    const sourceFromFetcherAndParser = new itowns.FileSource({
+        url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/lyon-hydro.geojson',
+        crs: 'EPSG:4326',
+        // Specify fetcher and parser methods. Should you implement some custom ones, they would need to be called here.
+        fetcher: itowns.Fetcher.json,
+        parser: itowns.GeoJsonParser.parse,
+    })
+    view.addLayer(new itowns.ColorLayer('Hydro', {
+        source: sourceFromFetcherAndParser,
+        style: new itowns.Style({
+            fill: { color: 'cyan', opacity: 0.5 },
+            stroke: { color: 'blue',},
+        }),
+    })).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(sourceFromFetcherAndParser.extent, false);
+    });
+</script>
+</body>
+</html>

package/examples/source_file_from_parsed_data.html ADDED Viewed

@@ -0,0 +1,104 @@
+<html>
+<head>
+    <title>Itowns - FileSource - Handle parsing 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 PARSED 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-trains.geojson',
+    ).then((fetched) => {
+        // Handle parsing step.
+        // We parse the fetched data into a FeatureCollection.
+        // See http://www.itowns-project.org/itowns/docs/#api/Base/FeatureCollection.
+        // Should you implement a custom parser, it would need to be called here.
+        return itowns.GeoJsonParser.parse(fetched, {
+            // Information on the fetched data.
+            // See http://www.itowns-project.org/itowns/docs/#api/Source/ParsingOptions.
+            in: {
+                crs: 'EPSG:4326',
+            },
+            // Information on the FeatureCollection that should be created from the fetched data. Here, we pass a
+            // FeatureBuildingOptions (http://www.itowns-project.org/itowns/docs/#api/Base/FeatureBuildingOptions).
+            out: {
+                crs: view.tileLayer.extent.crs,
+            },
+        });
+    }).then((parsed) => {
+        // Finally, define a FileSource from the parsed data
+        const sourceFromParsedData = new itowns.FileSource({ features: parsed });
+        view.addLayer(new itowns.ColorLayer('Trains', {
+            source: sourceFromParsedData,
+            style: new itowns.Style({
+                stroke: { color: 'black', width: 2 },
+            }),
+        })).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(view.getLayerById('Trains').source.extent, false);
+    });
+</script>
+</body>
+</html>