javascript - mapbox を使用したアコーディオンに似たレイヤーリーフレットの切り替え、非表示、トグル

Question

そのマップボックスの凡例をアコーディオンのような構造に変換して、親レイヤー名をクリックすると子レイヤー名がその下にインデントされた形式で表示されるようにする方法。現在の標準構造のリンクを以下に投稿しましたhttps://www.mapbox.com/mapbox.js/example/v1.0.0/wms/しかし、私はこのhttp://jsfiddle.netのように見えるようにしたいと思います/La77L8L9/3/ . 違いは、レイヤー情報がデータベースから取得されていることです。現在、レイヤー名を持つクリック可能なリンクとして JavaScript で要素 a を作成することにより、レイヤーを追加しています。リンクをクリックすると、対応するマップが表示されます。データベースからレイヤー名を取得した後、レイヤー名を現在どのように追加しているかのスニペットを下に配置しました。メニュー ui がベース マップの名前を保持していないことを確認してください。

function addLayer(map, layer, name, zIndex) {
    var layers = document.getElementById('menu-ui');
    layer.setZIndex(zIndex)
    layer.addTo(map);
    // Create a simple layer switcher that
    // toggles layers on and off.
    var link = document.createElement('a');
    link.href = '#';
    if (zIndex == 1) {
        link.className = 'active';
       // link.class = 'accordion-toggle';
    }
    else {
        map.removeLayer(layer);
        this.className = '';
    }
    link.innerHTML = name;
    if (zIndex != 1) {
        link.onclick = function (e) {
            e.preventDefault();
            e.stopPropagation();
            if (map.hasLayer(layer)) {
                map.removeLayer(layer);
                this.className = '';
            } else {
                layer.setOpacity(1.0);
                map.addLayer(layer);
                this.className = 'active';
            }
        };
    }
    layers.appendChild(link);
}

おそらく、各要素に ID を与え、.clicked を使用して可視から偽への表示を実行する方法があると想定していますが、データベースを使用してレイヤー名を取得するときに動的に行うのは少し難しいです。私のデータベースにはレイヤーIDがあり、特定のレイヤーが親の子である場合はレイヤーとparentLayerIDがあります。