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

itowns 2.37.0 → 2.38.2

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 (77) hide show

package/README.md +12 -1
package/changelog.md +101 -0
package/dist/debug.js +1 -1
package/dist/debug.js.LICENSE.txt +2 -2
package/dist/debug.js.map +1 -1
package/dist/itowns.js +1 -1
package/dist/itowns.js.LICENSE.txt +2 -2
package/dist/itowns.js.map +1 -1
package/dist/itowns_widgets.js +1 -1
package/dist/itowns_widgets.js.map +1 -1
package/examples/config.json +4 -1
package/examples/css/example.css +21 -1
package/examples/css/widgets.css +118 -6
package/examples/images/code-logo.svg +43 -0
package/examples/index.html +5 -5
package/examples/mars.html +0 -1
package/examples/misc_orthographic_camera.html +7 -19
package/examples/vector_tile_3d_mesh.html +155 -0
package/examples/vector_tile_raster_3d.html +0 -5
package/examples/view_25d_map.html +6 -19
package/examples/view_2d_map.html +6 -19
package/examples/view_3d_map.html +106 -81
package/examples/widgets_minimap.html +3 -1
package/examples/widgets_navigation.html +6 -1
package/examples/widgets_scale.html +96 -0
package/examples/widgets_searchbar.html +124 -0
package/lib/Controls/PlanarControls.js +10 -42
package/lib/Converter/Feature2Mesh.js +225 -61
package/lib/Converter/Feature2Texture.js +4 -3
package/lib/Converter/convertToTile.js +10 -5
package/lib/Core/Feature.js +57 -30
package/lib/Core/MainLoop.js +136 -62
package/lib/Core/TileMesh.js +21 -5
package/lib/Core/View.js +46 -15
package/lib/Layer/FeatureGeometryLayer.js +37 -10
package/lib/Layer/GeoidLayer.js +17 -6
package/lib/Layer/GeometryLayer.js +6 -54
package/lib/Layer/OrientedImageLayer.js +1 -0
package/lib/Layer/RasterLayer.js +3 -1
package/lib/Layer/ReferencingLayerProperties.js +50 -0
package/lib/Main.js +1 -1
package/lib/Parser/B3dmParser.js +3 -2
package/lib/Parser/GeoJsonParser.js +29 -7
package/lib/Parser/VectorTileParser.js +5 -4
package/lib/Parser/deprecated/LegacyGLTFLoader.js +3 -3
package/lib/Process/3dTilesProcessing.js +3 -3
package/lib/Process/FeatureProcessing.js +36 -86
package/lib/Process/LayeredMaterialNodeProcessing.js +9 -3
package/lib/Process/ObjectRemovalHelper.js +4 -0
package/lib/Provider/3dTilesProvider.js +2 -7
package/lib/Provider/Fetcher.js +5 -2
package/lib/Provider/TileProvider.js +18 -2
package/lib/Renderer/Camera.js +33 -12
package/lib/Renderer/ColorLayersOrdering.js +3 -1
package/lib/Renderer/LayeredMaterial.js +32 -7
package/lib/Renderer/OBB.js +8 -4
package/lib/Renderer/OrientedImageMaterial.js +8 -5
package/lib/Renderer/PointsMaterial.js +1 -0
package/lib/Renderer/RenderMode.js +3 -1
package/lib/Renderer/Shader/ShaderChunk.js +5 -1
package/lib/Renderer/c3DEngine.js +9 -6
package/lib/Source/FileSource.js +8 -1
package/lib/Source/VectorTilesSource.js +5 -0
package/lib/Source/WFSSource.js +9 -3
package/lib/ThreeExtended/{WebGL.js → capabilities/WebGL.js} +8 -7
package/lib/ThreeExtended/loaders/GLTFLoader.js +3 -4
package/lib/Utils/DEMUtils.js +3 -1
package/lib/Utils/gui/Main.js +39 -0
package/lib/Utils/gui/Minimap.js +195 -0
package/lib/Utils/gui/Navigation.js +322 -0
package/lib/Utils/gui/Scale.js +154 -0
package/lib/Utils/gui/Searchbar.js +299 -0
package/lib/Utils/gui/Widget.js +119 -0
package/package.json +27 -22
package/examples/images/compass.svg +0 -60
package/examples/images/widget-logo.svg +0 -66
package/examples/js/Scale.js +0 -41

