@fusion.dev/helix-map 0.112.0 → 0.114.0

package/dist/connect-map/connect-map.d.ts

@@ -33,9 +33,13 @@ export interface MapDriver {
         stop(): void;
     };
     /**
-     * Calls `done` once the renderer has drawn its view with its tiles, and
-     * returns what stops the waiting. What takes a snapshot drawn on the server
-     * away; without it, the snapshot stays under the renderer's drawing.
+     * Calls `done` once the renderer has drawn its view whole, with every tile
+     * it needs and the ground where there is terrain, and returns what stops the
+     * waiting. Leave the frame's own shapes out, since a route that animates is
+     * redrawn every frame and would never count as drawn. What takes a snapshot
+     * drawn on the server away and sends the frame's `helix-map-ready`; without
+     * it, the snapshot stays under the renderer's drawing and the frame is never
+     * `:state(ready)`.
      */
     ready?(done: () => void): () => void;
     /**

package/dist/connect-map/connect-map.js

@@ -726,23 +726,23 @@ export const connectMap = (frame, driver, options = {}) => {
         snapshot.style.display = 'none';
     };
     const snapshots = [...frame.querySelectorAll(':scope > [data-helix-map-snapshot]')];
-    const stopWaiting = snapshots.length > 0
-        ? driver.ready?.(() => {
-            const motion = motionOf(frame, 'step');
-            for (const snapshot of snapshots) {
-                if (!motion || typeof snapshot.animate !== 'function') {
-                    away(snapshot);
-                    continue;
-                }
-                snapshot
-                    .animate([{ opacity: 1 }, { opacity: 0 }], {
-                    duration: motion.duration,
-                    easing: `linear(${Array.from({ length: 13 }, (_, step) => motion.easing(step / 12).toFixed(3)).join(', ')})`,
-                })
-                    .finished.then(() => away(snapshot), () => away(snapshot));
+    const stopWaiting = driver.ready?.(() => {
+        place();
+        frame.drawn?.();
+        const motion = motionOf(frame, 'step');
+        for (const snapshot of snapshots) {
+            if (!motion || typeof snapshot.animate !== 'function') {
+                away(snapshot);
+                continue;
             }
-        })
-        : undefined;
+            snapshot
+                .animate([{ opacity: 1 }, { opacity: 0 }], {
+                duration: motion.duration,
+                easing: `linear(${Array.from({ length: 13 }, (_, step) => motion.easing(step / 12).toFixed(3)).join(', ')})`,
+            })
+                .finished.then(() => away(snapshot), () => away(snapshot));
+        }
+    });
     let live = true;
     let placing = false;
     let drawing = false;
@@ -876,6 +876,7 @@ export const connectMap = (frame, driver, options = {}) => {
             stopViewing?.();
             clearTimeout(looking);
             stopWaiting?.();
+            frame.drawn?.(false);
             stopTheming?.();
             styled.disconnect();
             children.disconnect();

package/dist/maplibre/index.d.ts

@@ -1,4 +1,4 @@
-export type { MapLibreStyle, MapStyleOptions } from '../style/index.js';
-export { mapLibreStyle } from '../style/index.js';
+export type { MapLandmark, MapLibreStyle, MapStyleOptions } from '../style/index.js';
+export { MAP_LANDMARKS, mapLibreStyle } from '../style/index.js';
 export type { FollowedTheme, MapLibreMap } from './maplibre-driver.js';
 export { followTheme, mapLibreDriver } from './maplibre-driver.js';

package/dist/maplibre/index.js

@@ -1,2 +1,2 @@
-export { mapLibreStyle } from '../style/index.js';
+export { MAP_LANDMARKS, mapLibreStyle } from '../style/index.js';
 export { followTheme, mapLibreDriver } from './maplibre-driver.js';

package/dist/maplibre/maplibre-driver.d.ts

@@ -101,6 +101,11 @@ export interface MapLibreMap {
     loaded?(): boolean;
     /** Whether the style has loaded: `true`, and anything else is not yet. MapLibre 6 types it loosely. */
     isStyleLoaded?(): unknown;
