From ec56fa9d78310afa6d581b5deff0b252266e274e Mon Sep 17 00:00:00 2001
From: mgermerie <73115044+mgermerie@users.noreply.github.com>
Date: Fri, 7 Jan 2022 17:14:53 +0100
Subject: [PATCH] example(Widgets): add a plugin to display widgets

---
 docs/config.json                              |   5 +-
 examples/config.json                          |   2 +-
 examples/css/widgets.css                      | 214 +++++++++++++++++
 examples/images/widget-logo.svg               |  66 +++++
 .../{misc_compass.html => misc_widgets.html}  |  88 +++----
 utils/gui/Main.js                             |   2 +
 utils/gui/Navigation.js                       | 225 ++++++++++++++++++
 webpack.config.js                             |   4 +
 8 files changed, 554 insertions(+), 52 deletions(-)
 create mode 100644 examples/css/widgets.css
 create mode 100644 examples/images/widget-logo.svg
 rename examples/{misc_compass.html => misc_widgets.html} (65%)
 create mode 100644 utils/gui/Main.js
 create mode 100644 utils/gui/Navigation.js

diff --git a/docs/config.json b/docs/config.json
index 7837c876f0..110d51519b 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -124,7 +124,8 @@
             "Plugins": [
                 "DragNDrop",
                 "FeatureToolTip",
-                "TIFFParser"
+                "TIFFParser",
+                "Navigation"
             ]
         },
         "tutorialSections": {
@@ -162,7 +163,7 @@
         }
     },
     "source": {
-        "include": [ "src", "examples/js/plugins" ],
+        "include": [ "src", "examples/js/plugins", "utils/gui" ],
         "exclude": [ "src/ThreeExtended" ]
     },
     "plugins": ["plugins/markdown"]
diff --git a/examples/config.json b/examples/config.json
index be9fcb8e1f..ba9c0f0706 100644
--- a/examples/config.json
+++ b/examples/config.json
@@ -76,7 +76,7 @@
         "misc_custom_controls": "Define custom controls",
         "misc_custom_label": "Custom label popup",
         "misc_camera_traveling": "Camera traveling",
