doc(tutorials): minor typo and syntax fixes

doc(tutorials): remove unneeded code indentation doc(tutorials): fix minor typo doc(tutorials): add missing semicolon Signed-off-by: Raphaël Duhen <raphael.duhen@ign.fr>
iTowns · Mar 7, 2024 · 7680ccf · 7680ccf
1 parent 17124ec
commit 7680ccf
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 147 deletions.
diff --git a/docs/tutorials/3DTiles-mesh-b3dm.md b/docs/tutorials/3DTiles-mesh-b3dm.md
@@ -40,65 +40,65 @@ The 3D Tiles dataset we are using is in the `EPSG:3946` CRS, so we will use a `{
 We won't go into the details of creating the view, adding the ortho images and the DEM. For more information on this part, see the [Raster visualization in Lambert Conformical conic projection]{@tutorial Raster-data-Lambert93} in which we do the same but in the `EPSG:2154` projection. You can use the following code that prepared the field with such data:
 
 ```js
-    // Define crs projection that we will use (taken from https://epsg.io/3946, Proj4js section)
-    itowns.proj4.defs('EPSG:3946', 
-    '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80' + 
-    '+towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
-
-    // Define geographic extent: CRS, min/max X, min/max Y
-    var extent = new itowns.Extent( 'EPSG:3946',
-        1837816.94334, 1847692.32501,
-        5170036.4587, 5178412.82698);
-
-    // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
-    var viewerDiv = document.getElementById('viewerDiv');
-
-    // Instanciate PlanarView*
-    var cameraCoord = new itowns.Coordinates('EPSG:3946', 1841980,
-        5175682, 3000)
-    var view = new itowns.PlanarView(viewerDiv, extent, { placement: {
-        coord: cameraCoord, heading: 30, range: 4000, tilt: 30 } });
-
-    // Add a WMS imagery source
-    var wmsImagerySource = new itowns.WMSSource({
-        extent: extent,
-        name: 'Ortho2009_vue_ensemble_16cm_CC46',
-        url: 'https://download.data.grandlyon.com/wms/grandlyon',
-        version: '1.3.0',
-        crs: 'EPSG:3946',
-        format: 'image/jpeg',
-    });
-
-    // Add a WMS imagery layer
-    var wmsImageryLayer = new itowns.ColorLayer('wms_imagery', {
-        updateStrategy: {
-            type: itowns.STRATEGY_DICHOTOMY,
-            options: {},
-        },
-        source: wmsImagerySource,
-    });
-
-    view.addLayer(wmsImageryLayer);
-
-    // Add a WMS elevation source
-    var wmsElevationSource = new itowns.WMSSource({
-        extent: extent,
-        url: 'https://download.data.grandlyon.com/wms/grandlyon',
-        name: 'MNT2012_Altitude_10m_CC46',
-        crs: 'EPSG:3946',
-        width: 256,
-        format: 'image/jpeg',
-    });
-
-    // Add a WMS elevation layer
-    var wmsElevationLayer = new itowns.ElevationLayer('wms_elevation', {
-        useColorTextureElevation: true,
-        colorTextureElevationMinZ: 144,
-        colorTextureElevationMaxZ: 622,
-        source: wmsElevationSource,
-    });
-
-    view.addLayer(wmsElevationLayer);
+// Define crs projection that we will use (taken from https://epsg.io/3946, Proj4js section)
+itowns.proj4.defs('EPSG:3946', 
+'+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80' + 
+'+towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
+
+// Define geographic extent: CRS, min/max X, min/max Y
+var extent = new itowns.Extent( 'EPSG:3946',
+    1837816.94334, 1847692.32501,
+    5170036.4587, 5178412.82698);
+
+// `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
+var viewerDiv = document.getElementById('viewerDiv');
+
+// Instanciate PlanarView*
+var cameraCoord = new itowns.Coordinates('EPSG:3946', 1841980,
+    5175682, 3000)
+var view = new itowns.PlanarView(viewerDiv, extent, { placement: {
+    coord: cameraCoord, heading: 30, range: 4000, tilt: 30 } });
+
+// Add a WMS imagery source
+var wmsImagerySource = new itowns.WMSSource({
+    extent: extent,
+    name: 'Ortho2009_vue_ensemble_16cm_CC46',
+    url: 'https://download.data.grandlyon.com/wms/grandlyon',
+    version: '1.3.0',
+    crs: 'EPSG:3946',
+    format: 'image/jpeg',
+});
+
+// Add a WMS imagery layer
+var wmsImageryLayer = new itowns.ColorLayer('wms_imagery', {
+    updateStrategy: {
+        type: itowns.STRATEGY_DICHOTOMY,
+        options: {},
+    },
+    source: wmsImagerySource,
+});
+
+view.addLayer(wmsImageryLayer);
+
+// Add a WMS elevation source
+var wmsElevationSource = new itowns.WMSSource({
+    extent: extent,
+    url: 'https://download.data.grandlyon.com/wms/grandlyon',
+    name: 'MNT2012_Altitude_10m_CC46',
+    crs: 'EPSG:3946',
+    width: 256,
+    format: 'image/jpeg',
+});
+
+// Add a WMS elevation layer
+var wmsElevationLayer = new itowns.ElevationLayer('wms_elevation', {
+    useColorTextureElevation: true,
+    colorTextureElevationMinZ: 144,
+    colorTextureElevationMaxZ: 622,
+    source: wmsElevationSource,
+});
+
+view.addLayer(wmsElevationLayer);
 ```
 
 ## Adding the 3D Tiles Layer

diff --git a/docs/tutorials/3DTiles-point-cloud-pnts.md b/docs/tutorials/3DTiles-point-cloud-pnts.md
@@ -39,73 +39,73 @@ The 3D Tiles dataset we are using is in the `EPSG:4978` CRS, so we will use a `{
 We won't go into the details of creating the view, adding the ortho images and the DEM. For more information on this part, see the [WGS84 tutorial]{@tutorial Raster-data-WGS84} in which we explain how to add similar layers. The only differences are the data sources used. Here, we use ortho images from a XYZ stream of Open Street Map tiles which will allow to better distinguish the point cloud. We also use a more precise DEM (but that only covers France).
 
 ```js
-    var viewerDiv = document.getElementById('viewerDiv');
-    var placement = {
-        coord: new itowns.Coordinates('EPSG:4326', 3.3792, 44.3335, 844),
-        tilt: 22,
-        heading: -180,
-        range: 2840
-    };
-
-    var view = new itowns.GlobeView(viewerDiv, placement);
-
-    var orthoSource = new itowns.TMSSource({
-        crs: "EPSG:3857",
-        isInverted: true,
-        format: "image/png",
-        url: "http://osm.oslandia.io/styles/klokantech-basic/${z}/${x}/${y}.png",
-        attribution: {
-            name:"OpenStreetMap",
-            url: "http://www.openstreetmap.org/"
+var viewerDiv = document.getElementById('viewerDiv');
+var placement = {
+    coord: new itowns.Coordinates('EPSG:4326', 3.3792, 44.3335, 844),
+    tilt: 22,
+    heading: -180,
+    range: 2840
+};
+
+var view = new itowns.GlobeView(viewerDiv, placement);
+
+var orthoSource = new itowns.TMSSource({
+    crs: "EPSG:3857",
+    isInverted: true,
+    format: "image/png",
+    url: "http://osm.oslandia.io/styles/klokantech-basic/${z}/${x}/${y}.png",
+    attribution: {
+        name:"OpenStreetMap",
+        url: "http://www.openstreetmap.org/"
+    },
+    tileMatrixSet: "PM"
+});
+
+var orthoLayer = new itowns.ColorLayer('Ortho', {
+    source: orthoSource,
+});
+
+view.addLayer(orthoLayer);
+
+var elevationSource = new itowns.WMTSSource({
+    url: 'http://wxs.ign.fr/altimetrie/geoportail/wmts',
+    crs: 'EPSG:4326',
+    name: 'ELEVATION.ELEVATIONGRIDCOVERAGE.HIGHRES',
+    tileMatrixSet: 'WGS84G',
+    format: 'image/x-bil;bits=32',
+    tileMatrixSetLimits: {
+        11: {
+            minTileRow: 442,
+            maxTileRow: 1267,
+            minTileCol: 1344,
+            maxTileCol: 2683
         },
-        tileMatrixSet: "PM"
-    });
-
-    var orthoLayer = new itowns.ColorLayer('Ortho', {
-        source: orthoSource,
-    });
-
-    view.addLayer(orthoLayer);
-
-    var elevationSource = new itowns.WMTSSource({
-        url: 'http://wxs.ign.fr/altimetrie/geoportail/wmts',
-        crs: 'EPSG:4326',
-        name: 'ELEVATION.ELEVATIONGRIDCOVERAGE.HIGHRES',
-        tileMatrixSet: 'WGS84G',
-        format: 'image/x-bil;bits=32',
-        tileMatrixSetLimits: {
-            11: {
-                minTileRow: 442,
-                maxTileRow: 1267,
-                minTileCol: 1344,
-                maxTileCol: 2683
-            },
-            12: {
-                minTileRow: 885,
-                maxTileRow: 2343,
-                minTileCol: 3978,
-                maxTileCol: 5126
-            },
-            13: {
-                minTileRow: 1770,
-                maxTileRow: 4687,
-                minTileCol: 7957,
-                maxTileCol: 10253
-            },
-            14: {
-                minTileRow: 3540,
-                maxTileRow: 9375,
-                minTileCol: 15914,
-                maxTileCol: 20507
-            }
+        12: {
+            minTileRow: 885,
+            maxTileRow: 2343,
+            minTileCol: 3978,
+            maxTileCol: 5126
+        },
+        13: {
+            minTileRow: 1770,
+            maxTileRow: 4687,
+            minTileCol: 7957,
+            maxTileCol: 10253
+        },
+        14: {
+            minTileRow: 3540,
+            maxTileRow: 9375,
+            minTileCol: 15914,
+            maxTileCol: 20507
         }
-    });
+    }
+});
 
-    var elevationLayer = new itowns.ElevationLayer('MNT_WORLD', {
-        source: elevationSource,
-    });
+var elevationLayer = new itowns.ElevationLayer('MNT_WORLD', {
+    source: elevationSource,
+});
 
-    view.addLayer(elevationLayer);
+view.addLayer(elevationLayer);
 ```
 
 At this point you should be zoomed on the Tarn gorges (where our 3D dataset will be displayed) and see
@@ -118,21 +118,21 @@ a basemap and a 3D terrain:
 As usual, we first configure a source. Here, we will use a `{@link C3DTilesSource}` for which it is as simple as giving the url of the dataset to display.
 
 ```js
-    const pointCloudSource = new itowns.C3DTilesSource({
-        url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/' +
-        'master/3DTiles/lidar-hd-gorges-saint-chely-tarn/tileset.json',
-    });
+const pointCloudSource = new itowns.C3DTilesSource({
+    url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/' +
+    'master/3DTiles/lidar-hd-gorges-saint-chely-tarn/tileset.json',
+});
 ```
 
 Then, we create the `{@link C3DTilesLayer}` by giving it and `id`, the `source` and the `view`.
 And finally we add it to the `{@link GlobeView}` by using the generic method of `{@link View}` to not
-use the `GlobeView` subdivision (see [the 3D Tiles textured buildings tutorial](@tutorial 3DTiles-mesh-b3dm) for more information). 
+use the `GlobeView` subdivision (see [the 3D Tiles textured buildings tutorial]{@tutorial 3DTiles-mesh-b3dm} for more information). 
 
 ```js
-    const pointCloudLayer = new itowns.C3DTilesLayer('gorges', {
-        source: pointCloudSource,
-    }, view);
-    itowns.View.prototype.addLayer.call(view, pointCloudLayer);
+const pointCloudLayer = new itowns.C3DTilesLayer('gorges', {
+    source: pointCloudSource,
+}, view);
+itowns.View.prototype.addLayer.call(view, pointCloudLayer);
 ```
 
 At this point, you should see the point cloud displayed:
@@ -152,13 +152,13 @@ the `onTileContentLoaded` callback of `{@link C3DTilesLayer}` that is called for
 First, we create a function to update the size of the point:
 
 ```js
-    function updatePointCloudSize(tileContent) {
-        tileContent.traverse(function (obj) {
-            if (obj.isPoints) {
-                obj.material.size = 3.0;
-            }
-        });
-    }
+function updatePointCloudSize(tileContent) {
+    tileContent.traverse(function (obj) {
+        if (obj.isPoints) {
+            obj.material.size = 3.0;
+        }
+    });
+}
 ```
 
 In this function, we traverse the `tileContent` hierarchy until we find the threejs `Points` object with `obj.isPoints`. Then, we change the size of the threejs `PointMaterial` material. You can refer
@@ -167,23 +167,23 @@ to threejs documentation for more information on `Object3D`, `Group`, `Points` a
 Then, we just need to pass this callback to the `{@link C3DTilesLayer}` constructor:
 
 ```js
-    onTileContentLoaded: updatePointCloudSize
+onTileContentLoaded: updatePointCloudSize
 ```
 
 The constructor of the `{@link C3DTilesLayer}` therefore becomes:
 
 ```js
-    const pointCloudLayer = new itowns.C3DTilesLayer('gorges', {
-        source: pointCloudSource,
-        onTileContentLoaded: updatePointCloudSize
-    }, view);
+const pointCloudLayer = new itowns.C3DTilesLayer('gorges', {
+    source: pointCloudSource,
+    onTileContentLoaded: updatePointCloudSize
+}, view);
 ```
 
 If you zoom in to the points, you can now see that they are bigger:
 
 ![3D tiles small points](images/3DTiles-point-cloud-pnts-4.png)
 
-Not that you can use this callback to change the style of any 3D Tiles dataset (even meshes) and to change any style property of the dataset.
+Note that you can use this callback to change the style of any 3D Tiles dataset (even meshes) and to change any style property of the dataset.
 
 ## Result
 
@@ -295,4 +295,4 @@ The full code to achieve this result is:
         </script>
     </body>
 </html>
-```
+```
diff --git a/docs/tutorials/Vector-data-on-ground.md b/docs/tutorials/Vector-data-on-ground.md
@@ -49,7 +49,8 @@ We need to change the starting position to something more appropriate.
                 name: 'ORTHOIMAGERY.ORTHOPHOTOS',
                 tileMatrixSet: 'PM',
                 format: 'image/jpeg',
-            })
+            });
+
             // Create the ortho-images ColorLayer and add it to the view
             var orthoLayer = new itowns.ColorLayer('Ortho', {
                 source: orthoSource,
@@ -234,7 +235,8 @@ By reaching here, you are now able to display simple vector data projected on th
                 name: 'ORTHOIMAGERY.ORTHOPHOTOS',
                 tileMatrixSet: 'PM',
                 format: 'image/jpeg',
-            })
+            });
+
             // Create the ortho-images ColorLayer and add it to the view
             var orthoLayer = new itowns.ColorLayer('Ortho', {
                 source: orthoSource,