+    /**
+     * Whether one source has every tile the view needs, once the view has asked
+     * for them; a source no shown layer draws from has nothing to wait for.
+     */
+    isSourceLoaded?(id: string): boolean;
     /** The canvas, which MapLibre makes focusable. */
     getCanvas(): HTMLElement;
     /** The middle of the view, which a map-type picture is drawn around. */

package/dist/maplibre/maplibre-driver.js

@@ -1056,30 +1056,68 @@ export const mapLibreDriver = (map) => ({
         return { x, y };
     },
     ready: (done) => {
-        if (map.loaded?.() && map.areTilesLoaded?.()) {
-            done();
-            return () => undefined;
+        if (!map.isSourceLoaded) {
+            if (map.loaded?.() && map.areTilesLoaded?.()) {
+                done();
+                return () => undefined;
+            }
+            let finished = false;
+            const finish = () => {
+                if (!finished) {
+                    finished = true;
+                    map.off('load', finish);
+                    map.off('render', drawn);
+                    done();
+                }
+            };
+            const drawn = () => {
+                if (map.isStyleLoaded?.() === true && map.areTilesLoaded?.() === true) {
+                    finish();
+                }
+            };
+            map.on('load', finish);
+            map.on('render', drawn);
+            return () => {
+                map.off('load', finish);
+                map.off('render', drawn);
+            };
         }
-        let finished = false;
-        const finish = () => {
-            if (finished) {
-                return;
+        let tiled;
+        const read = () => {
+            const sources = map.getStyle()?.sources;
+            tiled = sources
+                ? Object.entries(sources)
+                    .filter(([, source]) => source.type !== 'geojson')
+                    .map(([id]) => id)
+                : undefined;
+        };
+        const whole = () => {
+            if (tiled === undefined) {
+                read();
             }
-            finished = true;
-            stop();
+            return tiled?.every((id) => map.isSourceLoaded?.(id) === true) === true;
+        };
+        if (whole()) {
             done();
+            return () => undefined;
+        }
+        const restyled = () => {
+            tiled = undefined;
         };
-        const drawn = () => {
-            if (map.isStyleLoaded?.() === true && map.areTilesLoaded?.() === true) {
-                finish();
+        const heard = () => {
+            if (whole()) {
+                stop();
+                done();
             }
         };
         const stop = () => {
-            map.off('load', finish);
-            map.off('render', drawn);
+            map.off('styledata', restyled);
+            map.off('render', heard);
+            map.off('idle', heard);
         };
-        map.on('load', finish);
-        map.on('render', drawn);
+        map.on('styledata', restyled);
+        map.on('render', heard);
+        map.on('idle', heard);
         return stop;
     },
     rotate: ({ by, to }, motion) => {

package/dist/style/index.d.ts

@@ -1,4 +1,4 @@
 export type { MapColors } from './map-colors.js';
 export { colorsNow, colorsReady, fontReady, mapColorsFrom, mapFontFrom, PATIENCE, settledColor, } from './map-colors.js';
-export type { MapImage, MapLibreStyle, MapStyleOptions } from './map-style.js';
-export { mapLibreStyle } from './map-style.js';
+export type { MapImage, MapLandmark, MapLibreStyle, MapStyleOptions } from './map-style.js';
+export { MAP_LANDMARKS, mapLibreStyle } from './map-style.js';

package/dist/style/index.js

@@ -1,2 +1,2 @@
 export { colorsNow, colorsReady, fontReady, mapColorsFrom, mapFontFrom, PATIENCE, settledColor, } from './map-colors.js';
-export { mapLibreStyle } from './map-style.js';
+export { MAP_LANDMARKS, mapLibreStyle } from './map-style.js';

package/dist/style/map-style.d.ts

@@ -23,6 +23,18 @@ export interface MapStyleOptions {
      * every zoom, which MapLibre 4 also needs, since it has no globe.
      */
     globe?: boolean | undefined;
+    /**
+     * Which landmarks the map draws, each kind an icon in a hue of its own.
+     * `true`, the default, draws every kind in `MAP_LANDMARKS`; `false` draws
+     * none, for a map whose own markers are the places a reader is looking for;
+     * a list draws those kinds and no others, such as `['nature', 'transit']`.
+     *
+     * **An option of the style, so it holds through a theme change.**
+     * `followTheme` builds the style again from the same options when the mode
+     * changes, where a page hiding the layers itself had them back on every
+     * rebuild and had to learn their ids from this file to do it.
+     */
+    landmarks?: boolean | readonly MapLandmark[] | undefined;
     /**
      * The language labels are written in, where the tiles carry it, falling back
      * to the Latin name and then the local one. `en` by default.
@@ -78,6 +90,13 @@ export type MapImage = {
     ink: string;
     kind: 'sign';
 };
+/**
+ * The kinds of landmark the style draws, each an icon in a hue of its own, for
+ * `MapStyleOptions.landmarks`.
+ */
+export declare const MAP_LANDMARKS: readonly ['culture', 'food', 'health', 'learning', 'lodging', 'nature', 'shopping', 'sport', 'transit'];
+/** One kind of landmark, such as `nature` for parks and gardens. */
+export type MapLandmark = (typeof MAP_LANDMARKS)[number];
 /**
  * A MapLibre style in the page's theme.
  *

package/dist/style/map-style.js

@@ -4,6 +4,17 @@ const OPENFREEMAP = {
     glyphs: 'https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf',
     tiles: 'https://tiles.openfreemap.org/planet',
 };
+export const MAP_LANDMARKS = [
+    'culture',
+    'food',
+    'health',
+    'learning',
+    'lodging',
+    'nature',
+    'shopping',
+    'sport',
+    'transit',
+];
 const LANDMARKS = [
     {
         classes: ['park', 'garden', 'playground', 'campsite', 'golf', 'zoo'],
@@ -151,7 +162,10 @@ export const mapLibreStyle = (colors, options = {}) => {
     const images = {};
     const landmarkImage = ['match', ['get', 'class']];
     const landmarkColor = ['match', ['get', 'class']];
-    for (const { classes, group, hue, icon } of LANDMARKS) {
+    const kept = LANDMARKS.filter(({ group }) => options.landmarks === undefined || options.landmarks === true
+        ? true
+        : options.landmarks !== false && options.landmarks.includes(group));
+    for (const { classes, group, hue, icon } of kept) {
         const color = cssColor(hued(hue));
         const image = {
             color,
@@ -166,7 +180,7 @@ export const mapLibreStyle = (colors, options = {}) => {
     }
     landmarkImage.push('');
     landmarkColor.push(legible(land, 0.6));
-    const classesOf = (everyday) => LANDMARKS.filter((one) => (one.everyday === true) === everyday).flatMap(({ classes }) => classes);
+    const classesOf = (everyday) => kept.filter((one) => (one.everyday === true) === everyday).flatMap(({ classes }) => classes);
     const signFont = face ? `"${face}", sans-serif` : 'sans-serif';
     const signs = `helix-sign-${stamp(signFont)}-`;
     images[`${signs}interstate`] = {
@@ -375,7 +389,9 @@ export const mapLibreStyle = (colors, options = {}) => {
                 'source-layer': 'transportation_name',
                 type: 'symbol',
             },
-            ...[false, true].map((everyday) => ({
+            ...[false, true]
+                .filter((everyday) => classesOf(everyday).length > 0)
+                .map((everyday) => ({
                 filter: ['match', ['get', 'class'], classesOf(everyday), true, false],
                 id: everyday ? 'label-landmark-everyday' : 'label-landmark',
                 layout: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-map",
   "description": "Connects the Helix Map frame to a map renderer: MapLibre, Leaflet, or a driver of your own.",
-  "version": "0.112.0",
+  "version": "0.114.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -43,14 +43,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.112.0",
-    "@fusion.dev/helix-icons": "0.112.0",
+    "@fusion.dev/helix-core": "0.114.0",
+    "@fusion.dev/helix-icons": "0.114.0",
     "@mapbox/vector-tile": "^3.0.0",
     "pbf": "^5.1.2"
   },
   "devDependencies": {
-    "@fusion.dev/helix-headless": "0.112.0",
-    "@fusion.dev/helix-testing": "0.112.0",
+    "@fusion.dev/helix-headless": "0.114.0",
+    "@fusion.dev/helix-testing": "0.114.0",
     "@maplibre/maplibre-gl-style-spec": "^26.4.4",
     "@types/bun": "^1.3.0",
     "@types/leaflet": "^1.9.20",