-        "misc_compass": "Display a compass"
+        "misc_widgets": "Display widgets"
     },
 
     "Plugins": {
diff --git a/examples/css/widgets.css b/examples/css/widgets.css
new file mode 100644
index 0000000000..df4a823d60
--- /dev/null
+++ b/examples/css/widgets.css
@@ -0,0 +1,214 @@
+/* ---------- WIDGETS GROUP SETTINGS : ------------------------------------------------------------------------------ */
+
+#widgets {
+    position: absolute;
+    z-index: 10;
+
+    display: flex;
+    align-items: center;
+}
+
+/* Define widget group flex direction according to widget position and direction settings */
+.column-widget.top-widget {
+    flex-direction: column;
+}
+.column-widget.bottom-widget {
+    flex-direction: column-reverse;
+}
+.row-widget.left-widget {
+    flex-direction: row;
+}
+.row-widget.right-widget {
+    flex-direction: row-reverse;
+}
+
+/* Define widget group position according to widget position settings. */
+.top-widget {
+    top: 10px;
+}
+.bottom-widget {
+    bottom: 10px;
+}
+.left-widget {
+    left: 10px;
+}
+.right-widget {
+    right: 10px;
+}
+
+/* Define spacing between each widgets according to position and direction settings. */
+.column-widget.top-widget > *:not(:first-child),
+.column-widget.bottom-widget > *:not(:last-child)  {
+    margin-top: 5px;
+}
+.column-widget.top-widget > *:not(:last-child),
+.column-widget.bottom-widget > *:not(:first-child)  {
+    margin-bottom: 5px;
+}
+.row-widget.left-widget > *:not(:first-child),
+.row-widget.right-widget > *:not(:last-child)  {
+    margin-left: 5px;
+}
+.row-widget.left-widget > *:not(:last-child),
+.row-widget.right-widget > *:not(:first-child)  {
+    margin-right: 5px;
+}
+
+
+
+/* ---------- WIDGET BUTTON BAR : ----------------------------------------------------------------------------------- */
+
+/* Define button-bar flex direction according to widget position and direction settings. */
+#widgets .widget-button-bar {
+    display: flex;
+}
+.column-widget.top-widget .widget-button-bar {
+    flex-direction: column;
+}
+.column-widget.bottom-widget .widget-button-bar {
+    flex-direction: column-reverse;
+}
+.row-widget.left-widget .widget-button-bar {
+    flex-direction: row;
+}
+.row-widget.right-widget .widget-button-bar {
+    flex-direction: row-reverse;
+}
+
+
+
+/* ---------- BUTTONS GENERIC STYLE : ------------------------------------------------------------------------------- */
+
+#widgets .widget-button {
+    background-color: #313336bb;
+    border: 1px solid #222222;
+    padding: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-weight: 900;
+    font-size: 15px;
+}
+#widgets .widget-button:hover {
+    cursor: pointer;
+}
+#widgets .widget-button:active {
+    background-color: #222222;
+}
+
+
+
+/* ---------- BUTTONS SHAPE AND POSITION WITHIN BUTTON-BAR : -------------------------------------------------------- */
+
+#widgets .widget-button-bar > .widget-button {
+    height: 30px;
+    width: 30px;
+
+    color: white;
+}
+
+/* Buttons shape and position within a column direction widget group. */
+.column-widget.top-widget .widget-button-bar > .widget-button:first-child,
+.column-widget.bottom-widget .widget-button-bar > .widget-button:last-child {
+    border-radius: 7px 7px 0 0;
+}
+.column-widget.top-widget .widget-button-bar > .widget-button:last-child,
+.column-widget.bottom-widget .widget-button-bar > .widget-button:first-child {
+    border-radius: 0 0 7px 7px;
+}
+.column-widget.top-widget .widget-button-bar > .widget-button:not(:last-child),
+.column-widget.bottom-widget .widget-button-bar > .widget-button:not(:first-child) {
+    margin-bottom: -1px;
+}
+
+/* Buttons shape and position within a row direction widget group. */
+.row-widget.left-widget .widget-button-bar > .widget-button:first-child,
+.row-widget.right-widget .widget-button-bar > .widget-button:last-child {
+    border-radius: 7px 0 0 7px;
+}
+.row-widget.left-widget .widget-button-bar > .widget-button:last-child,
+.row-widget.right-widget .widget-button-bar > .widget-button:first-child {
+    border-radius: 0 7px 7px 0;
+}
+.row-widget.left-widget .widget-button-bar > .widget-button:not(:last-child),
+.row-widget.right-widget .widget-button-bar > .widget-button:not(:first-child) {
+    margin-right: -1px;
+}
+
+/* Buttons shape and position within a single button button-bar. */
+#widgets .widget-button-bar > .widget-button:only-child {
+    border-radius: 7px;
+}
+
+
+
+/* ---------- SPECIFIC SHAPE AND POSITION FOR ZOOM-IN AND ZOOM-OUT BUTTON-BAR AND BUTTONS : ------------------------- */
+
+#zoom-button-bar {
+    display: flex;
+}
+.column-widget #zoom-button-bar {
+    flex-direction: column;
+}
+.row-widget #zoom-button-bar {
+    flex-direction: row-reverse;
+}
+
+/* Zoom buttons shape and position within a COLUMN direction widget group. */
+.column-widget #zoom-button-bar > .widget-button:first-child {
+    border-radius: 7px 7px 0 0;
+}
+.column-widget #zoom-button-bar > .widget-button:last-child {
+    border-radius: 0 0 7px 7px;
+}
+.column-widget.bottom-widget #zoom-button-bar > .widget-button:not(:last-child) {
+    margin-top: 0;
+    margin-bottom: -1px;
+}
+
+/* Zoom buttons shape and position within a ROW direction widget group. */
+.row-widget #zoom-button-bar > .widget-button:first-child {
+    border-radius: 0 7px 7px 0;
+}
+.row-widget #zoom-button-bar > .widget-button:last-child {
+    border-radius: 7px 0 0 7px;
+}
+.row-widget.left-widget #zoom-button-bar > .widget-button:not(:last-child) {
+    margin-right: 0;
+    margin-left: -1px;
+}
+
+/* Zoom button shape and position if user decides to show only one of the two zoom buttons. */
+#widgets #zoom-button-bar > .widget-button:only-child {
+    border-radius: 7px;
+}
+
+/* Style of zoom buttons content. */
+#widgets .widget-zoom-button-logo {
+    width: 50%;
+    height: 50%;
+
+    background-image: url('../images/widget-logo.svg');
+    background-size: 100%;
+}
+#widgets #zoom-out-logo {
+    background-position: center -100%;
+}
+
+
+
+/* ---------- SPECIFIC COMPASS SETTINGS : --------------------------------------------------------------------------- */
+
+#widgets #compass {
+    width: 60px;
+    height: 60px;
+
+    border-radius: 50%;
+
+    background-image: url('../images/compass.svg');
+    background-repeat: no-repeat;
+    background-size: auto 90%;
+    background-position: center;
+}
diff --git a/examples/images/widget-logo.svg b/examples/images/widget-logo.svg
new file mode 100644
index 0000000000..0441055341
--- /dev/null
+++ b/examples/images/widget-logo.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.2" width="79.01mm" height="158.01mm" viewBox="5500 2100 7901 15801" preserveAspectRatio="xMidYMid" fill-rule="evenodd" stroke-width="28.222" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:presentation="http://sun.com/xmlns/staroffice/presentation" xmlns:smil="http://www.w3.org/2001/SMIL20/" xmlns:anim="urn:oasis:names:tc:opendocument:xmlns:animation:1.0" xml:space="preserve">
+ <defs class="EmbeddedBulletChars">
+  <g id="bullet-char-template-57356" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 580,1141 L 1163,571 580,0 -4,571 580,1141 Z"/>
+  </g>
+  <g id="bullet-char-template-57354" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 8,1128 L 1137,1128 1137,0 8,0 8,1128 Z"/>
+  </g>
+  <g id="bullet-char-template-10146" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 174,0 L 602,739 174,1481 1456,739 174,0 Z M 1358,739 L 309,1346 659,739 1358,739 Z"/>
+  </g>
+  <g id="bullet-char-template-10132" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 2015,739 L 1276,0 717,0 1260,543 174,543 174,936 1260,936 717,1481 1274,1481 2015,739 Z"/>
+  </g>
+  <g id="bullet-char-template-10007" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 0,-2 C -7,14 -16,27 -25,37 L 356,567 C 262,823 215,952 215,954 215,979 228,992 255,992 264,992 276,990 289,987 310,991 331,999 354,1012 L 381,999 492,748 772,1049 836,1024 860,1049 C 881,1039 901,1025 922,1006 886,937 835,863 770,784 769,783 710,716 594,584 L 774,223 C 774,196 753,168 711,139 L 727,119 C 717,90 699,76 672,76 641,76 570,178 457,381 L 164,-76 C 142,-110 111,-127 72,-127 30,-127 9,-110 8,-76 1,-67 -2,-52 -2,-32 -2,-23 -1,-13 0,-2 Z"/>
+  </g>
+  <g id="bullet-char-template-10004" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 285,-33 C 182,-33 111,30 74,156 52,228 41,333 41,471 41,549 55,616 82,672 116,743 169,778 240,778 293,778 328,747 346,684 L 369,508 C 377,444 397,411 428,410 L 1163,1116 C 1174,1127 1196,1133 1229,1133 1271,1133 1292,1118 1292,1087 L 1292,965 C 1292,929 1282,901 1262,881 L 442,47 C 390,-6 338,-33 285,-33 Z"/>
+  </g>
+  <g id="bullet-char-template-9679" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 813,0 C 632,0 489,54 383,161 276,268 223,411 223,592 223,773 276,916 383,1023 489,1130 632,1184 813,1184 992,1184 1136,1130 1245,1023 1353,916 1407,772 1407,592 1407,412 1353,268 1245,161 1136,54 992,0 813,0 Z"/>
+  </g>
+  <g id="bullet-char-template-8226" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 346,457 C 273,457 209,483 155,535 101,586 74,649 74,723 74,796 101,859 155,911 209,963 273,989 346,989 419,989 480,963 531,910 582,859 608,796 608,723 608,648 583,586 532,535 482,483 420,457 346,457 Z"/>
+  </g>
+  <g id="bullet-char-template-8211" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M -4,459 L 1135,459 1135,606 -4,606 -4,459 Z"/>
+  </g>
+  <g id="bullet-char-template-61548" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 173,740 C 173,903 231,1043 346,1159 462,1274 601,1332 765,1332 928,1332 1067,1274 1183,1159 1299,1043 1357,903 1357,740 1357,577 1299,437 1183,322 1067,206 928,148 765,148 601,148 462,206 346,322 231,437 173,577 173,740 Z"/>
+  </g>
+ </defs>
+ <g class="Page">
+  <g class="com.sun.star.drawing.CustomShape">
+   <g id="id3">
+    <rect class="BoundingBox" stroke="none" fill="none" x="5899" y="5100" width="7103" height="1902"/>
+    <path fill="rgb(255,255,255)" stroke="none" d="M 6216,5100 L 6217,5100 C 6161,5100 6107,5115 6058,5142 6010,5170 5970,5210 5942,5258 5915,5307 5900,5361 5900,5417 L 5900,6684 5900,6684 C 5900,6740 5915,6794 5942,6843 5970,6891 6010,6931 6058,6959 6107,6986 6161,7001 6217,7001 L 12684,7001 12684,7001 C 12740,7001 12794,6986 12843,6959 12891,6931 12931,6891 12959,6843 12986,6794 13001,6740 13001,6684 L 13001,5416 13001,5417 13001,5417 C 13001,5361 12986,5307 12959,5258 12931,5210 12891,5170 12843,5142 12794,5115 12740,5100 12684,5100 L 6216,5100 Z"/>
+   </g>
+  </g>
+  <g class="com.sun.star.drawing.CustomShape">
+   <g id="id4">
+    <rect class="BoundingBox" stroke="none" fill="none" x="5500" y="2100" width="7901" height="7901"/>
+   </g>
+  </g>
+  <g class="com.sun.star.drawing.CustomShape">
+   <g id="id5">
+    <rect class="BoundingBox" stroke="none" fill="none" x="8499" y="2499" width="1903" height="7103"/>
+    <path fill="rgb(255,255,255)" stroke="none" d="M 8500,9285 L 8500,9284 C 8500,9340 8515,9394 8542,9443 8570,9491 8610,9531 8658,9559 8707,9586 8761,9601 8817,9601 L 10084,9601 10084,9601 C 10140,9601 10194,9586 10243,9559 10291,9531 10331,9491 10359,9443 10386,9394 10401,9340 10401,9284 L 10401,2817 10401,2817 C 10401,2761 10386,2707 10359,2658 10331,2610 10291,2570 10243,2542 10194,2515 10140,2500 10084,2500 L 8816,2500 8817,2500 8817,2500 C 8761,2500 8707,2515 8658,2542 8610,2570 8570,2610 8542,2658 8515,2707 8500,2761 8500,2817 L 8500,9285 Z"/>
+   </g>
+  </g>
+  <g class="com.sun.star.drawing.CustomShape">
+   <g id="id6">
+    <rect class="BoundingBox" stroke="none" fill="none" x="5899" y="13000" width="7103" height="1902"/>
+    <path fill="rgb(255,255,255)" stroke="none" d="M 6216,13000 L 6217,13000 C 6161,13000 6107,13015 6058,13042 6010,13070 5970,13110 5942,13158 5915,13207 5900,13261 5900,13317 L 5900,14584 5900,14584 C 5900,14640 5915,14694 5942,14743 5970,14791 6010,14831 6058,14859 6107,14886 6161,14901 6217,14901 L 12684,14901 12684,14901 C 12740,14901 12794,14886 12843,14859 12891,14831 12931,14791 12959,14743 12986,14694 13001,14640 13001,14584 L 13001,13316 13001,13317 13001,13317 C 13001,13261 12986,13207 12959,13158 12931,13110 12891,13070 12843,13042 12794,13015 12740,13000 12684,13000 L 6216,13000 Z"/>
+   </g>
+  </g>
+  <g class="com.sun.star.drawing.CustomShape">
+   <g id="id7">
+    <rect class="BoundingBox" stroke="none" fill="none" x="5500" y="10000" width="7901" height="7901"/>
+   </g>
+  </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/examples/misc_compass.html b/examples/misc_widgets.html
similarity index 65%
rename from examples/misc_compass.html
rename to examples/misc_widgets.html
index b1b48d3d22..9b9481e514 100644
--- a/examples/misc_compass.html
+++ b/examples/misc_widgets.html
@@ -1,6 +1,6 @@
 <html>
     <head>
