Basic setup of stonewater map app

etl/customers/stonewater/map_app/config.py

@@ -0,0 +1,8 @@
+import os
+import json
+import dotenv
+
+# When running locally, we'll need to load the .env file
+dotenv.load_dotenv()
+
+MAPBOX_ACCESS_TOKEN = os.getenv("MAPBOX_ACCESS_TOKEN")

etl/customers/stonewater/map_app/map_page.py

@@ -0,0 +1,94 @@
+import dash_bootstrap_components as dbc
+from dash import html, dcc
+import json
+import plotly.graph_objects as go
+import pandas as pd
+
+from config import MAPBOX_ACCESS_TOKEN
+
+
+def make_map(locations):
+    if not locations:
+        return None
+
+    df = pd.DataFrame(locations)
+
+    # Create custom hover text
+    df['hover_text'] = df.apply(
+        lambda row: f"UPRN: {int(row['uprn'])}<br>Address: {row['standardised_address']}<br>Postcode: "
+                    f"{row['standardised_postcode']}<br>Latitude: {row['LATITUDE']}<br>Longitude: {row['LONGITUDE']}",
+        axis=1)
+
+    data = [
+        go.Scattermapbox(
+            lat=df["LATITUDE"].tolist(),
+            lon=df["LONGITUDE"].tolist(),
+            mode="markers",
+            marker=go.scattermapbox.Marker(size=10, color="#027fa6"),
+            text=df["hover_text"],  # Use the custom hover text
+            hoverinfo='text'
+        )
+    ]
+
+    layout = go.Layout(
+        autosize=True,
+        hovermode="closest",
+        mapbox=go.layout.Mapbox(
+            accesstoken=MAPBOX_ACCESS_TOKEN,
+            bearing=0,
+            center=go.layout.mapbox.Center(lat=53, lon=-1.5),
+            pitch=0,
+            zoom=4,
+        ),
+        margin={"t": 0},
+    )
+
+    fig = go.Figure(data=data, layout=layout)
+
+    plot = dcc.Graph(figure=fig, config={"displayModeBar": False})
+
+    return plot
+
+
+def layout():
+    # Get the data
+    with open("Stonewater Mapping Data.json", "r") as file:
+        locations = json.load(file)
+
+    page = dbc.Container(
+        [
+            dbc.Row(
+                dbc.Col(
+                    html.Div(
+                        [
+                            html.H1(
+                                "Stonewater Survey Map",
+                                style={"font-size": "2.5rem", "font-weight": "bold", "margin-bottom": "20px"}
+                            ),
+                            html.P(
+                                "This map shows the location of the properties that are to be surveyed by Osmosis.",
+                                style={"font-size": "1.25rem", "margin-bottom": "40px"}
+                            ),
+                        ],
+                        className="text-center"
+                    ),
+                    width=12
+                ),
+                className="mt-5"
+            ),
+            dbc.Row(
+                dbc.Col(
+                    make_map(locations=locations),
+                    width=12,
+                    align="center",
+                    className="text-center"
+                ),
+                className="metric-row",
+                justify="center"
+            )
+        ],
+        fluid=True,
+        className="p-5"
+    )
+
+    return page

etl/customers/stonewater/map_app/requirements.txt

@@ -0,0 +1,12 @@
+dash==2.8.1
+gunicorn
+pandas
+dash-bootstrap-components==1.3.1
+boto3
+dropbox
+Flask-Caching
+dash-extensions
+mysql-connector-python
+sqlalchemy
+werkzeug==2.3.7
+python-dotenv

etl/customers/stonewater/map_app/server.py

@@ -0,0 +1,45 @@
+import logging
+import secrets
+
+import dash_bootstrap_components as dbc
+from dash import html
+from dash_extensions.enrich import DashProxy, MultiplexerTransform
+import flask
+from map_page import layout
+
+logger = logging.getLogger(__name__)
+
+# We just use a simple secret key for the moment
+
+SECRET_KEY = secrets.token_hex(24)
+
+
+def init_app():
+    app = DashProxy(
+        __name__,
+        server=flask.Flask(__name__),
+        suppress_callback_exceptions=True,
+        external_stylesheets=[
+            dbc.themes.BOOTSTRAP,
+            dbc.icons.FONT_AWESOME,
+            "https://fonts.googleapis.com/css?family=Comfortaa",
+        ],
+        transforms=[MultiplexerTransform()]
+    )
+
+    server = app.server
+
+    # Set app config
+    server.config.update(
+        SECRET_KEY=SECRET_KEY,
+    )
+
+    app.title = "Hesta X Stonewater"
+
+    # Define the layout
+    app.layout = layout()
+
+    return app
+
+
+app = init_app()

etl/customers/stonewater/map_app/wsgi.py

@@ -0,0 +1,8 @@
+# Callbacks must be imported to run the app
+import callbacks  # NOQA
+from server import app
+
+application = app.server
+
+if __name__ == "__main__":
+    app.run_server(port=8080, debug=True, host="0.0.0.0")