package/examples/misc_orthographic_camera.html CHANGED Viewed

@@ -5,6 +5,7 @@
         <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="css/widgets.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>
@@ -20,13 +21,12 @@
             </ul>
         </div>
         <div id="viewerDiv"></div>
-        <span id="divScaleWidget"> Scale </span>
         <script src="../dist/itowns.js"></script>
         <script src="../dist/debug.js"></script>
+        <script src="../dist/itowns_widgets.js"></script>
         <script src="js/GUI/LoadingScreen.js"></script>
         <script src="js/GUI/GuiTools.js"></script>
-        <script src="js/Scale.js"></script>
         <script type="text/javascript">
         /* global itowns, setupLoadingScreen, GuiTools, debug */
@@ -74,24 +74,12 @@
             });
             view.addLayer(wmsImageryLayer);
-            // Initialize scale :
-            const initialScaleSize = 200;  // in pixel
-            const divScaleWidget = document.getElementById('divScaleWidget');
-            function updateScaleWidget() {
-                let computedScale = roundPixelsFromMeters(view, initialScaleSize);
-                let format = getMetersUnit(computedScale.meters);
-                divScaleWidget.innerHTML = `${format.distance} ${format.unit}`;
-                divScaleWidget.style.width = `${computedScale.pixels}`;
-            }
-            // Updates scale when needed :
-            view.addEventListener(itowns.VIEW_EVENTS.INITIALIZED, function () {
-                // eslint-disable-next-line no-console
-                console.info('View initialized');
-                updateScaleWidget();
+            // Add a scale :
+            const scale = new itowns_widgets.Scale(view, {
+                position: 'bottom-right',
+                translate: { x: -70 },
             });
-            view.addEventListener(itowns.PLANAR_CONTROL_EVENT.MOVED, function () {
-                updateScaleWidget();
-            })
             // request redraw
             view.notifyChange();

package/examples/vector_tile_3d_mesh.html ADDED Viewed

@@ -0,0 +1,155 @@
+<html>
+    <head>
+        <title>Itowns - Globe + vector-tiles 3d</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="css/widgets.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 type="text/javascript">
+            // ---------- CREATE A GlobeView FOR SUPPORTING DATA VISUALIZATION : ----------
+            // Define camera initial position
+            const placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
+                range: 5000,
+                tilt: 45,
+            };
+            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
+            const viewerDiv = document.getElementById('viewerDiv');
+            // Create a GlobeView
+            const view = new itowns.GlobeView(viewerDiv, placement);
+            // Define poles texture
+            view.tileLayer.noTextureColor = new itowns.THREE.Color(0x95c1e1);
+            // Disable atmosphere lighting
+            view.getLayerById('atmosphere').visible = false;
+            view.getLayerById('atmosphere').fog.enable = false;
+            // Setup loading screen and debug menu
+            setupLoadingScreen(viewerDiv, view);
+            const debugMenu = new GuiTools('menuDiv', view, 300);
+            // ---------- DISPLAY CONTEXTUAL DATA : ----------
+            // Add two elevation layers, each with a different level of detail. Each layer's properties are defined in
+            // a json file.
+            function addElevationLayerFromConfig(config) {
+                config.source = new itowns.WMTSSource(config.source);
+                view.addLayer(
+                    new itowns.ElevationLayer(config.id, config),
+                ).then(debugMenu.addLayerGUI.bind(debugMenu));
+            }
+            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
+            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
+            // ---------- DISPLAY VECTOR TILED MAP DATA AS A ColorLayer : ----------
+            // Define the source of the ColorLayer data : a vector tiled map from the geoportail.
+            const mapSource = new itowns.VectorTilesSource({
+                style: 'https://wxs.ign.fr/essentiels/static/vectorTiles/styles/PLAN.IGN/standard.json',
+                // We don't display mountains and parcels related data to ease visualisation. Also, we don't display
+                // buildings related data as it will be displayed in another Layer.
+                filter: (layer) => {
+                    return !layer['source-layer'].includes('bati_surf')
+                        && !layer['source-layer'].includes('oro_')
+                        && !layer['source-layer'].includes('routier_ponc')
+                        && !layer['source-layer'].includes('parcellaire')
+                }
+            });
+            // Create a ColorLayer to support map data.
+            const mapLayer = new itowns.ColorLayer('MVT', {
+                source: mapSource,
+                effect_type: itowns.colorLayerEffects.removeLightColor,
+                effect_parameter: 2.5,
+                addLabelLayer: true,
+                style: new itowns.Style({
+                    text: {
+                        color: '#000000',
+                        haloColor: '#ffffff',
+                        haloWidth: 3,
+                        haloBlur: 2,
+                    }
+                })
+            });
+            // Add the ColorLayer to the scene and to the debug menu.
+            view.addLayer(mapLayer).then(debugMenu.addLayerGUI.bind(debugMenu));
+            // ---------- DISPLAY ORTHO-IMAGES : ----------
+            const ortho = itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
+                config.source = new itowns.WMTSSource(config.source);
+                var layer = new itowns.ColorLayer('Ortho', config);
+                return view.addLayer(layer);
+            });
+            // ---------- DISPLAY VECTOR TILED BUILDING DATA AS 3D MESHES : ----------
+            // Define the source of the building data : those are vector tiled data from the geoportail.
+            const buildingsSource = new itowns.VectorTilesSource({
+                style: 'https://wxs.ign.fr/essentiels/static/vectorTiles/styles/PLAN.IGN/standard.json',
+                // We only want to display buildings related data.
+                filter: (layer) => {
+                    return layer['source-layer'].includes('bati_surf')
+                        && layer.paint["fill-color"];
+                },
+            });
+            // Create a FeatureGeometryLayer to support building data.
+            var buildingsLayer = new itowns.FeatureGeometryLayer('VTBuilding',{
+                source: buildingsSource,
+                zoom: { min: 15 },
+                accurate: false,
+                style: new itowns.Style({
+                    fill: {
+                        base_altitude: (p) => p.alti_sol || 0,
+                        extrusion_height: (p) => p.hauteur || 0,
+                    }
+                })
+            });
+            // Add the FeatureGeometryLayer to the scene and to the debug menu.
+            view.addLayer(buildingsLayer).then((layer) => {
+                const gui = debug.GeometryDebug.createGeometryDebugUI(debugMenu.gui, view, layer);
+                debug.GeometryDebug.addWireFrameCheckbox(gui, view, layer);
+            })
+            // ---------- DEBUG TOOLS : ----------
+            debug.createTileDebugUI(debugMenu.gui, view);
+            view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
+                ortho.then(function () {
+                    itowns.ColorLayersOrdering.moveLayerToIndex(view, 'Ortho', 0);
+                }).catch(console.error);
+            });
+        </script>
+    </body>
+</html>

