itowns 2.36.2 → 2.37.0

package/examples/source_file_geojson_raster.html

@@ -57,8 +57,8 @@
             itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
 
 
-            // Display the content of a GeoJSON on terrain with ColorLayer and FileSource.
-            // The GeoJSON is loaded from url, set in FileSource
+            // Display the content of two GeoJSON files on terrain with ColorLayer and FileSource.
+            // The GeoJSONs are loaded from url, set in FileSource
 
             // Declare the source for the data on Ariege area
             const ariegeSource = new itowns.FileSource({
@@ -85,37 +85,18 @@
             view.addLayer(ariegeLayer).then(FeatureToolTip.addLayer);
 
 
-            // Display the content of a GeoJSON on terrain with ColorLayer and FileSource.
-            // The GeoJSON content is fetched from the file, then parsed and finally passed into FileSource data.
-            // The process is decomposed so that the fetching and parsing steps are visible.
-
-            // Fetch data from the GeoJSON file.
-            // Should you implement a custom fetcher, it would need to be called here.
-            itowns.Fetcher.json(
-                'https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/66-pyrenees-orientales/departement-66-pyrenees-orientales.geojson'
-            ).then(function _(geojson) {
-                // Parses the fetched data into an itowns 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.
-                // The second parameter of the `parse` method we use here defines options for the transformation from
-                // data to FeatureCollection.
-                return itowns.GeoJsonParser.parse(geojson, {
-                    // 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(function _(features) {
-                // Create a FileSource from the parsed FeatureCollection.
-                var pyoSource = new itowns.FileSource({ features });
-
-                var pyoStyle = new itowns.Style({
+            // Declare the source for the data on Pyrenees Orientales area
+            const pyoSource = new itowns.FileSource({
+                url: 'https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/66-pyrenees-orientales/departement-66-pyrenees-orientales.geojson',
+                crs: 'EPSG:4326',
+                format: 'application/json',
+            });
+            // Create a ColorLayer for the Pyrenees Orientales area
+            const pyoLayer = new itowns.ColorLayer('pyrenees-orientales', {
+                name: 'pyrenees-orientales',
+                transparent: true,
+                source: pyoSource,
+                style: new itowns.Style({
                     fill: {
                         pattern: 'images/cross.png',
                         opacity: 0.8,
@@ -123,21 +104,16 @@
                     stroke: {
                         color:'IndianRed',
                     },
-                });
+                }),
+            });
+            // Add The Pyrennees Orientales ColorLayer to the view and grant it a tooltip
+            view.addLayer(pyoLayer).then(FeatureToolTip.addLayer);
 
-                // Create a ColorLayer to display the FeatureCollection.
-                var pyoLayer = new itowns.ColorLayer('pyrenees-orientales', {
-                    name: 'pyrenees-orientales',
-                    transparent: true,
-                    source: pyoSource,
-                    style: pyoStyle,
-                });
 
-                return view.addLayer(pyoLayer);
-            }).then(FeatureToolTip.addLayer).then(() => {
-                // Center the camera on the data extents
+            // Center the camera on the data extents
+            view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
                 const layersExtent = ariegeSource.extent.clone();
-                layersExtent.union(view.getLayerById('pyrenees-orientales').source.extent);
+                layersExtent.union(pyoSource.extent);
                 view.controls.lookAtCoordinate(layersExtent, false);
             });
 

package/examples/source_file_gpx_raster.html

@@ -57,45 +57,37 @@
             itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
             itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
 
-            // Parse and Convert by iTowns
-            itowns.Fetcher.xml('https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/ULTRA2009.gpx')
-                .then(function _(gpx) {
-                    var gpxStyle = new itowns.Style({
-                        zoom: {
-                            min: 9,
-                        },
-                        stroke: {
-                            color: 'red',
-                        },
-                        point: {
-                            color: 'white',
-                            line: 'red',
-                        },
-                        text: {
-                            field: '{name}',
-                            transform: 'uppercase',
-                            font: ['Arial', 'sans-serif'],
-                            haloColor: 'white',
-                            haloWidth: 1,
-                        },
-                    });
 
-                    var gpxSource = new itowns.FileSource({
-                        fetchedData: gpx,
-                        crs: 'EPSG:4326',
-                        parser: itowns.GpxParser.parse,
-                    });
+            const gpxSource = new itowns.FileSource({
+                url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/ULTRA2009.gpx',
+                crs: 'EPSG:4326',
+                format: 'application/gpx',
+            });
 
-                    var gpxLayer = new itowns.ColorLayer('Gpx', {
-                        name: 'Ultra 2009',
-                        transparent: true,
-                        source: gpxSource,
-                        style: gpxStyle,
-                        addLabelLayer: true,
-                    });
+            const gpxStyle = new itowns.Style({
+                zoom: { min: 9 },
+                stroke: { color: 'red' },
+                point: {
+                    color: 'white',
+                    line: 'red',
+                },
+                text: {
+                    field: '{name}',
+                    transform: 'uppercase',
+                    font: ['Arial', 'sans-serif'],
+                    haloColor: 'white',
+                    haloWidth: 1,
+                },
+            });
+
+            const gpxLayer = new itowns.ColorLayer('Gpx', {
+                source: gpxSource,
+                style: gpxStyle,
+                addLabelLayer: true,
+            });
+
+            view.addLayer(gpxLayer);
 
-                    return view.addLayer(gpxLayer);
-                });
 
             debug.createTileDebugUI(menuGlobe.gui, view);
         </script>

package/examples/source_file_kml_raster.html

@@ -60,8 +60,7 @@
             var kmlSource = new itowns.FileSource({
                 url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/croquis.kml',
                 crs: 'EPSG:4326',
-                fetcher: itowns.Fetcher.xml,
-                parser: itowns.KMLParser.parse,
+                format: 'application/kml',
             });
 
             var kmlStyle = new itowns.Style({
@@ -78,8 +77,6 @@
             });
 
             var kmlLayer = new itowns.ColorLayer('Kml', {
-                name: 'kml',
-                transparent: true,
                 source: kmlSource,
                 style: kmlStyle,
                 addLabelLayer: true,

package/examples/source_file_shapefile.html

@@ -25,7 +25,7 @@
             // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
             var viewerDiv = document.getElementById('viewerDiv');
 
-            // Instanciate iTowns GlobeView*
+            // Instantiate iTowns GlobeView*
             var view = new itowns.GlobeView(viewerDiv, placement);
             var menuGlobe = new GuiTools('menuDiv', view);
 
@@ -41,47 +41,52 @@
                 view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
             });
 
-            // Load all the necessary files for a shapefile, parse them and
-            // display them.
-            itowns.Fetcher.multiple('https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/shapefile/velib-disponibilite-en-temps-reel', {
-                arrayBuffer: ['shp', 'dbf', 'shx'],
-                text: ['prj'],
-            }).then(function _(res) {
-                return itowns.ShapefileParser.parse(res, {
+
+
+            // As there is no Shapefile fetcher directly bundled within iTowns, we need to specify a method to fetch data.
+            // We use here `multiple` fetcher, which can fetch multiple files within multiple formats.
+            itowns.Fetcher.multiple(
+                'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/shapefile/velib-disponibilite-en-temps-reel',
+                {
+                    // fetch all files whose name match the `url` parameter value, and whose format is either `shp`,
+                    // `dbf`, `shx` or `prj`.
+                    arrayBuffer: ['shp', 'dbf', 'shx'],
+                    text: ['prj'],
+                },
+            ).then((fetched) => {
+                // Once our Shapefile data is fetched, we can parse it by running itowns built-in Shapefile parser.
+                return itowns.ShapefileParser.parse(fetched, {
+                    // Options indicating how the features should be built from data.
                     out: {
+                        // Specitfy the crs to convert the input coordinates to.
                         crs: view.tileLayer.extent.crs,
-                    }
-                });
-            }).then(function _(features) {
-                var velibSource = new itowns.FileSource({ features });
-
-                var velibStyle = new itowns.Style({
-                    zoom: { min: 10, max: 20 },
-                    point: {
-                        color: 'white',
-                        line: 'green',
-                    },
-                    text: {
-                        field: '{name}\n(id: {station_id})',
-                        size: 14,
-                        haloColor: 'white',
-                        haloWidth: 1,
-                        font: ['monospace'],
                     },
                 });
+            }).then((parsed) => {
+                // We can then instantiate a FileSource, passing the parsed data,
+                // and create a Layer bound to this source.
+                const velibSource = new itowns.FileSource({ features: parsed });
 
-                var velibLayer = new itowns.ColorLayer('velib', {
+                return view.addLayer(new itowns.ColorLayer('velib', {
                     source: velibSource,
-                    style: velibStyle,
+                    style: new itowns.Style({
+                        zoom: { min: 10, max: 20 },
+                        point: { color: 'white', line: 'green' },
+                        text: {
+                            field: '{name}\n(id: {station_id})',
+                            size: 14,
+                            haloColor: 'white',
+                            haloWidth: 1,
+                            font: ['monospace'],
+                        }
+                    }),
                     addLabelLayer: true,
-                });
-
-                debug.createTileDebugUI(menuGlobe.gui, view);
-
-                return view.addLayer(velibLayer);
-            }).then(function _(layer) {
+                }));
+            }).then((layer => {
+                // Finally, we generate tooltip for when the mouse hovers the data displayed within our created layer.
                 FeatureToolTip.addLayer(layer, { filterAllProperties: false });
-            });
+            }));
+
         </script>
     </body>
 </html>

package/examples/source_stream_wfs_25d.html

@@ -163,13 +163,19 @@
             view.addLayer(lyonTclBusLayer);
 
             function colorBuildings(properties) {
-                if (properties.geojson.id.indexOf('bati_remarquable') === 0) {
-                    return color.set(0x5555ff);
+                if (properties.usage_1 === 'Résidentiel') {
+                    return color.set(0xFDFDFF);
+                } else if (properties.usage_1 === 'Annexe') {
+                    return color.set(0xC6C5B9);
+                } else if (properties.usage_1 === 'Commercial et services') {
+                    return color.set(0x62929E);
+                } else if (properties.usage_1 === 'Religieux') {
+                    return color.set(0x393D3F);
+                } else if (properties.usage_1 === 'Sportif') {
+                    return color.set(0x546A7B);
                 }
-                if (properties.geojson.id.indexOf('bati_industriel') === 0) {
-                    return color.set(0xff5555);
-                }
-                return color.set(0xeeeeee);
+
+                return color.set(0x555555);
             }
 
             function extrudeBuildings(properties) {
@@ -177,7 +183,7 @@
             }
 
             function altitudeBuildings(properties) {
-                return properties.z_min - properties.hauteur;
+                return properties.altitude_minimale_sol;
             }
 
             meshes = [];
@@ -203,9 +209,9 @@
             view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, scaler);
 
             var wfsBuildingSource = new itowns.WFSSource({
-                url: 'https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wfs?',
+                url: 'https://wxs.ign.fr/topographie/geoportail/wfs?',
                 version: '2.0.0',
-                typeName: 'BDTOPO_BDD_WLD_WGS84G:bati_remarquable,BDTOPO_BDD_WLD_WGS84G:bati_indifferencie,BDTOPO_BDD_WLD_WGS84G:bati_industriel',
+                typeName: 'BDTOPO_V3:batiment',
                 crs: 'EPSG:4326',
                 ipr: 'IGN',
                 format: 'application/json',
@@ -282,10 +288,12 @@
                     properties = intersects[0].object.feature.geometries[batchId].properties;
                     Object.keys(properties).map(function (objectKey) {
                         var value = properties[objectKey];
-                        var key = objectKey.toString();
-                        if (key[0] !== '_' && key !== 'geometry_name') {
-                            info = value.toString();
-                            htmlInfo.innerHTML +='<li><b>' + key + ': </b>' + info + '</li>';
+                        if (value) {
+                            var key = objectKey.toString();
+                            if (key[0] !== '_' && key !== 'geometry_name') {
+                                info = value.toString();
+                                htmlInfo.innerHTML +='<li><b>' + key + ': </b>' + info + '</li>';
+                            }
                         }
                     });
                     return properties;

package/examples/source_stream_wfs_3d.html

@@ -127,16 +127,23 @@
             view.addLayer(lyonTclBusLayer);
 
             function colorBuildings(properties) {
-                if (properties.geojson.id.indexOf('bati_remarquable') === 0) {
-                    return color.set(0x5555ff);
-                } else if (properties.geojson.id.indexOf('bati_industriel') === 0) {
-                    return color.set(0xff5555);
+                if (properties.usage_1 === 'Résidentiel') {
+                    return color.set(0xFDFDFF);
+                } else if (properties.usage_1 === 'Annexe') {
+                    return color.set(0xC6C5B9);
+                } else if (properties.usage_1 === 'Commercial et services') {
+                    return color.set(0x62929E);
+                } else if (properties.usage_1 === 'Religieux') {
+                    return color.set(0x393D3F);
+                } else if (properties.usage_1 === 'Sportif') {
+                    return color.set(0x546A7B);
                 }
-                return color.set(0xeeeeee);
+
+                return color.set(0x555555);
             }
 
             function altitudeBuildings(properties) {
-                return properties.z_min - properties.hauteur;
+                return properties.altitude_minimale_sol;
             }
 
             function extrudeBuildings(properties) {
@@ -167,9 +174,9 @@
             view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, scaler);
 
             var wfsBuildingSource = new itowns.WFSSource({
-                url: 'https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wfs?',
+                url: 'https://wxs.ign.fr/topographie/geoportail/wfs?',
                 version: '2.0.0',
-                typeName: 'BDTOPO_BDD_WLD_WGS84G:bati_remarquable,BDTOPO_BDD_WLD_WGS84G:bati_indifferencie,BDTOPO_BDD_WLD_WGS84G:bati_industriel',
+                typeName: 'BDTOPO_V3:batiment',
                 crs: 'EPSG:4326',
                 ipr: 'IGN',
                 format: 'application/json',
@@ -228,10 +235,12 @@
 
                         Object.keys(properties).map(function (objectKey) {
                             var value = properties[objectKey];
-                            var key = objectKey.toString();
-                            if (key[0] !== '_' && key !== 'geometry_name') {
-                                info = value.toString();
-                                htmlInfo.innerHTML +='<li><b>' + key + ': </b>' + info + '</li>';
+                            if (value) {
+                                var key = objectKey.toString();
+                                if (key[0] !== '_' && key !== 'geometry_name') {
+                                    info = value.toString();
+                                    htmlInfo.innerHTML +='<li><b>' + key + ': </b>' + info + '</li>';
+                                }
                             }
                         });
                     }

package/examples/source_stream_wfs_raster.html

@@ -60,9 +60,9 @@
             }
 
             var wfsBuildingSource = new itowns.WFSSource({
-                url: 'https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wfs?',
+                url: 'https://wxs.ign.fr/topographie/geoportail/wfs?',
                 version: '2.0.0',
-                typeName: 'BDTOPO_BDD_WLD_WGS84G:bati_remarquable,BDTOPO_BDD_WLD_WGS84G:bati_indifferencie,BDTOPO_BDD_WLD_WGS84G:bati_industriel',
+                typeName: 'BDTOPO_V3:batiment',
                 crs: 'EPSG:4326',
                 extent: {
                     west: 4.568,
@@ -74,31 +74,31 @@
                 format: 'application/json',
             });
 
+            function colorBuildings(properties) {
+                if (properties.usage_1 === 'Résidentiel') {
+                    return '#FDFDFF';
+                } else if (properties.usage_1 === 'Annexe') {
+                    return '#C6C5B9';
+                } else if (properties.usage_1 === 'Commercial et services') {
+                    return '#62929E';
+                } else if (properties.usage_1 === 'Religieux') {
+                    return '#393D3F';
+                } else if (properties.usage_1 === 'Sportif') {
+                    return '#546A7B';
+                } else {
+                    return '#555555';
+                }
+            }
+
             var wfsBuildingLayer = new itowns.ColorLayer('wfsBuilding', {
                 transparent: true,
                 style: {
                     fill: {
-                        color: p => {
-                            if (p.geojson.id.indexOf('bati_remarquable') === 0) {
-                                return '#5555ff';
-                            }
-                            if (p.geojson.id.indexOf('bati_industriel') === 0) {
-                                return '#ff5555';
-                            }
-                            return '#eeeeee';
-                        },
+                        color: colorBuildings,
                         opacity: 0.7
                     },
                     stroke: {
-                        color: p => {
-                            if (p.geojson.id.indexOf('bati_remarquable') === 0) {
-                                return '#8888ff';
-                            }
-                            if (p.geojson.id.indexOf('bati_industriel') === 0) {
-                                return '#ff8888';
-                            }
-                            return '#ffffff';
-                        },
+                        color: colorBuildings,
                         width: 2.0,
                     },
                 },

package/examples/view_immersive.html

@@ -80,7 +80,7 @@
 
             function altitudeBuildings(properties) {
                 // I set altitude building 3 meters down, to be sure building is anchored in the ground
-                return properties.z_min - properties.hauteur - 3;
+                return properties.altitude_minimale_sol - 3;
             }
 
             function extrudeBuildings(properties) {
@@ -115,22 +115,21 @@
 
             // when oriented image layer is ready..
             view.addLayer(olayer, view.tileLayer).then(function addWfsLayer(orientedImageLayer) {
-
                 // prepare WFS source for the buildings
                 var wfsBuildingSource = new itowns.WFSSource({
-                    url: 'https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wfs?',
+                    url: 'https://wxs.ign.fr/topographie/geoportail/wfs?',
                     version: '2.0.0',
-                    typeName: 'BDTOPO_BDD_WLD_WGS84G:bati_remarquable,BDTOPO_BDD_WLD_WGS84G:bati_indifferencie,BDTOPO_BDD_WLD_WGS84G:bati_industriel',
-                    crs: 'EPSG:4326',
-                    ipr: 'IGN',
-                    format: 'application/json',
-                    extent: {
-                        west: 2.334,
-                        east: 2.335,
-                        south: 48.849,
-                        north: 48.851,
-                    },
-                });
+                    typeName: 'BDTOPO_V3:batiment',
+                        crs: 'EPSG:4326',
+                        ipr: 'IGN',
+                        format: 'application/json',
+                        extent: {
+                            west: 2.334,
+                            east: 2.335,
+                            south: 48.849,
+                            north: 48.851,
+                        },
+                    });
 
                 // create geometry layer for the buildings
                 var wfsBuildingLayer = new itowns.FeatureGeometryLayer('Buildings', {

package/examples/widgets_minimap.html

@@ -0,0 +1,122 @@
+<html>
+    <head>
+        <title>Itowns - Minimap widget</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">
+
+        <!-- Import stylesheet for itowns Widgets plugin -->
+        <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>
+        <!-- Add a description -->
+        <div id="description">
+            Double click on the minimap to travel to the cursor location.
+        </div>
+
+        <!-- Create a container for itowns viewer -->
+        <div id="viewerDiv"></div>
+
+        <!-- Import iTowns source code -->
+        <script src="../dist/itowns.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/LoadingScreen.js"></script>
+        <script src="js/GUI/GuiTools.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: 6000,
+                tilt: 50,
+            }
+
+            // `viewerDiv` contains iTowns' rendering area (`<canvas>`)
+            const viewerDiv = document.getElementById('viewerDiv');
+
+            // Create a 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'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((config) => {
+                config.source = new itowns.WMTSSource(config.source);
+                view.addLayer(
+                    new itowns.ColorLayer(config.id, config),
+                ).then(debugMenu.addLayerGUI.bind(debugMenu));
+            });
+
+            // 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);
+                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);
+
+
+
+            // ---------- ADD MINIMAP WIDGET : ----------
+
+            // Create a ColorLayer that shall be displayed on the minimap.
+            const minimapColorLayer = new itowns.ColorLayer('minimap', {
+                source: new itowns.VectorTilesSource({
+                    style: 'https://wxs.ign.fr/essentiels/static/vectorTiles/styles/PLAN.IGN/standard.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,
+            });
+
+            // Create a minimap.
+            const minimap = new itowns_widgets.Minimap(view, minimapColorLayer, {
+                cursor: '+',
+                size: 200,
+            });
+
+
+
+            // ---------- ADD INTERACTION WITH MINIMAP : ----------
+
+            // When double-clicking the minimap, travel to the cursor location.
+            const cursorCoordinates = new itowns.Coordinates(minimap.view.referenceCrs);
+            minimap.domElement.addEventListener('dblclick', (event) => {
+                minimap.view.pickCoordinates(event, cursorCoordinates);
+                view.controls.lookAtCoordinate({ coord: cursorCoordinates });
+            });
+
+
+
+            // ---------- DEBUG TOOLS : ----------
+
+            debug.createTileDebugUI(debugMenu.gui, view);
+
+        </script>
+    </body>
+</html>