example(Widget): add an example of minimap widget

iTowns · Jan 31, 2022 · 2b89f83 · 2b89f83
1 parent 6d82c74
commit 2b89f83
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 1 deletion.
diff --git a/examples/config.json b/examples/config.json
@@ -79,7 +79,8 @@
     },
 
     "Widgets": {
-        "widgets_navigation": "Navigation"
+        "widgets_navigation": "Navigation",
+        "widgets_minimap": "Minimap"
     },
 
     "Plugins": {

diff --git a/examples/widgets_minimap.html b/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>