@expofp/offline 3.10.1 → 3.11.0

package/dist/lib/generate-offline-map-data.js

@@ -7,8 +7,19 @@ const MAPS_BASE_PATH = 'maps/';
 const MAP_STYLE_PATH = `${MAPS_BASE_PATH}style.json`;
 const MAP_PMTILES_PATH = `${MAPS_BASE_PATH}basemap.pmtiles`;
 const MAP_PMTILES_STYLE_URL = './basemap.pmtiles';
-const MAP_BOUNDS_PADDING_FACTOR = 3;
-const MAP_BOUNDS_MIN_PADDING_DEGREES = 0.02;
+// Pannable-bounds padding for the offline tile region — sized off the viewport at
+// max zoom-out (not the canvas span), so a small area map is extended enough to be
+// seen fully when zoomed out, while a large one only gets a rotation margin. The
+// online runtime pans freely (no maxBounds), so this only bounds how far out
+// offline tiles are pre-generated; a safety factor keeps that region comfortably
+// covered across screen sizes and out to the panned edges.
+const MAP_MAX_ZOOM_OUT = 14;
+const MERCATOR_M_PER_PX_Z0 = 78271.5168;
+const M_PER_DEG_LAT = 110540;
+const OFFLINE_REF_VIEWPORT_W = 3840;
+const OFFLINE_REF_VIEWPORT_H = 2160;
+const MAP_BOUNDS_MIN_PADDING_FRACTION = 0.05;
+const OFFLINE_PADDING_SAFETY = 1.5;
 const DEFAULT_MAP_SOURCE_BASE = 'https://build.protomaps.com';
 const DEFAULT_MAP_SOURCE_LOOKBACK_DAYS = 7;
 const PROTOMAPS_SPRITE_BASE = 'https://protomaps.github.io/basemaps-assets/sprites/v4/white';
