Get a basic map displaying.

Nothing fanceh yet, but we're getting there :D
4 years ago · b2a3b35dd9
parent c45db0ddee
commit b2a3b35dd9
8 changed files with 63 additions and 4 deletions
--- 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;
+}
--- a/client_src/index.html
+++ b/client_src/index.html
@ -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>
--- a/client_src/js/Config.mjs
+++ b/client_src/js/Config.mjs
@ -0,0 +1,6 @@
+"use strict";
+
+export default {
+	default_location: [ 53.7391, -0.3344 ],
+	default_zoom: 13
+}
--- a/client_src/js/Map.mjs
+++ 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: "&copy; OSM Mapnik <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
+		}).addTo(this.map);
+	}
+}
+
+export default Map;
--- 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();
 });
--- 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",
--- 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",
--- 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: [