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;
} }

77
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,44 +227,46 @@ function layer_toggle(layer, parentElement) {
return layer.toggle_element; return layer.toggle_element;
} }
function layer_toggles(layer, parentElement) {
if (layer instanceof LayerGroup) {
if (layer.group_toggle === undefined) {
let label = layer.group_toggle = parentElement.appendChild(
document.createElement('label'));
let input = label.appendChild(document.createElement('input'));
input.type = 'checkbox';
input.className = "expand";
label.appendChild(document.createElement('span'));
label.appendChild(layer_toggle(layer)); // whole LayerGroup
let child_toggle_element = label.appendChild(
document.createElement('input'));
child_toggle_element.type = 'checkbox';
child_toggle_element.checked = true;
child_toggle_element.addEventListener('change', event => {
layer.getLayers().forEach(subLayer => {
subLayer.setVisible(event.target.checked);
subLayer.toggle_element.querySelector("input").checked =
event.target.checked;
});
});
let container = label.appendChild(document.createElement('div'));
container.className = 'collapsible-content';
layer.getLayers().forEach(
subLayer => layer_toggles(subLayer, container));
return label;
}
}
else {
parentElement.appendChild(layer_toggle(layer));
}
}
function render_layer_toggles(event, element) { function render_layer_toggles(event, element) {
event.map.getLayers().getArray() event.map.getLayers().getArray()
.filter(layer => layer.get('title') !== undefined) .filter(layer => layer.get('title') !== undefined)
.forEach(layer => { .forEach(layer => layer_toggles(layer, element));
if (layer instanceof LayerGroup) {
if (layer.group_toggle === undefined) {
let label = layer.group_toggle = element.appendChild(
document.createElement('label'));
let input = label.appendChild(document.createElement('input'));
input.type = 'checkbox';
input.className = "expand";
label.appendChild(document.createElement('span'));
layer_toggle(layer, label); // whole LayerGroup
let child_toggle_element = label.appendChild(
document.createElement('input'));
child_toggle_element.type = 'checkbox';
child_toggle_element.checked = true;
child_toggle_element.addEventListener('change', event => {
console.log("test");
layer.getLayers().forEach(subLayer => {
subLayer.setVisible(event.target.checked);
subLayer.toggle_element.querySelector("input").checked =
event.target.checked;
});
});
let container = label.appendChild(document.createElement('div'));
container.className = 'collapsible-content';
layer.getLayers().forEach(
sublayer => layer_toggle(sublayer, container));
}
}
else {
layer_toggle(layer, element);
}
});
} }
(function makeLayerToogleControl() { (function makeLayerToogleControl() {