add interactive map and lookup from address to latitude and longitude

database.py

 import os
 import sqlite3
-from typing import List
+from typing import List, Tuple
 
 DATABASE = os.path.join(os.path.dirname(os.path.abspath(__file__)), "database.db")
 
@@ -50,8 +50,25 @@ with Connection() as conn:
 		url text NOT NULL,
 		workspace_id integer NOT NULL,
 		FOREIGN KEY (workspace_id) REFERENCES Workspaces(id))''')
+	conn.execute('''CREATE TABLE IF NOT EXISTS AddressToLatLong (
+		id integer NOT NULL PRIMARY KEY AUTOINCREMENT,
+		address text NOT NULL,
+		latlong text NOT NULL)''')
 	conn.commit()
 
+def lookup_address(address: str):
+	with Connection() as conn:
+		conn.execute("SELECT latlong FROM AddressToLatLong WHERE address = ?", (address,))
+		res = conn.cursor.fetchone()[0]
+		(lat, long) = res.split(",")
+		return (float(lat), float(long))
+
+def set_address_latlong(address: str, latlong: Tuple[float, float]):
+	with Connection() as conn:
+		latlong_str = f"{ repr(latlong[0]) },{ repr(latlong[1]) }"
+		conn.execute("INSERT INTO AddressToLatLong (address, latlong) VALUES (?, ?)", (address, latlong_str))
+		conn.commit()
+
 class Workspace:
 	def __init__(self, name: str,
 		address: str, main_photo: str, additional_photos: List[str], description: str,
@@ -96,5 +113,3 @@ def get_workspaces():
 	with Connection() as conn:
 		conn.execute("SELECT * FROM Workspaces")
 		return [Workspace.from_query(conn, x) for x in conn.cursor.fetchall()]
-
-print(get_workspaces())
\ No newline at end of file

import_database.py

 import database
 
-print(database.add_workspace(database.Workspace(
+workspace = database.Workspace(
 	"CodeBase",
 	"CodeBase Edinburgh, 37a Castle Terrace, Edinburgh, EH1 2EL",
 	"https://images.squarespace-cdn.com/content/v1/55439320e4b0f92b5d6c4c8b/1505921023376-PAHUDHVOOKIYF4XQPHOO/5951229048_3e3d50fcb1_o.jpg?format=750w",
@@ -11,4 +11,7 @@ print(database.add_workspace(database.Workspace(
 	"+44 131 560 2003",
 	"Monday - Friday, 9am - 5pm",
 	"Tramsched members should contact Hannah using the email address listed."
-)))
+)
+
+database.set_address_latlong(workspace.address, (55.9471623, -3.203928))
+print(database.add_workspace(workspace))

main.py

 from flask import Flask, request, render_template
 import database
+import json
+import re
 
 app = Flask(__name__)
 
@@ -9,5 +11,13 @@ def home():
 		workspaces = database.get_workspaces()
 		return render_template("home.html", workspaces = workspaces)
 
+@app.route("/map", methods = ["GET"])
+def map():
+	if request.method == "GET":
+		workspaces = database.get_workspaces()
+		data = [{"id": x.id, "name": x.name, "address": x.address, "phoneNumber": x.phone_number, "email": x.email, "website": x.website, "latlong": database.lookup_address(x.address)} for x in workspaces]
+		dumped = json.dumps(data)
+		return render_template("map.html", json = re.sub(r"(?i)\</script\>", "<\/script>", dumped)) # escape </script>
+
 if __name__ == "__main__":
 	app.run(debug = True)

static/scripts/map.js

+var map = L.map("map").setView([54.004, -2.55], 5);
+
+L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+	attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"
+}).addTo(map);
+
+for (let workspace of mapData) {
+	L.marker(workspace.latlong).addTo(map)
+		.bindPopup(`<div class="popup"><div><a href="/workspace/${ encodeURIComponent(workspace.id) }" class="popup-title">${
+			escapeHTML(workspace.name)
+		}</a></div><div>Phone: <a href="tel:${ escapeHTML(workspace.phoneNumber) }">${
+			escapeHTML(workspace.phoneNumber)
+		}</a></div><div>Email: <a href="mailto:${ escapeHTML(workspace.email) }">${
+			escapeHTML(workspace.email)
+		}</a></div><div>Website: <a href="${ escapeHTML(workspace.website) }">${
+			escapeHTML(workspace.website)
+		}</a></div><div>${ escapeHTML(workspace.address) }</div></div>`);
+}
+
+function escapeHTML(html) {
+	let lookup = Object.create(null);
+	lookup["<"] = "&lt;"
+	lookup[">"] = "&gt;"
+	lookup["\""] = "&quot;"
+	lookup["&"] = "&amp";
+	return html.replace(/[<>"&]/g, v => lookup[v] || "");
+}
\ No newline at end of file

static/style.css

@@ -127,3 +127,20 @@ nav li a:hover:last-child {
   color: #666;
   font-weight: 700;
 }
+
+#map {
+  height: 600px;
+}
+
+#map .popup {
+  font-family: CircularXX,sans-serif;
+  font-size: 0.8rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+#map .popup-title {
+  color: inherit;
+  font-size: 1rem;
+  font-weight: 500;
+}

templates/map.html

+{% extends "main.html" %}
+{% block title %}Map{% endblock %}
+{% block mainBlock %}
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+	integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+	crossorigin=""/>
+	<!-- Make sure you put this AFTER Leaflet's CSS -->
+<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
+	integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+	crossorigin=""></script>
+<script>var mapData = {{ json|safe }};</script>
+<div id="map"></div>
+<script src="/static/scripts/map.js"></script>
+{% endblock %}
\ No newline at end of file