sbrl-github
/
Air-Quality-Web
mirror of https://github.com/ConnectedHumber/Air-Quality-Web
1
0
Fork 0
Code Issues Releases Wiki Activity

[client] Refactor header to allow clickable access to layer control

This commit is contained in:
Starbeamrainbowlabs 2019-01-17 16:38:15 +00:00
parent 7864051443
commit d1baf89b17
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
4 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client_src/css/main.css
View File

@ -7,20 +7,29 @@
html, body { font-size: 100%; } html, body { font-size: 100%; }
body { body {
display: grid;
grid-template-columns: 10em auto 10em;
grid-template-rows: auto auto;
grid-template-areas: ". header ."
". . .";
font-family: sans-serif; font-family: sans-serif;
margin: 0; padding: 0; margin: 0; padding: 0;
} }
header {
text-align: center;
z-index: 100;
}
h1 { h1 {
display: inline-block; grid-area: header;
margin-top: 0; padding: 0.25em 0.45em; justify-self: center;
align-self: start;
margin: 0;
padding: 0.25em 0.45em;
background: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.5);
border-radius: 0 0 0.25em 0.25em; border-radius: 0 0 0.25em 0.25em;
z-index: 10;
} }
main { main {

5
client_src/index.html
View File

@ -5,9 +5,8 @@
<title>Air Quality Map | ConnectedHumber</title> <title>Air Quality Map | ConnectedHumber</title>
</head> </head>
<body> <body>
<header> <h1>Air Quality Map</h1>
<h1>Air Quality Map</h1>
</header>
<!-- Leaflet needs an id to attach to --> <!-- Leaflet needs an id to attach to -->
<main id="map"> <main id="map">

5
client_src/js/LayerDeviceMarkers.mjs
View File

@ -9,11 +9,12 @@ import GetFromUrl from './Helpers/GetFromUrl.mjs';
class LayerDeviceMarkers { class LayerDeviceMarkers {
constructor(in_map) { constructor(in_map) {
this.map = in_map; this.map = in_map;
// Create a new clustering layer
this.layer = L.markerClusterGroup();
} }
async setup() { async setup() {
// Create a new clustering layer
this.layer = L.markerClusterGroup();
// Fetch the device list // Fetch the device list
let device_list = JSON.parse(await GetFromUrl( let device_list = JSON.parse(await GetFromUrl(

16
client_src/js/Map.mjs
View File

@ -30,7 +30,23 @@ class Map {
this.device_markers = new LayerDeviceMarkers(this.map); this.device_markers = new LayerDeviceMarkers(this.map);
this.device_markers.setup().then(() => { this.device_markers.setup().then(() => {
console.info("[map] Device markers loaded successfully."); console.info("[map] Device markers loaded successfully.");
// Display a layer controller
this.setup_layer_control();
}); });
}
setup_layer_control() {
this.layer_control = L.control.layers({
// Base layer(s)
"OpenStreetMap": this.layer_openstreet
}, { // Overlay(s)
"Devices": this.device_markers.layer
}, { // Options
collapsed: false
});
this.layer_control.addTo(this.map);
} }
} }