Build a hierarchical tree from JOSM layers

index.html

@@ -359,6 +359,7 @@
     <script src="dist/url-search-params.js"></script>
     <script src="config.js"></script>
     <script src="keys.js"></script>
+    <script src="layers.js"></script>
 
     <!-- "gulp inject" for debugging -->
     <!-- inject:js -->

js/control/LayersTab.js

@@ -2,6 +2,89 @@ BR.LayersTab = L.Control.Layers.extend({
     addTo: function (map) {
         this._map = map;
         this.onAdd(map);
+
+        var layerIndex = BR.layerIndex;
+
+        var toJsTree = function(layerTree) {
+            var data = [];
+
+            function walkTree(inTree, outTree) {
+                if (Array.isArray(inTree)) {
+                    for (var i = 0; i < inTree.length; i++) {
+                        var layerId = inTree[i];
+                        var childNode = { 
+                            'text' : layerIndex[layerId].properties.name
+                        };
+                        outTree.push(childNode);
+                    }
+                } else {
+                    for (name in inTree) {
+                        var value = inTree[name];
+                        var children = [];
+                        var rootNode = {
+                            'text': name,
+                            'state': {
+                                'disabled': true
+                            },
+                            'children': children
+                        };
+                        outTree.push(rootNode);
+
+                        walkTree(value, children);
+                    }
+                }
+            }
+            walkTree(structure, data);
+
+            return data;
+        };
+
+        var structure = {
+            'Base layers': {
+                'World-wide international': [
+                    'standard',
+                    'OpenTopoMap',
+                    'stamen-terrain-background',
+                    'HDM_HOT',
+                    'wikimedia-map',
+                    'opencylemap'
+                ],
+                'World-wide monolingual': [
+                    'osm-mapnik-german_style',
+                    'osmfr'
+                ],
+                'Europe': [
+                ],
+                'Country': [
+                    'Freemap.sk-Car',
+                    'Freemap.sk-Hiking',
+                    'Freemap.sk-Cyclo',
+                    'OpenStreetMap-turistautak',
+                    'Israel_Hiking',
+                    'Israel_MTB',
+                    'osmbe',
+                    'osmbe-fr',
+                    'osmbe-nl',
+                    'osmfr-basque',
+                    'osmfr-breton',
+                    'osmfr-occitan',
+                    'mtbmap-no',
+                    'osm-cambodia_laos_thailand_vietnam-bilingual'
+                ]
+            },
+            'Overlays': {
+                'World-wide': [
+                    'Waymarked_Trails-Hiking',
+                    'Waymarked_Trails-Cycling',
+                    'Waymarked_Trails-MTB'
+                ],
+                'Country': [
+                    'hu-hillshade'
+                ]
+            }
+        };
+        var data = toJsTree(structure);
+
         L.DomUtil.get('layers-control-wrapper').appendChild(this._form);
         $('#optional-layers-tree')
             .on('select_node.jstree', function (e, data) {
@@ -27,29 +110,7 @@ BR.LayersTab = L.Control.Layers.extend({
                         'icons': false,
                         dots : false
                     },
-                    'data' : [
+                    'data' : 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;

layers.js

@@ -0,0 +1 @@
+/home/norbert/Dokumente/cms/gis/brouter/issues/145-thunderforest/layers/josm/layers.js