map: Put layer toggle control construction in self-invoking function

This commit is contained in:
Adam Goldsmith 2018-08-10 11:45:22 -04:00
parent b3d36aa030
commit 6b9aaef2ad

View File

@ -213,10 +213,6 @@ function plotPacketPaths(packets) {
}); });
} }
let element = document.createElement('div');
element.className = 'layer-toggles ol-unselectable ol-control';
let inner = element.appendChild(document.createElement('div'));
function layer_toggle(layer, parentElement) { function layer_toggle(layer, parentElement) {
if (layer.toggle_element === undefined) { if (layer.toggle_element === undefined) {
layer.toggle_element = parentElement.appendChild( layer.toggle_element = parentElement.appendChild(
@ -235,13 +231,13 @@ function layer_toggle(layer, parentElement) {
return layer.toggle_element; return layer.toggle_element;
} }
function render_layer_toggles(event) { 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 => {
if (layer instanceof LayerGroup) { if (layer instanceof LayerGroup) {
if (layer.group_toggle === undefined) { if (layer.group_toggle === undefined) {
let label = layer.group_toggle = inner.appendChild( let label = layer.group_toggle = element.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';
@ -254,7 +250,7 @@ function render_layer_toggles(event) {
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('click', event => { child_toggle_element.addEventListener('change', event => {
console.log("test"); console.log("test");
layer.getLayers().forEach(subLayer => { layer.getLayers().forEach(subLayer => {
subLayer.setVisible(event.target.checked); subLayer.setVisible(event.target.checked);
@ -270,15 +266,22 @@ function render_layer_toggles(event) {
} }
} }
else { else {
layer_toggle(layer, inner); layer_toggle(layer, element);
} }
}); });
} }
let control = new Control({element: element, (function makeLayerToogleControl() {
render: render_layer_toggles}); let element = document.createElement('div');
element.className = 'layer-toggles ol-unselectable ol-control';
let inner = element.appendChild(document.createElement('div'));
let control = new Control(
{element: element,
render: event => render_layer_toggles(event, inner)});
map.addControl(control);
})();
map.addControl(control);
function parsePackets(packetLog) { function parsePackets(packetLog) {
let parser = new APRSParser(); let parser = new APRSParser();