diff --git a/client_src/css/main.css b/client_src/css/main.css
index 65714b4..d1bba71 100644
--- a/client_src/css/main.css
+++ b/client_src/css/main.css
@@ -7,20 +7,29 @@
html, body { font-size: 100%; }
body {
+ display: grid;
+
+ grid-template-columns: 10em auto 10em;
+ grid-template-rows: auto auto;
+ grid-template-areas: ". header ."
+ ". . .";
+
font-family: sans-serif;
margin: 0; padding: 0;
}
-header {
- text-align: center;
- z-index: 100;
-}
h1 {
- display: inline-block;
- margin-top: 0; padding: 0.25em 0.45em;
+ grid-area: header;
+ justify-self: center;
+ align-self: start;
+
+ margin: 0;
+ padding: 0.25em 0.45em;
background: rgba(255, 255, 255, 0.5);
border-radius: 0 0 0.25em 0.25em;
+
+ z-index: 10;
}
main {
diff --git a/client_src/index.html b/client_src/index.html
index 3682634..c35aaf6 100644
--- a/client_src/index.html
+++ b/client_src/index.html
@@ -5,9 +5,8 @@
Air Quality Map | ConnectedHumber
-
+ Air Quality Map
+
diff --git a/client_src/js/LayerDeviceMarkers.mjs b/client_src/js/LayerDeviceMarkers.mjs
index e55df78..8a62452 100644
--- a/client_src/js/LayerDeviceMarkers.mjs
+++ b/client_src/js/LayerDeviceMarkers.mjs
@@ -9,11 +9,12 @@ import GetFromUrl from './Helpers/GetFromUrl.mjs';
class LayerDeviceMarkers {
constructor(in_map) {
this.map = in_map;
+
+ // Create a new clustering layer
+ this.layer = L.markerClusterGroup();
}
async setup() {
- // Create a new clustering layer
- this.layer = L.markerClusterGroup();
// Fetch the device list
let device_list = JSON.parse(await GetFromUrl(
diff --git a/client_src/js/Map.mjs b/client_src/js/Map.mjs
index 81e2bf5..26ca626 100644
--- a/client_src/js/Map.mjs
+++ b/client_src/js/Map.mjs
@@ -30,7 +30,23 @@ class Map {
this.device_markers = new LayerDeviceMarkers(this.map);
this.device_markers.setup().then(() => {
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);
}
}