Browse Source

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

pull/26/head
Starbeamrainbowlabs 4 years ago
parent
commit
d1baf89b17
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
  1. 21
      client_src/css/main.css
  2. 5
      client_src/index.html
  3. 5
      client_src/js/LayerDeviceMarkers.mjs
  4. 16
      client_src/js/Map.mjs

21
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 {

5
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">

5
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(

16
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);
}
}

Loading…
Cancel
Save