sbrl-github/Air-Quality-Web
1
0
Fork 0
mirror of https://github.com/ConnectedHumber/Air-Quality-Web synced 2024-12-26 11:05:01 +00:00
Code Issues Releases Wiki Activity

Get a basic map displaying.

Browse source 
Nothing fanceh yet, but we're getting there :D
This commit is contained in:
Starbeamrainbowlabs 2019-01-17 13:56:25 +00:00
parent c45db0ddee
commit b2a3b35dd9
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
8 changed files with 63 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
client_src/css/main.css
View file

@ -1 +1,6 @@
@import "../../node_modules/leaflet/dist/leaflet.css";
main {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}

7
client_src/index.html
View file

@ -5,10 +5,13 @@
<title>Air Quality Map | ConnectedHumber</title>
</head>
<body>
<!-- Leaflet needs an id to attach to -->
<main id="map">
</main>
<!---------------->
<link rel="stylesheet" href="client.css" />
<link rel="stylesheet" href="app.css" />
<script src="app.js" charset="utf-8"></script>
</body>
</html>

6
client_src/js/Config.mjs Normal file
View file

@ -0,0 +1,6 @@
"use strict";
export default {
default_location: [ 53.7391, -0.3344 ],
default_zoom: 13
}

24
client_src/js/Map.mjs Normal file
View file

@ -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: "&copy; OSM Mapnik <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
}).addTo(this.map);
}
}
export default Map;

7
client_src/js/index.mjs
View file

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

15
package-lock.json generated
View file

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

1
package.json
View file

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

2
rollup.config.js
View file

@ -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: [