itowns 2.36.2 → 2.38.1

package/examples/css/widgets.css

@@ -0,0 +1,360 @@
+/* ---------- GENERIC WIDGET SETTINGS : ----------------------------------------------------------------------------- */
+
+/* Define widget position according to its position settings. */
+.top-widget {
+    top: 10px;
+}
+.bottom-widget {
+    bottom: 10px;
+}
+.left-widget {
+    left: 10px;
+}
+.right-widget {
+    right: 10px;
+}
+
+
+
+/* ---------- NAVIGATION WIDGET SETTINGS : -------------------------------------------------------------------------- */
+
+#widgets-navigation {
+    position: absolute;
+    z-index: 10;
+
+    display: flex;
+    align-items: center;
+}
+
+/* Define navigation menu flex direction according to its 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 spacing between each navigation widgets according to position and direction settings. */
+#widgets-navigation.column-widget.top-widget > *:not(:first-child),
+#widgets-navigation.column-widget.bottom-widget > *:not(:last-child)  {
+    margin-top: 5px;
+}
+#widgets-navigation.column-widget.top-widget > *:not(:last-child),
+#widgets-navigation.column-widget.bottom-widget > *:not(:first-child)  {
+    margin-bottom: 5px;
+}
+#widgets-navigation.row-widget.left-widget > *:not(:first-child),
+#widgets-navigation.row-widget.right-widget > *:not(:last-child)  {
+    margin-left: 5px;
+}
+#widgets-navigation.row-widget.left-widget > *:not(:last-child),
+#widgets-navigation.row-widget.right-widget > *:not(:first-child)  {
+    margin-right: 5px;
+}
+
+
+
+/* ---------- NAVIGATION BUTTON BAR : ------------------------------------------------------------------------------- */
+
+/* Define button-bar flex direction according to widget position and direction settings. */
+#widgets-navigation .widget-button-bar {
+    display: flex;
+}
+#widgets-navigation.column-widget.top-widget .widget-button-bar {
+    flex-direction: column;
+}
+#widgets-navigation.column-widget.bottom-widget .widget-button-bar {
+    flex-direction: column-reverse;
+}
+#widgets-navigation.row-widget.left-widget .widget-button-bar {
+    flex-direction: row;
+}
+#widgets-navigation.row-widget.right-widget .widget-button-bar {
+    flex-direction: row-reverse;
+}
+
+
+
+/* ---------- BUTTONS GENERIC STYLE : ------------------------------------------------------------------------------- */
+
+#widgets-navigation .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-navigation .widget-button:hover {
+    cursor: pointer;
+}
+#widgets-navigation .widget-button:active {
+    background-color: #222222;
+}
+
+
+
+/* ---------- BUTTONS SHAPE AND POSITION WITHIN BUTTON-BAR : -------------------------------------------------------- */
+
+#widgets-navigation .widget-button-bar > .widget-button {
+    height: 30px;
+    width: 30px;
+
+    color: white;
+}
+
+/* Buttons shape and position within a column direction widget group. */
+#widgets-navigation.column-widget.top-widget .widget-button-bar > .widget-button:first-child:not(:only-child),
+#widgets-navigation.column-widget.bottom-widget .widget-button-bar > .widget-button:last-child:not(:only-child) {
+    border-radius: 7px 7px 0 0;
+}
+#widgets-navigation.column-widget.top-widget .widget-button-bar > .widget-button:last-child:not(:only-child),
+#widgets-navigation.column-widget.bottom-widget .widget-button-bar > .widget-button:first-child:not(:only-child) {
+    border-radius: 0 0 7px 7px;
+}
+#widgets-navigation.column-widget.top-widget .widget-button-bar > .widget-button:not(:last-child),
+#widgets-navigation.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. */
+#widgets-navigation.row-widget.left-widget .widget-button-bar > .widget-button:first-child:not(:only-child),
+#widgets-navigation.row-widget.right-widget .widget-button-bar > .widget-button:last-child:not(:only-child) {
+    border-radius: 7px 0 0 7px;
+}
+#widgets-navigation.row-widget.left-widget .widget-button-bar > .widget-button:last-child:not(:only-child),
+#widgets-navigation.row-widget.right-widget .widget-button-bar > .widget-button:first-child:not(:only-child) {
+    border-radius: 0 7px 7px 0;
+}
+#widgets-navigation.row-widget.left-widget .widget-button-bar > .widget-button:not(:last-child),
+#widgets-navigation.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-navigation .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;
+}
+#widgets-navigation.column-widget #zoom-button-bar {
+    flex-direction: column;
+}
+#widgets-navigation.row-widget #zoom-button-bar {
+    flex-direction: row-reverse;
+}
+
+/* Zoom buttons shape and position within a COLUMN direction widget group. */
+#widgets-navigation.column-widget #zoom-button-bar > .widget-button:first-child:not(:only-child) {
+    border-radius: 7px 7px 0 0;
+}
+#widgets-navigation.column-widget #zoom-button-bar > .widget-button:last-child:not(:only-child) {
+    border-radius: 0 0 7px 7px;
+}
+#widgets-navigation.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 navigation menu. */
+#widgets-navigation.row-widget #zoom-button-bar > .widget-button:first-child:not(:only-child) {
+    border-radius: 0 7px 7px 0;
+}
+#widgets-navigation.row-widget #zoom-button-bar > .widget-button:last-child:not(:only-child) {
+    border-radius: 7px 0 0 7px;
+}
+#widgets-navigation.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-navigation #zoom-button-bar > .widget-button:only-child {
+    border-radius: 7px;
+}
+
+/* Style of zoom buttons content. */
+#widgets-navigation .widget-zoom-button-logo {
+    width: 50%;
+    height: 50%;
+
+    background-image: url('https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/GUI/widget-logo.svg');
+    background-size: 100%;
+}
+#widgets-navigation #zoom-out-logo {
+    background-position: center -100%;
+}
+
+
+
+/* ---------- SPECIFIC COMPASS SETTINGS : --------------------------------------------------------------------------- */
+
+#widgets-navigation #compass {
+    width: 60px;
+    height: 60px;
+
+    border-radius: 50%;
+
+    background-image: url('https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/GUI/compass.svg');
+    background-repeat: no-repeat;
+    background-size: auto 90%;
+    background-position: center;
+}
+
+
+
+/* ---------- MINIMAP WIDGET SETTINGS : ----------------------------------------------------------------------------- */
+
+#widgets-minimap {
+    position: absolute;
+    z-index: 10;
+
+    border: 1px solid #222222;
+    border-radius: 7px;
+    overflow: hidden;
+
+    user-select: none;
+}
+
+#widgets-minimap #cursor-wrapper {
+    position: absolute;
+    z-index: 11;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+
+    font-size: 40px;
+    color: #222222;
+}
+
+
+
+/* ---------- SCALE WIDGET SETTINGS : ------------------------------------------------------------------------------- */
+
+#widgets-scale {
+    user-select: none;
+
+    position: absolute;
+    z-index: 10;
+    padding: 0 10px;
+    box-sizing: border-box;
+
+    display: flex;
+    align-items: center;
+
+    border: 1px solid #ffffffcc;
+    border-radius: 0 0 7px 7px;
+    border-top: none;
+
+    background-image: linear-gradient(#31333600, #313336ff);
+
+    color: #ffffff;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 15px;
+}
+
+#widgets-scale.left-widget {
+    justify-content: flex-start;
+}
+#widgets-scale.right-widget {
+    justify-content: flex-end;
+}
+
+
+
+/* ---------- SEARCHBAR WIDGET SETTINGS : --------------------------------------------------------------------------- */
+
+#widgets-searchbar {
+    position: absolute;
+    z-index: 10;
+}
+
+#widgets-searchbar > form {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    border-radius: 7px;
+}
+#widgets-searchbar.top-widget > form {
+    flex-direction: column;
+}
+#widgets-searchbar.bottom-widget > form {
+    flex-direction: column-reverse;
+}
+#widgets-searchbar > form.focus {
+    box-shadow: 0 0 10px #222222;
+}
+
+
+
+/* ---------- SEARCHBAR INPUT AND SUGGESTIONS : --------------------------------------------------------------------- */
+
+#widgets-searchbar:not(.bottom-widget) form > *:last-child:not(:only-child),
+#widgets-searchbar.bottom-widget form > *:first-child:not(:only-child) {
+    border-radius: 0 0 7px 7px;
+}
+#widgets-searchbar:not(.bottom-widget) form > *:first-child:not(:only-child),
+#widgets-searchbar.bottom-widget form > *:last-child:not(:only-child) {
+    border-radius: 7px 7px 0 0;
+}
+#widgets-searchbar form > *:only-child {
+    border-radius: 7px;
+}
+#widgets-searchbar:not(.bottom-widget) form > *:not(:first-child):not(:last-child) {
+    border-bottom: none;
+}
+#widgets-searchbar.bottom-widget form > *:not(:first-child):not(:last-child) {
+    border-top: none;
+}
+
+#widgets-searchbar form > * {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 10px;
+    background-color: #313336bb;
+    border: 1px solid #222222;
+    color: #ffffff;
+    font-family: Arial;
+}
+
+#widgets-searchbar form > input::placeholder {
+    color: #ffffff80;
+}
+#widgets-searchbar form > input:focus {
+    outline: none !important;
+}
+
+#widgets-searchbar form > div {
+    display: flex;
+    align-items: center;
+}
+#widgets-searchbar form > div.active {
+    background-color: #222222;
+}
+#widgets-searchbar form > div:hover {
+    cursor: pointer;
+}
+
+#widgets-searchbar form > div > p {
+    margin: 8px 0;
+}

package/examples/geoid_geoidLayer.html

@@ -0,0 +1,102 @@
+<html>
+    <head>
+        <title>Itowns - GeoidLayer</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">
+
+        <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 pluggins -->
+        <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: 25000000,
+            }
+
+            // `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 elevaion 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);
+
+
+
+            // ---------- DISPLAY GEOID HEIGHT DATA : ----------
+
+            // As both ElevationLayers data consist in altitudes, and as iTowns GlobeView displays elevation data as
+            // ellipsoid heights, we must add a GeoidLayer to display the altitudes correctly.
+
+            // Define the source of a geoid height grid, which serves as a conversion grid between altitudes and
+            // ellipsoid heights.
+            const geoidSource = new itowns.FileSource({
+                url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/altitude-conversion-grids/' +
+                    'RAF20_float.gtx',
+                crs: 'EPSG:4326',
+                format: 'application/gtx',
+            });
+            // Specify the type geoid height data are encoded with. See GTXParser documentation at
+            // http://www.itowns-project.org/itowns/docs/#api/Parser/GTXParser for more.
+            geoidSource.dataType = 'float';
+
+            // Create a Layer to support geoid height data and add it to the view.
+            const geoidLayer = new itowns.GeoidLayer('geoid', {
+                source: geoidSource,
+            });
+            view.addLayer(geoidLayer).then(debugMenu.addLayerGUI.bind(debugMenu));
+
+
+
+            // ---------- DEBUG TOOLS : ----------
+
+            debug.createTileDebugUI(debugMenu.gui, view);
+
+        </script>
+    </body>
+</html>

