[client] Get a basic map showing

This commit is contained in:
Starbeamrainbowlabs 2019-07-22 15:46:07 +01:00
parent c2810d4871
commit 80a8833c03
6 changed files with 84 additions and 2 deletions

View File

@ -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;
}

View File

@ -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,
};

View File

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

View File

@ -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();
});

15
package-lock.json generated
View File

@ -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",

View File

@ -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",