Front end changes

application/factory.py

@@ -31,6 +31,7 @@
     fact,
     guidance_,
     about_,
+    tiles_,
     osMapOAuth,
 )
 from application.settings import get_settings
@@ -269,6 +270,7 @@ def add_routers(app):
     app.include_router(map_.router, prefix="/map", include_in_schema=False)
     app.include_router(guidance_.router, prefix="/guidance", include_in_schema=False)
     app.include_router(about_.router, prefix="/about", include_in_schema=False)
+    app.include_router(tiles_.router, prefix="/tiles", include_in_schema=False)
 
 
 def add_static(app):
@@ -291,9 +293,9 @@ def add_middleware(app):
     @app.middleware("http")
     async def add_strict_transport_security_header(request: Request, call_next):
         response = await call_next(request)
-        response.headers[
-            "Strict-Transport-Security"
-        ] = f"max-age={SECONDS_IN_TWO_YEARS}; includeSubDomains; preload"
+        response.headers["Strict-Transport-Security"] = (
+            f"max-age={SECONDS_IN_TWO_YEARS}; includeSubDomains; preload"
+        )
         return response
 
     @app.middleware("http")

application/routers/tiles_.py

@@ -136,7 +136,7 @@ def sql_to_pbf(sql):
 # ============================================================
 
 
-@router.get("/{dataset}/{z}/{x}/{y}.vector.{fmt}")
+@router.get("/-/tiles/{dataset}/{z}/{x}/{y}.vector.{fmt}")
 async def read_tiles_from_postgres(dataset: str, z: int, x: int, y: int, fmt: str):
     tile = {"dataset": dataset, "zoom": z, "x": x, "y": y, "format": fmt}
 

assets/javascripts/MapController.js

@@ -47,7 +47,7 @@ export default class MapController {
       },
     ];
     this.paint_options = params.paint_options || null;
-    this.customStyleJson = "/static/javascripts/OS_VTS_3857_3D.json";
+    this.customStyleJson = "/static/javascripts/base-tile.json";
     this.customStyleLayersToBringToFront = ["OS/Names/National/Country"];
     this.useOAuth2 = params.useOAuth2 || false;
     this.layers = params.layers || [];

assets/javascripts/utils.js

@@ -1,32 +1,31 @@
-import MapController from './MapController.js';
+import MapController from "./MapController.js";
 
-export const newMapController = (params = { layers: []}) => {
-
-  const datasetUrl = params.DATASETTE_TILES_URL || '';
+export const newMapController = (params = { layers: [] }) => {
+  const datasetUrl = params.DATASETTE_TILES_URL || "";
 
   let mapParams = {
     ...params,
-    vectorSource: `${datasetUrl}/-/tiles/dataset_tiles/{z}/{x}/{y}.vector.pbf`,
-    datasetVectorUrl: `${datasetUrl}/-/tiles/`,
-    datasets: params.layers.map(d => d.dataset),
-    sources: params.layers.map(d => {
+    vectorSource: `${datasetUrl}/dataset_tiles/{z}/{x}/{y}.vector.pbf`,
+    datasetVectorUrl: `${datasetUrl}/`,
+    datasets: params.layers.map((d) => d.dataset),
+    sources: params.layers.map((d) => {
       return {
-        name: d.dataset + '-source',
-        vectorSource: `${datasetUrl}/-/tiles/"${d.dataset}/{z}/{x}/{y}.vector.pbf`,
-      }
+        name: d.dataset + "-source",
+        vectorSource: `${datasetUrl}/${d.dataset}/{z}/{x}/{y}.vector.pbf`,
+      };
     }),
-    mapId: params.mapId || 'map',
+    mapId: params.mapId || "map",
   };
   return new MapController(mapParams);
-}
+};
 
 export const capitalizeFirstLetter = (string) => {
   return string.charAt(0).toUpperCase() + string.slice(1);
-}
+};
 
 export const convertNodeListToArray = (nl) => {
-  return Array.prototype.slice.call(nl)
-}
+  return Array.prototype.slice.call(nl);
+};
 
 // Prevents scrolling of the page when the user triggers the wheel event on a div
 // while still allowing scrolling of any specified scrollable child elements.
@@ -38,22 +37,21 @@ export const preventScroll = (scrollableChildElements = []) => {
       return e.target.closest(c) != null;
     });
 
-    if(!closestClassName){
+    if (!closestClassName) {
       e.preventDefault();
-      return false
+      return false;
     }
 
     const list = e.target.closest(closestClassName);
 
-    if(!list){
+    if (!list) {
       e.preventDefault();
-      return false
+      return false;
     }
 
     var verticalScroll = list.scrollHeight > list.clientHeight;
-    if(!verticalScroll)
-      e.preventDefault();
+    if (!verticalScroll) e.preventDefault();
 
     return false;
-  }
-}
+  };
+};