adam/aprsNotifyJS
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

map: Allow for nested LayerGroups in layer toggles

Browse Source
This commit is contained in:
Adam Goldsmith 2018-08-10 13:38:14 -04:00
parent 131d6f2e30
commit cdad5f7da8
2 changed files with 40 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/map.css
View File

@ -43,6 +43,6 @@ html, body {
.collapsible-content { .collapsible-content {
margin-left: 0.8em; margin-left: 0.8em;
} }
.collapsible-content label { .collapsible-content > label {
display: block; display: block;
} }

27
src/map.js
View File

@ -210,10 +210,9 @@ function plotPacketPaths(packets) {
}); });
} }
function layer_toggle(layer, parentElement) { function layer_toggle(layer) {
if (layer.toggle_element === undefined) { if (layer.toggle_element === undefined) {
layer.toggle_element = parentElement.appendChild( layer.toggle_element = document.createElement('label');
document.createElement('label'));
let checkbox = layer.toggle_element.appendChild( let checkbox = layer.toggle_element.appendChild(
document.createElement('input')); document.createElement('input'));
@ -228,27 +227,23 @@ function layer_toggle(layer, parentElement) {
return layer.toggle_element; return layer.toggle_element;
} }
function render_layer_toggles(event, element) { function layer_toggles(layer, parentElement) {
event.map.getLayers().getArray()
.filter(layer => layer.get('title') !== undefined)
.forEach(layer => {
if (layer instanceof LayerGroup) { if (layer instanceof LayerGroup) {
if (layer.group_toggle === undefined) { if (layer.group_toggle === undefined) {
let label = layer.group_toggle = element.appendChild( let label = layer.group_toggle = parentElement.appendChild(
document.createElement('label')); document.createElement('label'));
let input = label.appendChild(document.createElement('input')); let input = label.appendChild(document.createElement('input'));
input.type = 'checkbox'; input.type = 'checkbox';
input.className = "expand"; input.className = "expand";
label.appendChild(document.createElement('span')); label.appendChild(document.createElement('span'));
layer_toggle(layer, label); // whole LayerGroup label.appendChild(layer_toggle(layer)); // whole LayerGroup
let child_toggle_element = label.appendChild( let child_toggle_element = label.appendChild(
document.createElement('input')); document.createElement('input'));
child_toggle_element.type = 'checkbox'; child_toggle_element.type = 'checkbox';
child_toggle_element.checked = true; child_toggle_element.checked = true;
child_toggle_element.addEventListener('change', event => { child_toggle_element.addEventListener('change', event => {
console.log("test");
layer.getLayers().forEach(subLayer => { layer.getLayers().forEach(subLayer => {
subLayer.setVisible(event.target.checked); subLayer.setVisible(event.target.checked);
subLayer.toggle_element.querySelector("input").checked = subLayer.toggle_element.querySelector("input").checked =
@ -259,13 +254,19 @@ function render_layer_toggles(event, element) {
let container = label.appendChild(document.createElement('div')); let container = label.appendChild(document.createElement('div'));
container.className = 'collapsible-content'; container.className = 'collapsible-content';
layer.getLayers().forEach( layer.getLayers().forEach(
sublayer => layer_toggle(sublayer, container)); subLayer => layer_toggles(subLayer, container));
return label;
} }
} }
else { else {
layer_toggle(layer, element); parentElement.appendChild(layer_toggle(layer));
} }
}); }
function render_layer_toggles(event, element) {
event.map.getLayers().getArray()
.filter(layer => layer.get('title') !== undefined)
.forEach(layer => layer_toggles(layer, element));
} }
(function makeLayerToogleControl() { (function makeLayerToogleControl() {