package/examples/vector_tile_raster_3d.html CHANGED Viewed

@@ -47,11 +47,6 @@
                 return view.addLayer(layer);
             }));
-            // Add a vector tile layer
-            function inter(z) {
-                return z - (z % 5);
-            }
             // Define a VectorTilesSource to load Vector Tiles data from the geoportail
             var mvtSource = new itowns.VectorTilesSource({
                 style: 'https://wxs.ign.fr/essentiels/static/vectorTiles/styles/PLAN.IGN/standard.json',

package/examples/view_25d_map.html CHANGED Viewed

@@ -5,6 +5,7 @@
         <meta charset="UTF-8">
         <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="css/widgets.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>
@@ -23,13 +24,12 @@
             </ul>
         </div>
         <div id="viewerDiv" class="viewer"></div>
-        <span id="divScaleWidget"> Scale </span>
         <script src="../dist/itowns.js"></script>
         <script src="js/GUI/LoadingScreen.js"></script>
         <script src="../dist/debug.js"></script>
+        <script src="../dist/itowns_widgets.js"></script>
         <script src="js/GUI/GuiTools.js"></script>
-        <script src="js/Scale.js"></script>
         <script type="text/javascript">
             // 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');
@@ -125,23 +125,10 @@
             view.addLayer(wfsCartoLayer);
-            // Initialize scale :
-            const initialScaleSize = 200;  // in pixel
-            const divScaleWidget = document.getElementById('divScaleWidget');
-            function updateScaleWidget() {
-                let computedScale = roundPixelsFromMeters(view, initialScaleSize);
-                let format = getMetersUnit(computedScale.meters);
-                divScaleWidget.innerHTML = `${format.distance} ${format.unit}`;
-                divScaleWidget.style.width = `${computedScale.pixels}`;
-            }
-            // Updates scale when needed :
-            view.addEventListener(itowns.VIEW_EVENTS.INITIALIZED, function () {
-                // eslint-disable-next-line no-console
-                console.info('view initialized');
-                updateScaleWidget();
-            });
-            view.addEventListener(itowns.PLANAR_CONTROL_EVENT.MOVED, function () {
-                updateScaleWidget();
+            // Add a scale :
+            const scale = new itowns_widgets.Scale(view, {
+                position: 'bottom-right',
+                translate: { x: -70 },
             });
             // Request redraw

package/examples/view_2d_map.html CHANGED Viewed

@@ -5,16 +5,16 @@
         <meta charset="UTF-8">
         <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="css/widgets.css">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
     <body>
         <div id="viewerDiv"></div>
-        <span id="divScaleWidget"> Scale </span>
         <script src="../dist/itowns.js"></script>
+        <script src="../dist/itowns_widgets.js"></script>
         <script src="js/GUI/LoadingScreen.js"></script>
-        <script src="js/Scale.js"></script>
         <script type="text/javascript">
             // # Orthographic viewer
@@ -67,24 +67,11 @@
             view.addLayer(opensmLayer);
-            // Initialize scale :
-            const initialScaleSize = 200;  // in pixel
-            const divScaleWidget = document.getElementById('divScaleWidget');
-            function updateScaleWidget() {
-                let computedScale = roundPixelsFromMeters(view, initialScaleSize);
-                let format = getMetersUnit(computedScale.meters);
-                divScaleWidget.innerHTML = `${format.distance} ${format.unit}`;
-                divScaleWidget.style.width = `${computedScale.pixels}`;
-            }
-            // Updates scale when needed :
-            view.addEventListener(itowns.VIEW_EVENTS.INITIALIZED, function () {
-                // eslint-disable-next-line no-console
-                console.info('View initialized');
-                updateScaleWidget();
+            // Add a scale :
+            const scale = new itowns_widgets.Scale(view, {
+                position: 'bottom-right',
+                translate: { x: -70 },
             });
-            view.addEventListener(itowns.PLANAR_CONTROL_EVENT.MOVED, function () {
-                updateScaleWidget();
-            })
             // Request redraw
             view.notifyChange();

package/examples/view_3d_map.html CHANGED Viewed

@@ -3,130 +3,155 @@
         <title>Itowns - Globe</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="css/widgets.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"></div>
-        <span id="divScaleWidget"> Scale </span>
-        <div id="miniDiv"></div>
-        <script src="js/GUI/GuiTools.js"></script>
+        <!-- Import iTowns source code -->
         <script src="../dist/itowns.js"></script>
-        <script src="js/GUI/LoadingScreen.js"></script>
         <script src="../dist/debug.js"></script>
+        <!-- Import iTowns Widgets plugin -->
+        <script src="../dist/itowns_widgets.js"></script>
+        <!-- Import iTowns LoadingScreen and GuiTools plugins -->
+        <script src="js/GUI/GuiTools.js"></script>
+        <script src="js/GUI/LoadingScreen.js"></script>
         <script type="text/javascript">
-            // # Simple Globe viewer
-            // Define initial camera position
-            var placement = {
+            // ---------- CREATE A GlobeView FOR SUPPORTING DATA VISUALIZATION : ----------
+            // Define camera initial position
+            const placement = {
                 coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
                 range: 25000000,
             }
-            var miniView;
-            var minDistance = 10000000;
-            var maxDistance = 30000000;
             // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
-            var viewerDiv = document.getElementById('viewerDiv');
-            var miniDiv = document.getElementById('miniDiv');
+            const viewerDiv = document.getElementById('viewerDiv');
+            // Create a GlobeView
+            const view = new itowns.GlobeView(viewerDiv, placement);
-            // Instanciate iTowns GlobeView*
-            var view = new itowns.GlobeView(viewerDiv, placement);
+            // Setup loading screen and debug menu
             setupLoadingScreen(viewerDiv, view);
+            const debugMenu = new GuiTools('menuDiv', view);
-            // Dont' instance mini viewer if it's Test env
-            miniView = new itowns.GlobeView(miniDiv, placement, {
-                // `limit globe' subdivision level:
-                // we're don't need a precise globe model
-                // since the mini globe will always be seen from a far point of view (see minDistance above)
-                maxSubdivisionLevel: 2,
-                // Don't instance default controls since miniview's camera will be synced
-                // on the main view's one (see view.addFrameRequester)
-                noControls: true,
-            });
-            // Set a 0 alpha clear value (instead of the default '1')
-            // because we want a transparent background for the miniglobe view to be able
-            // to see the main view "behind"
-            miniView.mainLoop.gfxEngine.renderer.setClearColor(0x000000, 0);
-            // update miniview's camera with the view's camera position
-            view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.AFTER_RENDER, function updateMiniView() {
-                // clamp distance camera from globe
-                var distanceCamera = view.camera.camera3D.position.length();
-                var distance = Math.min(Math.max(distanceCamera * 1.5, minDistance), maxDistance);
-                var camera = miniView.camera.camera3D;
-                var cameraTargetPosition = view.controls.getCameraTargetPosition();
-                // Update target miniview's camera
-                camera.position.copy(cameraTargetPosition).setLength(distance);
-                camera.lookAt(cameraTargetPosition);
-                miniView.notifyChange(camera);
-            });
+            // ---------- DISPLAY ORTHO-IMAGES : ----------
-            // Add one imagery layer to the scene and the miniView
-            // This layer is defined in a json file but it could be defined as a plain js
-            // object. See Layer* for more info.
+            // 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);
-                var layer = new itowns.ColorLayer('Ortho', config);
-                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
-                var miniLayer = new itowns.ColorLayer('OrthoMini', config);
-                miniView.addLayer(miniLayer);
+                view.addLayer(
+                    new itowns.ColorLayer('Ortho', config),
+                ).then(debugMenu.addLayerGUI.bind(debugMenu));
             });
-            // Add two elevation layers.
-            // These will deform iTowns globe geometry to represent terrain elevation.
+            // ---------- DISPLAY A DIGITAL ELEVATION MODEL : ----------
+            // Add two elevation 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);
-                var layer = new itowns.ElevationLayer(config.id, config);
-                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
+                view.addLayer(
+                    new itowns.ElevationLayer(config.id, config),
+                ).then(debugMenu.addLayerGUI.bind(debugMenu));
             }
             itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
             itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
-            var menuGlobe = new GuiTools('menuDiv', view);
-            var divScaleWidget = document.getElementById('divScaleWidget');
-            function updateScaleWidget() {
-                var value = view.getPixelsToMeters(200);
-                value = Math.floor(value);
-                var digit = Math.pow(10, value.toString().length - 1);
-                value = Math.round(value / digit) * digit;
-                var pix = view.getMetersToPixels(value);
-                var unit = 'm';
-                if (value >= 1000) {
-                    value /= 1000;
-                    unit = 'km';
-                }
-                divScaleWidget.innerHTML = `${value} ${unit}`;
-                divScaleWidget.style.width = `${pix}px`;
-            }
-            // Listen for globe full initialisation event
-            view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
-                // eslint-disable-next-line no-console
-                console.info('Globe initialized');
-                updateScaleWidget();
+            // ---------- ADD SOME WIDGETS : ----------
+            // ADD A SCALE :
+            const scale = new itowns_widgets.Scale(view, { position: 'bottom-right', translate: { x: -80 } });
+            // ADD A MINIMAP :
+            const minimap = new itowns_widgets.Minimap(
+                view,
+                new itowns.ColorLayer('minimap', {
+                    source: new itowns.VectorTilesSource({
+                        style: 'https://wxs.ign.fr/essentiels/static/vectorTiles/styles/PLAN.IGN/gris.json',
+                        // We don't display mountains and plot related data to ease visualisation
+                        filter: (layer) => !layer['source-layer'].includes('oro_')
+                            && !layer['source-layer'].includes('parcellaire'),
+                    }),
+                    addLabelLayer: true,
+                }),
+                { cursor: '+' },
+            );
+            // ADD NAVIGATION TOOLS :
+            const navigation = new itowns_widgets.Navigation(view, {
+                position: 'bottom-right',
+                translate: { y: -40 },
             });
-            view.controls.addEventListener(itowns.CONTROL_EVENTS.RANGE_CHANGED, () => {
-                updateScaleWidget();
+            // ADD A SEARCH BAR :
+            // You can find more precise explanation on searchbar options in the doc
+            // (http://www.itowns-project.org/itowns/docs/#api/Widgets/Searchbar) and in the searchbar example
+            // (https://www.itowns-project.org/itowns/examples/#widgets_searchbar)
+            // Define options for geocoding service that should be used by the searchbar.
+            const geocodingOptions = {
+                url: new URL(
+                    'https://wxs.ign.fr/ayxvok72rcocdyn8xyvy32og/ols/apis/completion?text=&type=StreetAddress,' +
+                    'PositionOfInterest',
+                ),
+                parser: (response) => {
+                    const map = new Map();
+                    response.results.forEach(location => {
+                        map.set(location.fulltext, new itowns.Coordinates('EPSG:4326', location.x, location.y));
+                    });
+                    return map;
+                },
+                onSelected: (coordinates) => {
+                    view.controls.lookAtCoordinate({ coord: coordinates, range: 20000, tilt: 45, heading: 0 });
+                },
+            }
+            // Create the searchbar
+            const searchbar = new itowns_widgets.Searchbar(view, geocodingOptions, {
+                maxSuggestionNumber: 15,
+                placeholder: 'Search a location in France',
+                position: 'top-right',
             });
+            // ---------- DISPLAY ATMOSPHERIC LIGHTING : ----------
             const atmosphere = view.getLayerById('atmosphere');
             atmosphere.setRealisticOn(!view.isDebugMode);
-            const cRL = menuGlobe.addGUI('RealisticLighting', !view.isDebugMode, function (v) {
+            // ---------- DEBUG TOOLS : ----------
+            // Toggle atmospheric lighting on/off.
+            const cRL = debugMenu.addGUI('RealisticLighting', !view.isDebugMode, function (v) {
                 atmosphere.setRealisticOn(v);
                 view.notifyChange(atmosphere);
             });
-            window.addEventListener('resize', updateScaleWidget);
+            debug.createTileDebugUI(debugMenu.gui, view);
-            debug.createTileDebugUI(menuGlobe.gui, view);
         </script>
     </body>
 </html>

package/examples/widgets_minimap.html CHANGED Viewed

@@ -8,7 +8,9 @@
         <link rel="stylesheet" type="text/css" href="css/example.css">
         <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
-        <!-- Import stylesheet for itowns Widgets plugin -->
+        <!-- Import stylesheet for itowns Widgets plugin. This stylesheet is included in the bundles if you downloaded
+        them, or it can be found in `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it
+        can be found here : https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css -->
         <link rel="stylesheet" type="text/css" href="css/widgets.css">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>

package/examples/widgets_navigation.html CHANGED Viewed

@@ -8,7 +8,9 @@
         <link rel="stylesheet" type="text/css" href="css/example.css">
         <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
-        <!-- Import stylesheet for itowns Widgets plugin -->
+        <!-- Import stylesheet for itowns Widgets plugin. This stylesheet is included in the bundles if you downloaded
+        them, or it can be found in `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it
+        can be found here : https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css -->
         <link rel="stylesheet" type="text/css" href="css/widgets.css">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
@@ -83,6 +85,7 @@
             widgets.addButton(
                 'rotate-up',
                 '<p style="font-size: 20px">&#8595</p>',
+                'rotate camera up',
                 () => {
                     view.controls.lookAtCoordinate({
                         tilt: view.controls.getTilt() - 10,
@@ -94,6 +97,7 @@
             widgets.addButton(
                 'rotate-down',
                 '<p style="font-size: 20px">&#8593</p>',
+                'rotate camera down',
                 () => {
                     view.controls.lookAtCoordinate({
                         tilt: view.controls.getTilt() + 10,
@@ -105,6 +109,7 @@
             widgets.addButton(
                 'reset-position',
                 '&#8634',
+                'reset position',
                 () => { view.controls.lookAtCoordinate(placement) },
             );