Expose min/maxzoom in UI

dfpc-coe · Sep 20, 2024 · 6b967df · 6b967df
1 parent a754c46
commit 6b967df
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 31 deletions.
diff --git a/api/lib/control/tilejson.ts b/api/lib/control/tilejson.ts
@@ -1,4 +1,7 @@
+import zlib from 'zlib';
+import { Readable } from 'node:stream';
 import type { BBox } from 'geojson';
+import type { Response } from 'express';
 import { pointOnFeature } from '@turf/point-on-feature';
 import { bboxPolygon } from '@turf/bbox-polygon';
 import { Static, Type } from '@sinclair/typebox'
@@ -66,4 +69,40 @@ export default class TileJSON {
             layers: []
         }
     }
+
+    static async tile(
+        config: TileJSONInterface,
+        z: number, x: number, y: number,
+        res: Response
+    ): Promise<void> {
+        const url = new URL(config.url
+            .replace(/\{\$?z\}/, String(z))
+            .replace(/\{\$?x\}/, String(x))
+            .replace(/\{\$?y\}/, String(y))
+        );
+
+        const proxy = await fetch(url)
+
+        res.status(proxy.status);
+        for (const h of [
+            'content-type',
+            'content-length',
+            'content-encoding'
+        ]) {
+            const ph = proxy.headers.get(h);
+            if (ph) res.append(h, ph);
+        }
+
+        if (proxy.headers.get('content-encoding') === 'gzip') {
+            const gz = zlib.createGzip();
+
+            // @ts-expect-error Doesnt meet TS def
+            Readable.fromWeb(proxy.body)
+                .pipe(gz)
+                .pipe(res);
+        } else {
+            // @ts-expect-error Doesnt meet TS def
+            Readable.fromWeb(proxy.body).pipe(res);
+        }
+    }
 }
diff --git a/api/routes/overlays.ts b/api/routes/overlays.ts
@@ -1,12 +1,10 @@
 import { Type } from '@sinclair/typebox'
-import { Readable } from 'node:stream';
 import Cacher from '../lib/cacher.js';
 import TileJSON, { TileJSONType } from '../lib/control/tilejson.js';
 import Config from '../lib/config.js';
 import Schema from '@openaddresses/batch-schema';
 import Err from '@openaddresses/batch-error';
 import Auth from '../lib/auth.js';
-import zlib from 'zlib';
 import { OverlayResponse } from '../lib/types.js'
 import { Overlay } from '../lib/schema.js';
 import { sql } from 'drizzle-orm';
@@ -189,35 +187,13 @@ export default async function router(schema: Schema, config: Config) {
                 return await config.models.Overlay.from(req.params.overlay);
             });
 
-            const url = new URL(overlay.url
-                .replace('{z}', req.params.z)
-                .replace('{x}', req.params.x)
-                .replace('{y}', req.params.y)
+            return TileJSON.tile(
+                overlay,
+                req.params.z,
+                req.params.x,
+                req.params.y,
+                res
             );
-
-            const proxy = await fetch(url)
-
-            res.status(proxy.status);
-            for (const h of [
-                'content-type',
-                'content-length',
-                'content-encoding'
-            ]) {
-                const ph = proxy.headers.get(h);
-                if (ph) res.append(h, ph);
-            }
-
-            if (proxy.headers.get('content-encoding') === 'gzip') {
-                const gz = zlib.createGzip();
-
-                // @ts-expect-error Doesnt meet TS def
-                return Readable.fromWeb(proxy.body)
-                    .pipe(gz)
-                    .pipe(res);
-            } else {
-                // @ts-expect-error Doesnt meet TS def
-                return Readable.fromWeb(proxy.body).pipe(res);
-            }
         } catch (err) {
             return Err.respond(err, res);
         }

diff --git a/api/web/src/components/Admin/AdminOverlaysEdit.vue b/api/web/src/components/Admin/AdminOverlaysEdit.vue
@@ -23,6 +23,18 @@
                         label='Data URL'
                     />
                 </div>
+                <div class='col-12 col-md-6'>
+                    <TablerInput
+                        v-model='overlay.minzoom'
+                        label='MinZoom'
+                    />
+                </div>
+                <div class='col-12 col-md-6'>
+                    <TablerInput
+                        v-model='overlay.maxzoom'
+                        label='MaxZoom'
+                    />
+                </div>
                 <div class='col-12 col-md-6'>
                     <TablerEnum
                         v-model='overlay.type'
@@ -83,7 +95,9 @@ export default {
                 name: '',
                 url: '',
                 type: 'vector',
-                styles: ''
+                styles: '',
+                minzoom: 0,
+                maxzoom: 16,
             }
         }
     },