package/examples/images/code-logo.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24px"
+   height="24px"
+   viewBox="0 0 24 24"
+   fill="#000000"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="code-logo.svg"
+   inkscape:version="1.1.2 (76b9e6a115, 2022-02-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="32"
+     inkscape:cx="10.78125"
+     inkscape:cy="13.359375"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="1920"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     fill="none"
+     d="M0 0h24v24H0V0z"
+     id="path2" />
+  <path
+     d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"
+     id="path4"
+     style="fill:#ffffff" />
+</svg>

package/examples/index.html

@@ -11,7 +11,7 @@
 
 <div id="main">
     <iframe id="content" class="scroll-section" frameborder="0" height="100%"></iframe>
-    <div id="view-source" class="text"></div>
+    <button id="view-source" class="text" title="View source"></button>
 </div>
 
 <nav class="scroll-section">
@@ -50,10 +50,10 @@
         iframe.src = url.replace('index.html', '');
         iframe.focus();
 
-        var viewSrc = '<a href="https://github.com/iTowns/itowns/blob/master/examples/';
-        viewSrc += window.location.hash.substr(1) || 'view_3d_map';
-        viewSrc += '.html" target="_blank">View source</a>';
-        document.getElementById('view-source').innerHTML = viewSrc;
+        let viewSrc = `https://github.com/iTowns/itowns/blob/master/examples/${
+            window.location.hash.substr(1) || 'view_3d_map'
+        }.html`;
+        document.getElementById('view-source').onclick = () => { window.open(viewSrc); };
     }
 
     function initNavigation(list) {