-        <title>Itowns - Compass</title>
+        <title>Itowns - Widgets</title>
 
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,49 +8,24 @@
         <link rel="stylesheet" type="text/css" href="css/example.css">
         <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
 
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
+        <!-- Import stylesheet for itowns Widgets plugin -->
+        <link rel="stylesheet" type="text/css" href="css/widgets.css">
 
-        <!-- Define the style of our compass div -->
-        <style type="text/css">
-            #compass {
-                position: absolute;
-                bottom: 10px;
-                left: 10px;
-                z-index: 10;
-                width: 60px;
-                height: 60px;
-
-                display: flex;
-                justify-content: center;
-                align-items: center;
-
-                border-radius: 50%;
-                background-color: #313336bb;
-                border: solid 0.1em;
-                border-color: #222222;
-            }
-            #compass img {
-                height: 90%;
-            }
-        </style>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
     </head>
     <body>
-
-        <!-- Create a div to support a compass image -->
-        <div id="compass">
-            <img src="images/compass.svg" alt="compass">
-        </div>
-
-
         <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">
 
 
@@ -61,7 +36,6 @@
             const placement = {
                 coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
                 range: 6000,
-                heading: 45,
                 tilt: 50,
             }
 
@@ -101,22 +75,38 @@
 
 
 
