From b2a3b35dd95314b60b0586d027a3bcfbea6af9ce Mon Sep 17 00:00:00 2001 From: Starbeamrainbowlabs Date: Thu, 17 Jan 2019 13:56:25 +0000 Subject: [PATCH] Get a basic map displaying. Nothing fanceh yet, but we're getting there :D --- client_src/css/main.css | 5 +++++ client_src/index.html | 7 +++++-- client_src/js/Config.mjs | 6 ++++++ client_src/js/Map.mjs | 24 ++++++++++++++++++++++++ client_src/js/index.mjs | 7 ++++++- package-lock.json | 15 +++++++++++++++ package.json | 1 + rollup.config.js | 2 +- 8 files changed, 63 insertions(+), 4 deletions(-) create mode 100644 client_src/js/Config.mjs create mode 100644 client_src/js/Map.mjs diff --git a/client_src/css/main.css b/client_src/css/main.css index 601c959..085e040 100644 --- a/client_src/css/main.css +++ b/client_src/css/main.css @@ -1 +1,6 @@ @import "../../node_modules/leaflet/dist/leaflet.css"; + +main { + position: absolute; + top: 0; bottom: 0; left: 0; right: 0; +} diff --git a/client_src/index.html b/client_src/index.html index 5701910..0fc8df2 100644 --- a/client_src/index.html +++ b/client_src/index.html @@ -5,10 +5,13 @@ Air Quality Map | ConnectedHumber - + +
+ +
- + diff --git a/client_src/js/Config.mjs b/client_src/js/Config.mjs new file mode 100644 index 0000000..e4865fa --- /dev/null +++ b/client_src/js/Config.mjs @@ -0,0 +1,6 @@ +"use strict"; + +export default { + default_location: [ 53.7391, -0.3344 ], + default_zoom: 13 +} diff --git a/client_src/js/Map.mjs b/client_src/js/Map.mjs new file mode 100644 index 0000000..3ddfdf9 --- /dev/null +++ b/client_src/js/Map.mjs @@ -0,0 +1,24 @@ +"use strict"; + +import Leaflet from 'leaflet'; + +import Config from './Config.mjs'; + +class Map { + constructor() { + + } + + setup() { + this.map = Leaflet.map("map"); + this.map.setView(Config.default_location, Config.default_zoom); + + this.layer_openstreet = Leaflet.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { + id: "openstreetmap", + maxZoom: 19, + attribution: "© OSM Mapnik OpenStreetMap" + }).addTo(this.map); + } +} + +export default Map; diff --git a/client_src/js/index.mjs b/client_src/js/index.mjs index d09c661..4f52fd5 100644 --- a/client_src/js/index.mjs +++ b/client_src/js/index.mjs @@ -2,6 +2,11 @@ import '../css/main.css'; +// ---------------------------------------------------------------------------- + +import Map from './Map.mjs'; + window.addEventListener("load", function(_event) { - + window.map = new Map(); + window.map.setup(); }); diff --git a/package-lock.json b/package-lock.json index c507256..c4109e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,21 @@ "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", "dev": true }, + "@types/geojson": { + "version": "7946.0.5", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.5.tgz", + "integrity": "sha512-rLlMXpd3rdlrp0+xsrda/hFfOpIxgqFcRpk005UKbHtcdFK+QXAjhBAPnvO58qF4O1LdDXrcaiJxMgstCIlcaw==", + "dev": true + }, + "@types/leaflet": { + "version": "1.2.14", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.2.14.tgz", + "integrity": "sha512-acP2w5DygY0V7bwmjFmaen5I2iBl8RkWx9kon1IJA7k9mNFgBb6702WApjZSrM4AG1ucJVxFcTlS6nr4HvahEw==", + "dev": true, + "requires": { + "@types/geojson": "*" + } + }, "@types/node": { "version": "10.12.18", "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.18.tgz", diff --git a/package.json b/package.json index 121a4de..699f4a1 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "leaflet-webgl-heatmap": "^0.2.7" }, "devDependencies": { + "@types/leaflet": "^1.2.14", "postcss-import": "^12.0.1", "postcss-url": "^8.0.0", "rollup": "^1.1.0", diff --git a/rollup.config.js b/rollup.config.js index 6126547..56502b8 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -8,7 +8,7 @@ import postcss_url from 'postcss-url'; export default { input: 'client_src/js/index.mjs', output: { - file: 'app/client.js', + file: 'app/app.js', format: 'es' }, plugins: [