map: Put layer toggle control construction in self-invoking function
This commit is contained in:
parent
b3d36aa030
commit
6b9aaef2ad
25
src/map.js
25
src/map.js
@ -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();
|
||||||
|
Loading…
Reference in New Issue
Block a user