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

4 years ago · d1baf89b17
4 changed files with 36 additions and 11 deletions
--- a/client_src/css/main.css
+++ b/client_src/css/main.css
@ -7,20 +7,29 @@
				@@ -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 {
--- a/client_src/index.html
+++ b/client_src/index.html
@ -5,9 +5,8 @@
				@@ -5,9 +5,8 @@
 		<title>Air Quality Map | ConnectedHumber</title>
 	</head>
 	<body>
-		<header>
-			<h1>Air Quality Map</h1>
-		</header>
+		<h1>Air Quality Map</h1>
+		
 		<!-- Leaflet needs an id to attach to -->
 		<main id="map">
 			
--- a/client_src/js/LayerDeviceMarkers.mjs
+++ b/client_src/js/LayerDeviceMarkers.mjs
@ -9,11 +9,12 @@ import GetFromUrl from './Helpers/GetFromUrl.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(
--- a/client_src/js/Map.mjs
+++ b/client_src/js/Map.mjs
@ -30,7 +30,23 @@ class Map {
				@@ -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);
 	}
 }