@@ -103,19 +114,19 @@ async function derivePaddedVenueBbox(manifest, fpSvgContext, signal) {
     if (!config) {
         throw new Error('Offline map generation requires fpGeo.properties.config.');
     }
-    const svgArea = deriveSvgArea(ctx);
+    const mapBounds = deriveMapBoundsRect(ctx);
     const [anchorA, anchorB] = geoAnchors(config);
     const corners = [
-        [svgArea.min.x, svgArea.min.y],
-        [svgArea.max.x, svgArea.min.y],
-        [svgArea.max.x, svgArea.max.y],
-        [svgArea.min.x, svgArea.max.y],
+        [mapBounds.min.x, mapBounds.min.y],
+        [mapBounds.max.x, mapBounds.min.y],
+        [mapBounds.max.x, mapBounds.max.y],
+        [mapBounds.min.x, mapBounds.max.y],
     ].map(([x, y]) => {
         const { lat, lng } = projectLocalToGps({ x, y }, anchorA, anchorB);
         return [lng, lat];
     });
     if (!corners.every(([lng, lat]) => Number.isFinite(lng) && Number.isFinite(lat))) {
-        throw new Error('Offline map generation produced invalid venue GPS bounds.');
+        throw new Error('Offline map generation produced invalid map GPS bounds.');
     }
     const lngs = corners.map(([lng]) => lng);
     const lats = corners.map(([, lat]) => lat);
@@ -123,8 +134,27 @@ async function derivePaddedVenueBbox(manifest, fpSvgContext, signal) {
     const maxLng = Math.max(...lngs);
     const minLat = Math.min(...lats);
     const maxLat = Math.max(...lats);
-    const lngPadding = Math.max((maxLng - minLng) * MAP_BOUNDS_PADDING_FACTOR, MAP_BOUNDS_MIN_PADDING_DEGREES);
-    const latPadding = Math.max((maxLat - minLat) * MAP_BOUNDS_PADDING_FACTOR, MAP_BOUNDS_MIN_PADDING_DEGREES);
+    const centerLat = (minLat + maxLat) / 2;
+    const cosLat = Math.max(0.01, Math.cos((centerLat * Math.PI) / 180));
+    const mPerDegLng = 111320 * cosLat;
+    // Work in metres (Mercator is isotropic in metres). Content span = canvas AABB.
+    const contentW = (maxLng - minLng) * mPerDegLng;
+    const contentH = (maxLat - minLat) * M_PER_DEG_LAT;
+    // Viewport span at max zoom-out, for a generous reference screen.
+    const mPerPx = (MERCATOR_M_PER_PX_Z0 * cosLat) / 2 ** MAP_MAX_ZOOM_OUT;
+    const viewW = OFFLINE_REF_VIEWPORT_W * mPerPx;
+    const viewH = OFFLINE_REF_VIEWPORT_H * mPerPx;
+    // That viewport rotated by the view bearing has a larger axis-aligned footprint.
+    const bearing = config.bearing ?? 0;
+    const c = Math.abs(Math.cos((bearing * Math.PI) / 180));
+    const s = Math.abs(Math.sin((bearing * Math.PI) / 180));
+    const viewRotW = viewW * c + viewH * s;
+    const viewRotH = viewW * s + viewH * c;
+    // Same rule as online (extend small / constant for large / floor), times safety.
+    const padW = Math.max((viewRotW - contentW) / 2, (viewRotW - viewW) / 2, viewW * MAP_BOUNDS_MIN_PADDING_FRACTION) * OFFLINE_PADDING_SAFETY;
+    const padH = Math.max((viewRotH - contentH) / 2, (viewRotH - viewH) / 2, viewH * MAP_BOUNDS_MIN_PADDING_FRACTION) * OFFLINE_PADDING_SAFETY;
+    const lngPadding = padW / mPerDegLng;
+    const latPadding = padH / M_PER_DEG_LAT;
     return [minLng - lngPadding, minLat - latPadding, maxLng + lngPadding, maxLat + latPadding];
 }
 async function resolveFpSvgContext(manifest, signal) {
@@ -136,26 +166,36 @@ async function resolveFpSvgContext(manifest, signal) {
         .catch(() => Date.now().toString());
     return await execScriptInSandbox(`${manifest.legacyDataUrlBase}fp.svg.js?v=${version}`, signal);
 }
-function deriveSvgArea(ctx) {
+// The offline map extent — the whole SVG canvas, NOT the fit box: the full
+// viewBox unioned with the explicit authored area (`__viewbox` / `rect#VIEWBOX`).
+// Basing this on the
+// authored area alone would, for a small venue `__viewbox`, preload only the
+// venue's tiles and leave the rest of the pannable area blank offline.
+function deriveMapBoundsRect(ctx) {
+    const fpSvg = ctx.__fp;
+    const viewBox = typeof fpSvg === 'string' ? getSvgViewBox(fpSvg) : null;
+    const explicit = deriveExplicitArea(ctx, fpSvg);
+    if (viewBox && explicit)
+        return Box.fromUnion(viewBox, explicit);
+    if (viewBox)
+        return viewBox;
+    if (explicit)
+        return explicit;
+    throw new Error('Offline map generation could not derive the map bounds (no SVG viewBox or VIEWBOX rect).');
+}
+// The explicit author-drawn area, if any: the `__viewbox` global or a
+// `<rect id="VIEWBOX">` element. Null when neither is present.
+function deriveExplicitArea(ctx, fpSvg) {
     const viewboxObj = ctx.__viewbox;
     if (viewboxObj) {
         return new Box(viewboxObj.x, viewboxObj.y, viewboxObj.width, viewboxObj.height);
     }
-    const fpSvg = ctx.__fp;
-    if (typeof fpSvg !== 'string') {
-        throw new Error('Offline map generation requires __fp SVG data.');
+    if (typeof fpSvg === 'string') {
+        const viewboxRect = getSvgRectById(fpSvg, 'VIEWBOX');
+        if (viewboxRect)
+            return viewboxRect;
     }
-    const viewboxRect = getSvgRectById(fpSvg, 'VIEWBOX');
-    if (viewboxRect)
-        return viewboxRect;
-    const svgViewBox = getSvgViewBox(fpSvg);
-    if (!svgViewBox) {
-        throw new Error('Offline map generation could not derive the SVG viewBox.');
-    }
-    // Inflate the viewBox by 10% about its centre (a 5% margin per side), matching
-    // the legacy withPadding(svgViewBox, -w*0.05, -h*0.05): a NEGATIVE padding GREW
-    // the extent per side.
-    return svgViewBox.scale(1.1);
+    return null;
 }
 function getSvgViewBox(svg) {
     const match = svg.match(/\bviewBox\s*=\s*["']([^"']+)["']/i);
@@ -309,28 +349,45 @@ function createMapStyle() {
             {
                 id: 'background',
                 type: 'background',
-                paint: { 'background-color': '#f8f8f6' },
+                paint: { 'background-color': '#f5f1ef' },
             },
             {
                 id: 'earth',
                 type: 'fill',
                 source: 'protomaps',
                 'source-layer': 'earth',
-                paint: { 'fill-color': '#f8f8f6' },
+                paint: { 'fill-color': '#f5f1ef' },
             },
             {
                 id: 'landuse',
                 type: 'fill',
                 source: 'protomaps',
                 'source-layer': 'landuse',
-                paint: { 'fill-color': '#eeeeea', 'fill-opacity': 0.7 },
+                paint: {
+                    'fill-color': [
+                        'match',
+                        ['get', 'kind'],
+                        ['park', 'nature_reserve', 'forest', 'wood', 'grass'],
+                        '#bdebb3',
+                        ['hospital'],
+                        '#f2dfdf',
+                        ['school', 'university'],
+                        '#e6dccf',
+                        ['industrial'],
+                        '#e2e3eb',
+                        ['commercial'],
+                        '#f5efdf',
+                        '#e3d9d4',
+                    ],
+                    'fill-opacity': 0.75,
+                },
             },
             {
                 id: 'water',
                 type: 'fill',
                 source: 'protomaps',
                 'source-layer': 'water',
-                paint: { 'fill-color': '#d8e7ef' },
+                paint: { 'fill-color': '#99ddff' },
             },
             {
                 id: 'buildings',
@@ -338,7 +395,41 @@ function createMapStyle() {
                 source: 'protomaps',
                 'source-layer': 'buildings',
                 minzoom: 13,
-                paint: { 'fill-color': '#dedbd4', 'fill-opacity': 0.65 },
+                paint: { 'fill-color': '#ded6d3', 'fill-opacity': 0.75 },
+            },
+            {
+                id: 'roads-minor-casing',
+                type: 'line',
+                source: 'protomaps',
+                'source-layer': 'roads',
+                minzoom: 12,
+                filter: ['in', ['get', 'kind'], ['literal', ['minor_road', 'path', 'other']]],
+                paint: {
+                    'line-color': '#d2d6df',
+                    'line-width': ['interpolate', ['linear'], ['zoom'], 12, 1, 16, 3.5, 19, 10],
+                },
+            },
+            {
+                id: 'roads-major-casing',
+                type: 'line',
+                source: 'protomaps',
+                'source-layer': 'roads',
+                filter: ['==', ['get', 'kind'], 'major_road'],
+                paint: {
+                    'line-color': '#d2d6df',
+                    'line-width': ['interpolate', ['linear'], ['zoom'], 8, 1.4, 14, 4.5, 18, 14],
+                },
+            },
+            {
+                id: 'roads-highway-casing',
+                type: 'line',
+                source: 'protomaps',
+                'source-layer': 'roads',
+                filter: ['==', ['get', 'kind'], 'highway'],
+                paint: {
+                    'line-color': '#f9fafc',
+                    'line-width': ['interpolate', ['linear'], ['zoom'], 8, 1.6, 14, 5, 18, 16],
+                },
             },
             {
                 id: 'roads-minor',
@@ -357,12 +448,23 @@ function createMapStyle() {
                 type: 'line',
                 source: 'protomaps',
                 'source-layer': 'roads',
-                filter: ['in', ['get', 'kind'], ['literal', ['highway', 'major_road']]],
+                filter: ['==', ['get', 'kind'], 'major_road'],
                 paint: {
                     'line-color': '#ffffff',
                     'line-width': ['interpolate', ['linear'], ['zoom'], 8, 0.8, 14, 3, 18, 12],
                 },
             },
+            {
+                id: 'roads-highway',
+                type: 'line',
+                source: 'protomaps',
+                'source-layer': 'roads',
+                filter: ['==', ['get', 'kind'], 'highway'],
+                paint: {
+                    'line-color': '#ffb366',
+                    'line-width': ['interpolate', ['linear'], ['zoom'], 8, 0.8, 14, 3, 18, 12],
+                },
+            },
             {
                 id: 'road-labels',
                 type: 'symbol',
@@ -377,7 +479,7 @@ function createMapStyle() {
                     'text-size': ['interpolate', ['linear'], ['zoom'], 14, 10, 18, 13],
                 },
                 paint: {
-                    'text-color': '#707070',
+                    'text-color': '#000000',
                     'text-halo-color': '#ffffff',
                     'text-halo-width': 1,
                 },
@@ -404,7 +506,7 @@ function createMapStyle() {
                     'text-offset': [0, 0.8],
                 },
                 paint: {
-                    'text-color': '#545454',
+                    'text-color': '#333333',
                     'text-halo-color': '#ffffff',
                     'text-halo-width': 1.25,
                 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/offline",
-  "version": "3.10.1",
+  "version": "3.11.0",
   "type": "module",
   "description": "CLI tool for creating offline copies of ExpoFP floor plans",
   "homepage": "https://developer.expofp.com/",
@@ -31,10 +31,10 @@
   "dependencies": {
     "debug": "^4.4.3",
     "tslib": "^2.3.0",
-    "@expofp/data": "3.10.1",
-    "@expofp/floorplan": "3.10.1",
-    "@expofp/geometry": "3.10.1",
-    "@expofp/resolve": "3.10.1",
-    "@expofp/utils": "3.10.1"
+    "@expofp/data": "3.11.0",
+    "@expofp/floorplan": "3.11.0",
+    "@expofp/geometry": "3.11.0",
+    "@expofp/resolve": "3.11.0",
+    "@expofp/utils": "3.11.0"
   }
 }