-            // ---------- ROTATE THE COMPASS WHEN MOVING THE VIEW CAMERA : ----------
-
-            const compass = document.getElementById('compass');
-
-            // Update compass rotation when the camera is moved.
-            view.addEventListener(itowns.VIEW_EVENTS.CAMERA_MOVED, (event) => {
-                compass.style.transform = `rotate(${-event.heading}deg)`;
-            });
-
-            // Move camera to a 0 degree heading and an 89.5 degrees tilt when clicking the compass.
-            compass.addEventListener('click', () => {
-                view.controls.lookAtCoordinate({
-                    heading: 0,
-                    tilt: 89.5,
-                });
-            });
+            // ---------- ADD WIDGETS MENU : ----------
+
+            const widgets = new itowns_widgets.Navigation(view);
+
+            // Example on how to add a new button to the widgets menu
+            widgets.addButton(
+                'rotate-up',
+                '<p style="font-size: 20px">&#8595</p>',
+                () => {
+                    view.controls.lookAtCoordinate({
+                        tilt: view.controls.getTilt() - 10,
+                        time: 500,
+                    });
+                },
+                'button-bar-rotation',
+            );
+            widgets.addButton(
+                'rotate-down',
+                '<p style="font-size: 20px">&#8593</p>',
+                () => {
+                    view.controls.lookAtCoordinate({
+                        tilt: view.controls.getTilt() + 10,
+                        time: 500,
+                    });
+                },
+                'button-bar-rotation',
+            );
+            widgets.addButton(
+                'reset-position',
+                '&#8634',
+                () => { view.controls.lookAtCoordinate(placement) },
+            );
 
 
 
