From dc72da37f69a2a79317aaa8cd68317dfb5962256 Mon Sep 17 00:00:00 2001 From: Adam Goldsmith Date: Sat, 21 Jul 2018 15:22:32 -0400 Subject: [PATCH] Add some simple toggles for (named) layers --- src/map.html | 15 ++++++++++++++- src/map.js | 35 ++++++++++++++++++++++++++++++++++- 2 files changed, 48 insertions(+), 2 deletions(-) diff --git a/src/map.html b/src/map.html index d047fc6..878ab9b 100644 --- a/src/map.html +++ b/src/map.html @@ -3,12 +3,25 @@ OpenLayers example diff --git a/src/map.js b/src/map.js index 231aa0b..6c90253 100644 --- a/src/map.js +++ b/src/map.js @@ -1,5 +1,6 @@ import 'ol/ol.css'; import {Map as olMap, View} from 'ol'; +import {Control} from 'ol/control'; import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'; import {OSM, Vector as VectorSource} from 'ol/source'; import Feature from 'ol/Feature'; @@ -75,6 +76,7 @@ function pathStyle(feature) { function plotPaths(packets) { let vector_layer = new VectorLayer({ + title: "Station Paths", source: new VectorSource(), style: pathStyle }); @@ -152,6 +154,7 @@ function plotPacketPaths(packets) { }) }); let digi_layer = new VectorLayer({ + title: "Digipeater Labels", zIndex: 1, // TODO: probably not the best way to do this source: new VectorSource(), style: feature => { @@ -172,7 +175,10 @@ function plotPacketPaths(packets) { tile_layer.getSource().getProjection()); }); - let packet_path_layer = new VectorLayer({source: new VectorSource()}); + let packet_path_layer = new VectorLayer({ + title: "Packet Paths", + source: new VectorSource(), + }); map.addLayer(packet_path_layer); packets .filter(packet => packet.date > new Date("2018-07-14") && packet.date < new Date("2018-07-15")) @@ -212,6 +218,33 @@ function plotPacketPaths(packets) { }); } +let element = document.createElement('div'); +element.className = 'layer-toggles ol-unselectable ol-control'; +function render_layer_toggles(event) { + event.map.getLayers().getArray() + .filter(layer => layer.get('title') !== undefined) + .forEach(layer => { + if (layer.toggle_element === undefined) { + layer.toggle_element = element.appendChild( + document.createElement('label')); + + let checkbox = layer.toggle_element.appendChild( + document.createElement('input')); + checkbox.type = "checkbox"; + checkbox.checked = layer.getVisible(); + checkbox.addEventListener('change', event => { + layer.setVisible(event.target.checked); + }); + layer.toggle_element.appendChild( + document.createTextNode(layer.get('title'))); + } + }); +} +let control = new Control({element: element, + render: render_layer_toggles}); + +map.addControl(control); + function parsePackets(packetLog) { let parser = new APRSParser(); return packetLog.trim().split("\n")