Skip to content
Snippets Groups Projects
Verified Commit f138bc8a authored by Robert Metcalf's avatar Robert Metcalf
Browse files

add interactive map and lookup from address to latitude and longitude

parent d5359632
No related branches found
No related tags found
2 merge requests!8Allow working spaces to be added,!6Add interactive map
import os import os
import sqlite3 import sqlite3
from typing import List from typing import List, Tuple
DATABASE = os.path.join(os.path.dirname(os.path.abspath(__file__)), "database.db") DATABASE = os.path.join(os.path.dirname(os.path.abspath(__file__)), "database.db")
...@@ -50,8 +50,25 @@ with Connection() as conn: ...@@ -50,8 +50,25 @@ with Connection() as conn:
url text NOT NULL, url text NOT NULL,
workspace_id integer NOT NULL, workspace_id integer NOT NULL,
FOREIGN KEY (workspace_id) REFERENCES Workspaces(id))''') 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() 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: class Workspace:
def __init__(self, name: str, def __init__(self, name: str,
address: str, main_photo: str, additional_photos: List[str], description: str, address: str, main_photo: str, additional_photos: List[str], description: str,
...@@ -96,5 +113,3 @@ def get_workspaces(): ...@@ -96,5 +113,3 @@ def get_workspaces():
with Connection() as conn: with Connection() as conn:
conn.execute("SELECT * FROM Workspaces") conn.execute("SELECT * FROM Workspaces")
return [Workspace.from_query(conn, x) for x in conn.cursor.fetchall()] return [Workspace.from_query(conn, x) for x in conn.cursor.fetchall()]
print(get_workspaces())
\ No newline at end of file
import database import database
print(database.add_workspace(database.Workspace( workspace = database.Workspace(
"CodeBase", "CodeBase",
"CodeBase Edinburgh, 37a Castle Terrace, Edinburgh, EH1 2EL", "CodeBase Edinburgh, 37a Castle Terrace, Edinburgh, EH1 2EL",
"https://images.squarespace-cdn.com/content/v1/55439320e4b0f92b5d6c4c8b/1505921023376-PAHUDHVOOKIYF4XQPHOO/5951229048_3e3d50fcb1_o.jpg?format=750w", "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( ...@@ -11,4 +11,7 @@ print(database.add_workspace(database.Workspace(
"+44 131 560 2003", "+44 131 560 2003",
"Monday - Friday, 9am - 5pm", "Monday - Friday, 9am - 5pm",
"Tramsched members should contact Hannah using the email address listed." "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))
from flask import Flask, request, render_template from flask import Flask, request, render_template
import database import database
import json
import re
app = Flask(__name__) app = Flask(__name__)
...@@ -9,5 +11,13 @@ def home(): ...@@ -9,5 +11,13 @@ def home():
workspaces = database.get_workspaces() workspaces = database.get_workspaces()
return render_template("home.html", workspaces = 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__": if __name__ == "__main__":
app.run(debug = True) app.run(debug = True)
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
...@@ -127,3 +127,20 @@ nav li a:hover:last-child { ...@@ -127,3 +127,20 @@ nav li a:hover:last-child {
color: #666; color: #666;
font-weight: 700; 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;
}
{% 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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment