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

Add some simple toggles for (named) layers

Browse Source
This commit is contained in:
Adam Goldsmith 2018-07-21 15:22:32 -04:00
parent 146f9f7bd2
commit dc72da37f6
2 changed files with 48 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/map.html
View File

@ -3,12 +3,25 @@
<head> <head>
<style> <style>
html, body { html, body {
height: 100% height: 100%;
margin: 0;
} }
.map { .map {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.ol-control.layer-toggles {
top: 0.5em;
right: 0.5em;
background-color: rgba(70, 115, 164, 0.7);
color: #eee;
}
.ol-control.layer-toggles:hover {
background-color: rgba(0,60,136,0.7);
}
.layer-toggles > label {
display: block;
}
</style> </style>
<title>OpenLayers example</title> <title>OpenLayers example</title>
</head> </head>

35
src/map.js
View File

@ -1,5 +1,6 @@
import 'ol/ol.css'; import 'ol/ol.css';
import {Map as olMap, View} from 'ol'; import {Map as olMap, View} from 'ol';
import {Control} from 'ol/control';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'; import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {OSM, Vector as VectorSource} from 'ol/source'; import {OSM, Vector as VectorSource} from 'ol/source';
import Feature from 'ol/Feature'; import Feature from 'ol/Feature';
@ -75,6 +76,7 @@ function pathStyle(feature) {
function plotPaths(packets) { function plotPaths(packets) {
let vector_layer = new VectorLayer({ let vector_layer = new VectorLayer({
title: "Station Paths",
source: new VectorSource(), source: new VectorSource(),
style: pathStyle style: pathStyle
}); });
@ -152,6 +154,7 @@ function plotPacketPaths(packets) {
}) })
}); });
let digi_layer = new VectorLayer({ let digi_layer = new VectorLayer({
title: "Digipeater Labels",
zIndex: 1, // TODO: probably not the best way to do this zIndex: 1, // TODO: probably not the best way to do this
source: new VectorSource(), source: new VectorSource(),
style: feature => { style: feature => {
@ -172,7 +175,10 @@ function plotPacketPaths(packets) {
tile_layer.getSource().getProjection()); 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); map.addLayer(packet_path_layer);
packets packets
.filter(packet => packet.date > new Date("2018-07-14") && packet.date < new Date("2018-07-15")) .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) { function parsePackets(packetLog) {
let parser = new APRSParser(); let parser = new APRSParser();
return packetLog.trim().split("\n") return packetLog.trim().split("\n")