[client] Get a basic map showing

client_src/css/index.css

@@ -0,0 +1,42 @@
+@import "../../node_modules/leaflet/dist/leaflet.css";
+/** Ensure that some assets are copied that aren't by default **/
+.non-existent {
+    background: url(../../node_modules/leaflet/dist/images/marker-icon-2x.png),
+        url(../../node_modules/leaflet/dist/images/marker-shadow.png),
+        url(../logo-small.png),
+        url(../logo.png),
+        url(../logo.svg);
+}
+
+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;
+}
+
+body > h1 {
+    grid-area: header;
+    justify-self: center;
+    align-self: start;
+    
+    margin: 0;
+	padding: 0.25em 0.45em;
+	
+	pointer-events: none;
+    
+    z-index: 100;
+}
+
+main {
+	position: absolute;
+	top: 0; bottom: 0; left: 0; right: 0;
+	
+	z-index: 50;
+}

client_src/js/ClientConfig.mjs

@@ -1,5 +1,10 @@
 "use strict";
 
 export default {
-	ai_index_file: "ais/index.json"
+	ai_index_file: "ais/index.json",
+	
+	// The default location to show on the map when loading the page.
+	default_location: [ 53.76203,-0.35162 ],
+	// The default zoom level to use when loading the page.
+	default_zoom: 12,
 };

client_src/js/MapManager.mjs

@@ -3,6 +3,8 @@
 import Config from './ClientConfig.mjs';
 import GetFromUrl from './Helpers/GetFromUrl.mjs';
 
+import L from 'leaflet';
+
 class MapManager {
 	constructor() {
 		
@@ -11,6 +13,18 @@ class MapManager {
 	async setup() {
 		let index = JSON.parse(await GetFromUrl(Config.ai_index_file));
 		console.log(index);
+		
+		this.map = L.map("map", {
+			fullscreenControl: true
+		});
+		this.map.setView(Config.default_location, Config.default_zoom);
+		
+		// Add the OpenStreetMap tile layer
+		this.layer_openstreet = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+			id: "openstreetmap",
+			maxZoom: 19,
+			attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>"
+		}).addTo(this.map);
 	}
 }
 

client_src/js/index.mjs

@@ -2,8 +2,13 @@ import "../css/index.css";
 
 import MapManager from './MapManager.mjs';
 
+/*
+ * Portions of this client-side web interface are taken from Air-Quality-Web: https://github.com/ConnectedHumber/Air-Quality-Web
+ * Proof I wrote that project is available upon request of course.
+ */
+
+
 window.addEventListener("load", (_event) => {
 	const map_manager = new MapManager();
 	map_manager.setup();
-	
 });

package-lock.json

@@ -99,12 +99,27 @@
       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
       "dev": true
     },
+    "@types/geojson": {
+      "version": "7946.0.7",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
+      "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==",
+      "dev": true
+    },
     "@types/integer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/integer/-/integer-1.0.0.tgz",
       "integrity": "sha512-3viiRKLoSP2Qr78nMoQjkDc0fan4BgmpOyV1+1gKjE8wWXo3QQ78WItO6f9WuBf3qe3ymDYhM65oqHTOZ0rFxw==",
       "dev": true
     },
+    "@types/leaflet": {
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.4.6.tgz",
+      "integrity": "sha512-mCCym3P1kzr63CneInbXFUtWyT9XsWfueKVyHNRnLsQAqfS46TCXfecFHgDLWA8B8yCrMPcUyIB5urn4w6Q40Q==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "@types/node": {
       "version": "12.6.8",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.8.tgz",

package.json

@@ -35,6 +35,7 @@
 	},
 	"devDependencies": {
 		"@types/better-sqlite3": "^5.4.0",
+		"@types/leaflet": "^1.4.6",
 		"rollup": "^1.17.0",
 		"rollup-plugin-commonjs": "^10.0.1",
 		"rollup-plugin-node-resolve": "^5.2.0",