diff --git a/utils/gui/Main.js b/utils/gui/Main.js
new file mode 100644
index 0000000000..03869a9428
--- /dev/null
+++ b/utils/gui/Main.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as Navigation } from './Navigation';
diff --git a/utils/gui/Navigation.js b/utils/gui/Navigation.js
new file mode 100644
index 0000000000..df08dfb52e
--- /dev/null
+++ b/utils/gui/Navigation.js
@@ -0,0 +1,225 @@
+import { VIEW_EVENTS } from 'Core/View';
+
+
+const DEFAULT_OPTIONS = {
+    parentElement: document.body,
+    displayCompass: true,
+    display3DToggle: true,
+    displayZoomIn: true,
+    displayZoomOut: true,
+    animationDuration: 500,
+    position: 'bottom-left',
+    direction: 'column',
+};
+
+
+/**
+ * A widget menu manager for navigation.
+ *
+ * @property {HTMLElement}  domElement      An html div containing all navigation widgets.
+ * @property {HTMLElement}  parentElement   The parent HTML container of `this.domElement`.
+ */
+class Navigation {
+    /**
+     * @param   {View}          view                                    The iTowns view the navigation should be linked
+                                                                        * to.
+     * @param   {Object}        options                                 The navigation menu optional configuration.
+     * @param   {HTMLElement}   [options.parentElement=document.body]   The parent HTML container of the div which
+                                                                        * contains navigation widgets.
+     * @param   {boolean}       [options.displayCompass=true]           Whether the compass widget should be displayed.
+     * @param   {boolean}       [options.display3DToggle=true]          Whether the navigation should include a widget
+                                                                        * to toggle between top and oblique view.
+     * @param   {boolean}       [options.displayZoomIn=true]            Whether the zoom-in widget should be displayed.
+     * @param   {boolean}       [options.displayZoomOut=true]           Whether the zoom-out widget should be displayed.
+     * @param   {number}        [options.animationDuration=500]         The duration of travel animations, when clicking
+                                                                        * navigation widgets.
+     * @param   {string}        [options.position='bottom-left']        Defines which corner of the `parentElement` the
+                                                                        * navigation menu should be displayed to.
+                                                                        * Possible values are `top-left`, `top-right`,
+                                                                        * `bottom-left` and `bottom-right`. If the input
+                                                                        * value does not match one of these, it will be
+                                                                        * defaulted to `bottom-left`.
+     * @param   {string}        [options.direction='column']            Whether the navigation menu should expand
+                                                                        * horizontally or vertically. Possible values
+                                                                        * are `column` and `row`. If the input value
+                                                                        * does not match one of these, it will be
+                                                                        * defaulted to `column`.
+     * @param   {Object}        [options.translate]                     An optional translation of the navigation menu.
+     * @param   {number}        [options.translate.x=0]                 The navigation menu translation along the page
+                                                                        * x-axis.
+     * @param   {number}        [options.translate.y=0]                 The navigation menu translation along the page
+                                                                        * y-axis.
+     */
+    constructor(view, options = {}) {
+        // ---------- BUILD PROPERTIES ACCORDING TO DEFAULT OPTIONS AND OPTIONS PASSED IN PARAMETERS : ----------
+
+        this.parentElement = options.parentElement || DEFAULT_OPTIONS.parentElement;
+
+        this.direction = options.direction || DEFAULT_OPTIONS.direction;
+        if (!['column', 'row'].includes(this.direction)) {
+            console.warn(
+                '\'direction\' optional parameter for \'Widgets\' constructor is not a valid option. '
+                + `It will be set to '${DEFAULT_OPTIONS.direction}'.`,
+            );
+            this.direction = DEFAULT_OPTIONS.direction;
+        }
+
+        this.position = options.position || DEFAULT_OPTIONS.position;
+        if (!['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(this.position)) {
+            console.warn(
+                '\'position\' optional parameter for \'Widgets\' constructor is not a valid option. '
+                + `It will be set to '${DEFAULT_OPTIONS.position}'.`,
+            );
+            this.position = DEFAULT_OPTIONS.position;
+        }
+
+        this.animationDuration = options.animationDuration === undefined ?
+            DEFAULT_OPTIONS.animationDuration : options.animationDuration;
+
+
+
+        // ---------- CREATE A DomElement WITH id AND classes RELEVANT TO THE WIDGET PROPERTIES : ----------
+
+        // Create a div containing all widgets and add it to its specified parent.
+        this.domElement = document.createElement('div');
+        this.domElement.id = 'widgets';
+        this.parentElement.appendChild(this.domElement);
+
+        // Position widget div according to options.
+        const positionArray = this.position.split('-');
+        this.domElement.classList.add(`${positionArray[0]}-widget`);
+        this.domElement.classList.add(`${positionArray[1]}-widget`);
+        this.domElement.classList.add(`${this.direction}-widget`);
+
+        // Translate widget div according to optional translate parameter.
+        if (options.translate) {
+            this.domElement.style.transform = `translate(${options.translate.x || 0}px, ${options.translate.y || 0}px)`;
+        }
+
+
+
+        // ---------- CREATE THE DEFAULT WIDGETS IF NOT HIDDEN (COMPASS, 3D AND ZOOM BUTTONS) : ----------
+
+        // Add a compass widget if requested.
+        if (options.displayCompass === undefined ? DEFAULT_OPTIONS.displayCompass : options.displayCompass) {
+            this.compass = this.addButton(
+                'compass',
+                '',
+                () => {
+                    view.controls.lookAtCoordinate({
+                        heading: 0,
+                        tilt: 89.5,
+                        time: this.animationDuration,
+                    });
+                },
+                'widgets',
+            );
+
+            // Manage compass rotation when the view's camera is moved.
+            view.addEventListener(VIEW_EVENTS.CAMERA_MOVED, (event) => {
+                this.compass.style.transform = `rotate(${-event.heading}deg)`;
+            });
+        }
+
+        // Add a 3D toggle button if requested.
+        if (options.display3DToggle === undefined ? DEFAULT_OPTIONS.display3DToggle : options.display3DToggle) {
+            this.switch3dButton = this.addButton(
+                '3d-button',
+                '3D',
+                () => {
+                    let tilt;
+                    if (view.controls.getTilt() < 89) {
+                        tilt = 89.5;
+                    } else {
+                        tilt = 40;
+                    }
+                    view.controls.lookAtCoordinate({ tilt, time: this.animationDuration });
+                },
+            );
+
+            // Manage button content toggle when the view's camera is moved.
+            view.addEventListener(VIEW_EVENTS.CAMERA_MOVED, (event) => {
+                this.switch3dButton.innerHTML = event.tilt < 89 ? '2D' : '3D';
+            });
+        }
+
+        // Add a zoom-in button if requested.
+        if (options.displayZoomIn === undefined ? DEFAULT_OPTIONS.displayZoomIn : options.displayZoomIn) {
+            this.zoomInButton = this.addButton(
+                'zoom-in-button',
+                '<span class="widget-zoom-button-logo"></span>',
+                () => {
+                    view.controls.lookAtCoordinate({
+                        zoom: Math.min(20, view.controls.getZoom() + 1),
+                        time: this.animationDuration,
+                    });
+                },
+                'zoom-button-bar',
+            );
+        }
+
+        // Add a zoom-out button if requested.
+        if (options.displayZoomOut === undefined ? DEFAULT_OPTIONS.displayZoomOut : options.displayZoomOut) {
+            this.zoomOutButton = this.addButton(
+                'zoom-out-button',
+                '<span id="zoom-out-logo" class="widget-zoom-button-logo"></span>',
+                () => {
+                    view.controls.lookAtCoordinate({
+                        zoom: Math.max(3, view.controls.getZoom() - 1),
+                        time: this.animationDuration,
+                    });
+                },
+                'zoom-button-bar',
+            );
+        }
+    }
+
+    /**
+     *
+     * @param   {string}    id              The unique id the created button should be given.
+     * @param   {string}    [content='']    An HTML string defining the content of the button.
+     * @param   {function}  [actionOnClick] The method that should be executed when the button is clicked on.
+     * @param   {string}    [parentId]      The unique id of a button bar in which the created button should be added.
+                                            * A button bar is a group which contains one or several buttons. All
+                                            * buttons created with Navigation are in a button bar. If the given id does
+                                            * not match an already existing button bar, a new button bar will be created
+                                            * with this id. If no id is given, a button bar will be created with no id.
+                                            * The later case can be useful for creating isolated buttons.
+     *
+     * @returns {HTMLButtonElement}     The created button.
+     */
+    addButton(
+        id,
+        content = '',
+        actionOnClick = () => {},
+        parentId,
+    ) {
+        let buttonBar = document.getElementById(parentId);
+        if (!buttonBar) {
+            buttonBar = this.addButtonBar(parentId);
+        }
+
+        const button = document.createElement('button');
+        button.className = 'widget-button';
+        button.id = id;
+        button.innerHTML = content;
+
+        buttonBar.appendChild(button);
+
+        button.addEventListener('click', actionOnClick);
+
+        return button;
+    }
+
+    addButtonBar(id) {
+        const buttonBar = document.createElement('div');
+        buttonBar.className = 'widget-button-bar';
+        if (id) { buttonBar.id = id; }
+
+        this.domElement.appendChild(buttonBar);
+        return buttonBar;
+    }
+}
+
+
+export default Navigation;
diff --git a/webpack.config.js b/webpack.config.js
index f29193da51..fa460287ff 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -58,6 +58,10 @@ module.exports = () => {
                 import: './utils/debug/Main.js',
                 dependOn: 'itowns',
             },
+            itowns_widgets: {
+                import: './utils/gui/Main.js',
+                dependOn: 'itowns',
+            },
         },
         devtool: 'source-map',
         output: {