Add jsTree for optional layers

css/style.css

@@ -390,10 +390,12 @@ table.dataTable.display tbody tr.even:hover {
 }
 
 /* layers control as sidebar tab */
-#layers-control-wrapper label {
+#layers-control-wrapper label,
+#optional-layers-tree {
     font-size: 0.9rem;
     line-height: normal;
-
+}
+#layers-control-wrapper label {
     /* override Bootstrap/Reboot label */
     display: block;
     margin-bottom: 0px;
@@ -404,6 +406,11 @@ table.dataTable.display tbody tr.even:hover {
     height: 23px;
 }
 
+#optional-layers-tree {
+    margin-top: 5px;
+}
+
+
 /* hide currently unused bottom tabs container because of touch border artefacts */
 .leaflet-sidebar-tabs > ul:last-child {
     display: none;

index.html

@@ -284,6 +284,7 @@
                         <div>
                             <button type="button" id="custom_layers_button" class="btn btn-sm pull-right" data-i18n="[title]sidebar.layers.customize" title="Add or remove custom layers"><span class="fa fa-plus-square"></span> <span data-i18n="sidebar.layers.custom-layers">Custom layers</span></button>
                         </div>
+                        <div id="optional-layers-tree"></div>
                     </div>
 
                     <div class="leaflet-sidebar-pane" id="tab_profile">

js/control/LayersTab.js

@@ -3,6 +3,55 @@ BR.LayersTab = L.Control.Layers.extend({
         this._map = map;
         this.onAdd(map);
         L.DomUtil.get('layers-control-wrapper').appendChild(this._form);
+        $('#optional-layers-tree')
+            .on('select_node.jstree', function (e, data) {
+                //console.log('selected: ', data);
+                console.log('selected: ' + data.node.text);
+            })
+            .on('check_node.jstree', function (e, data) {
+                //console.log('selected: ', data);
+                console.log('checked: ' + data.node.text);
+            })
+            .on('uncheck_node.jstree', function (e, data) {
+                //console.log('selected: ', data);
+                console.log('unchecked: ' + data.node.text);
+            })
+            .jstree({
+                plugins: [ 'checkbox' ],
+                checkbox: {
+                    whole_node: false,
+                    tie_selection: false 
+                },
+                core: {
+                    'themes': {
+                        'icons': false,
+                        dots : false
+                    },
+                    'data' : [
+                        { 
+                            text: 'Simple root node',
+                            'state' : {
+                                'disabled' : true
+                            },
+                            'children' : [
+                                'Child 1'
+                            ]   
+                        },
+                        {
+                            'text' : 'Root node 2',
+                            'state' : {
+                                'opened' : true,
+                                //'selected' : true
+                                'disabled' : true
+                            },
+                            'children' : [
+                                { 'text' : 'Child 1' },
+                                'Child 2'
+                            ]
+                        }
+                    ]
+                }
+            });
         return this;
     }
 });

package.json

@@ -46,7 +46,8 @@
     "mapbbcode": "MapBBCode/mapbbcode#v1.2.0",
     "seiyria-bootstrap-slider": "seiyria/bootstrap-slider#^9.8.1",
     "tether": "1.4.5",
-    "url-search-params": "~0.5.0"
+    "url-search-params": "~0.5.0",
+    "jstree": "^3.3.7"
   },
   "devDependencies": {
     "autoprefixer": "^8.1.0",
@@ -198,6 +199,13 @@
       "main": [
         "dist/umd/jquery-i18next.js"
       ]
+    },
+    "jstree": {
+      "main": [
+        "dist/jstree.js",
+        "dist/themes/default/style.css",
+        "dist/themes/default/*.png"
+      ]
     }
   }
 }

yarn.lock

@@ -3314,7 +3314,7 @@ jquery-i18next@^1.2.1:
   resolved "https://registry.yarnpkg.com/jquery-i18next/-/jquery-i18next-1.2.1.tgz#3e4ac5e46632fac21640529f1aa7b68e54f227e8"
   integrity sha512-UNcw3rgxoKjGEg4w23FEn2h3OlPJU7rPzsgDuXDBZktIzeiVbJohs9Cv9hj8oP8KNfBRKOoErL/OVxg2FaAR4g==
 
-"jquery@1.9.1 - 3", jquery@3.3.1, jquery@>=1.7, jquery@>=1.8:
+"jquery@1.9.1 - 3", jquery@3.3.1, jquery@>=1.7, jquery@>=1.8, jquery@>=1.9.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
   integrity sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==
@@ -3362,6 +3362,13 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jstree@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/jstree/-/jstree-3.3.7.tgz#41df485d66148836ac389603a3e12f4574b06251"
+  integrity sha512-yzzalO1TbZ4HdPezO43LesGI4Wv2sB0Nl+4GfwO0YYvehGws5qtTAhlBISxfur9phMLwCtf9GjHlRx2ZLXyRnw==
+  dependencies:
+    jquery ">=1.9.1"
+
 kind-of@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-1.1.0.tgz#140a3d2d41a36d2efcfa9377b62c24f8495a5c44"