isard 1.6.0 → 1.7.0

package/dist/react/VectorGeometry.js

@@ -1,13 +1,16 @@
-/** `<VectorGeometry>`: the fills and lines of a MapLibre style drawn as geometry (`vectorTiles().vectors()`), among the
- * layers of the components */
+import { jsx as _jsx } from "react/jsx-runtime";
+/** `<Geometry>`: the fills, lines and buildings of the vector tiles around drawn as geometry (`VectorTiles.vectors`),
+ * among the layers of the components; `<VectorGeometry>`, the same with tiles of its own */
 import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState, } from 'react';
-import { MapContext, SwipeContext } from "./context.js";
+import { MapContext, SwipeContext, VectorTilesContext } from "./context.js";
+import { VectorTiles } from "./VectorTiles.js";
 /** The paint properties of `next` that differ from those of `sent`, as `[layer, name, value]` */
 const changed = (sent, next) => Object.entries(next ?? {}).flatMap(([layer, properties]) => Object.entries(properties)
     .filter(([name, value]) => JSON.stringify(sent?.[layer]?.[name]) !== JSON.stringify(value))
     .map(([name, value]) => [layer, name, value]));
-const VectorGeometryComponent = forwardRef(function VectorGeometry({ style, layers, streets, roofs, facades = false, paint, visible = true, order = 0, onLayer }, ref) {
+const GeometryComponent = forwardRef(function Geometry({ layers, streets, roofs, facades = false, paint, visible = true, order = 0, onLayer }, ref) {
     const binding = useContext(MapContext);
+    const tiles = useContext(VectorTilesContext);
     const swipe = useContext(SwipeContext);
     const latest = useRef({ order, onLayer });
     /** The paint properties sent to the current layer */
@@ -15,12 +18,11 @@ const VectorGeometryComponent = forwardRef(function VectorGeometry({ style, laye
     const [layer, setLayer] = useState();
     latest.current = { order, onLayer };
     useImperativeHandle(ref, () => layer, [layer]);
-    // The tiles and their geometry layer created once the map is there, in the declared order; made anew when the
-    // style, the layers kept, the streets or the roofs change; the tiles (and their layer) destroyed when unmounted
+    // The geometry layer created once the tiles are there, in the declared order; made anew when the layers kept, the
+    // streets or the roofs change; removed when unmounted
     useEffect(() => {
-        if (!binding)
+        if (!binding || !tiles)
             return;
-        const tiles = binding.map.vectorTiles(style === undefined ? {} : { style });
         const created = tiles.vectors({
             ...(layers && { layers }),
             ...(streets && { streets }),
@@ -34,10 +36,12 @@ const VectorGeometryComponent = forwardRef(function VectorGeometry({ style, laye
         return () => {
             binding.order.remove(created);
             swipe?.unset(created);
-            tiles.destroy();
+            // Gone already with its tiles, or with the map
+            if (binding.map.hasLayer(created))
+                created.remove();
             setLayer(undefined);
         };
-    }, [binding, swipe, style, layers, streets, roofs]);
+    }, [binding, swipe, tiles, layers, streets, roofs]);
     // The paint properties changed since the last ones sent (all of them to a layer made anew), those of a function
     // once the style is loaded; a later render or layer drops the wait
     useEffect(() => {
@@ -82,9 +86,19 @@ const VectorGeometryComponent = forwardRef(function VectorGeometry({ style, laye
     return null;
 });
 /**
- * The fills and lines of a MapLibre style drawn as geometry on the globe and the relief (`vectorTiles().vectors()`):
- * sharp at any zoom and pitch, restyled by `paint` without cutting the tiles again, picked by feature
- * (`map.pickFeature`). The ref and `onLayer` give its handle (`VectorLayer`: `layers`, `featureAt`, `ready`)
+ * The fills, lines and buildings of the vector tiles around (`<VectorTiles>`) drawn as geometry on the globe and the
+ * relief (`VectorTiles.vectors`): sharp at any zoom and pitch, restyled by `paint` without cutting the tiles again,
+ * picked by feature (`map.pickFeature`). The ref and `onLayer` give its handle (`VectorLayer`: `layers`, `featureAt`,
+ * `ready`)
+ */
+export const Geometry = GeometryComponent;
+const VectorGeometryComponent = forwardRef(function VectorGeometry({ style, ...props }, ref) {
+    return (_jsx(VectorTiles, { ...(style === undefined ? {} : { style }), children: _jsx(GeometryComponent, { ref: ref, ...props }) }));
+});
+/**
+ * The fills and lines of a MapLibre style drawn as geometry, with tiles of its own: a `<Geometry>` in a
+ * `<VectorTiles>` of its `style`. Beside its trees, labels or lamps, a `<VectorTiles>` with each of them as children
+ * shares one set of tiles
  */
 export const VectorGeometry = VectorGeometryComponent;
 //# sourceMappingURL=VectorGeometry.js.map

package/dist/react/VectorGeometry.js.map

@@ -1 +1 @@
-{"version":3,"file":"VectorGeometry.js","sourceRoot":"","sources":["../../src/react/VectorGeometry.tsx"],"names":[],"mappings":"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","sourcesContent":["/** `<VectorGeometry>`: the fills and lines of a MapLibre style drawn as geometry (`vectorTiles().vectors()`), among the\n * layers of the components */\n\nimport {\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport type { Style, StyleLayer } from '../basemap/vectorstyle.ts';\nimport type { VectorLayer, VectorSublayer } from '../layers/vectors.ts';\nimport type { RoofMode } from '../workers/basemap/geometry.ts';\nimport { MapContext, SwipeContext } from './context.ts';\n\nexport interface VectorGeometryProps {\n  /** A style URL or object (default OpenFreeMap's Positron); another one makes the layer anew */\n  style?: string | Style;\n  /** The style layers drawn (default all its fills and lines); another function makes the layer anew, so keep it in a\n   * memo or at the module's level */\n  layers?: (layer: StyleLayer) => boolean;\n  /** The line layers that glow at night (default those whose id names a road); another function makes the layer anew,\n   * as `layers` */\n  streets?: (layer: StyleLayer) => boolean;\n  /** The buildings' roofs (as `vectors({ roofs })`: `'data'` by default); another one makes the layer anew */\n  roofs?: RoofMode;\n  /** The buildings' walls show their windows (default false: `setFacades`, the tiles not cut again) */\n  facades?: boolean;\n  /** Paint properties over the style's (`setPaintProperty`), by style layer id, or by style layer drawn once the style\n   * is loaded (a function of its id, kind, source layer): compared by value, only those changed sent; one taken out\n   * keeps its last value */\n  paint?: Paint | ((layer: VectorSublayer) => Record<string, unknown> | undefined);\n  /** Shown (default true) */\n  visible?: boolean;\n  /** Its place among the layers of the components (as `<Layer order>`) */\n  order?: number;\n  /** The layer, once created and each time it is made anew */\n  onLayer?: (layer: VectorLayer) => void;\n  ref?: Ref<VectorLayer | undefined>;\n}\n\n/** Paint properties by style layer id */\ntype Paint = Record<string, Record<string, unknown>>;\n\n/** The paint properties of `next` that differ from those of `sent`, as `[layer, name, value]` */\nconst changed = (sent: Paint | undefined, next: Paint | undefined): [layer: string, name: string, value: unknown][] =>\n  Object.entries(next ?? {}).flatMap(([layer, properties]) =>\n    Object.entries(properties)\n      .filter(([name, value]) => JSON.stringify(sent?.[layer]?.[name]) !== JSON.stringify(value))\n      .map(([name, value]): [string, string, unknown] => [layer, name, value]),\n  );\n\nconst VectorGeometryComponent = forwardRef<VectorLayer | undefined, Omit<VectorGeometryProps, 'ref'>>(\n  function VectorGeometry(\n    { style, layers, streets, roofs, facades = false, paint, visible = true, order = 0, onLayer },\n    ref,\n  ) {\n    const binding = useContext(MapContext);\n    const swipe = useContext(SwipeContext);\n    const latest = useRef({ order, onLayer });\n    /** The paint properties sent to the current layer */\n    const sent = useRef<Paint>(undefined);\n    const [layer, setLayer] = useState<VectorLayer>();\n\n    latest.current = { order, onLayer };\n    useImperativeHandle(ref, () => layer, [layer]);\n\n    // The tiles and their geometry layer created once the map is there, in the declared order; made anew when the\n    // style, the layers kept, the streets or the roofs change; the tiles (and their layer) destroyed when unmounted\n    useEffect(() => {\n      if (!binding) return;\n\n      const tiles = binding.map.vectorTiles(style === undefined ? {} : { style });\n      const created = tiles.vectors({\n        ...(layers && { layers }),\n        ...(streets && { streets }),\n        ...(roofs && { roofs }),\n      });\n\n      binding.order.place(created, latest.current.order);\n      swipe?.set(created);\n      sent.current = undefined;\n      setLayer(created);\n      latest.current.onLayer?.(created);\n\n      return () => {\n        binding.order.remove(created);\n        swipe?.unset(created);\n        tiles.destroy();\n        setLayer(undefined);\n      };\n    }, [binding, swipe, style, layers, streets, roofs]);\n\n    // The paint properties changed since the last ones sent (all of them to a layer made anew), those of a function\n    // once the style is loaded; a later render or layer drops the wait\n    useEffect(() => {\n      if (!layer) return;\n\n      const apply = (next: Paint | undefined) => {\n        changed(sent.current, next).forEach(([id, name, value]) => {\n          layer.setPaintProperty(id, name, value);\n        });\n        sent.current = next;\n      };\n\n      if (typeof paint !== 'function') {\n        apply(paint);\n\n        return;\n      }\n\n      const wait = { live: true };\n\n      layer.ready.then(\n        () => {\n          if (!wait.live) return;\n          apply(\n            Object.fromEntries(\n              layer.layers.flatMap((l) => {\n                const properties = paint(l);\n\n                return properties ? [[l.id, properties]] : [];\n              }),\n            ),\n          );\n        },\n        () => undefined,\n      );\n\n      return () => {\n        wait.live = false;\n      };\n    }, [layer, paint]);\n\n    // The walls' windows shown or not\n    useEffect(() => {\n      layer?.setFacades(facades);\n    }, [layer, facades]);\n\n    // Shown or hidden\n    useEffect(() => {\n      layer?.setVisible(visible);\n    }, [layer, visible]);\n\n    // A new `order`: moved to its new place among the layers of the components\n    useEffect(() => {\n      if (binding && layer) binding.order.place(layer, order, layer);\n    }, [binding, layer, order]);\n\n    return null;\n  },\n);\n\n/**\n * The fills and lines of a MapLibre style drawn as geometry on the globe and the relief (`vectorTiles().vectors()`):\n * sharp at any zoom and pitch, restyled by `paint` without cutting the tiles again, picked by feature\n * (`map.pickFeature`). The ref and `onLayer` give its handle (`VectorLayer`: `layers`, `featureAt`, `ready`)\n */\nexport const VectorGeometry = VectorGeometryComponent as (props: VectorGeometryProps) => ReactNode;\n"]}
+{"version":3,"file":"VectorGeometry.js","sourceRoot":"","sources":["../../src/react/VectorGeometry.tsx"],"names":[],"mappings":"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","sourcesContent":["/** `<Geometry>`: the fills, lines and buildings of the vector tiles around drawn as geometry (`VectorTiles.vectors`),\n * among the layers of the components; `<VectorGeometry>`, the same with tiles of its own */\n\nimport {\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport type { Style, StyleLayer } from '../basemap/vectorstyle.ts';\nimport type { VectorLayer, VectorSublayer } from '../layers/vectors.ts';\nimport type { RoofMode } from '../util/roofs.ts';\nimport { MapContext, SwipeContext, VectorTilesContext } from './context.ts';\nimport { VectorTiles } from './VectorTiles.tsx';\n\nexport interface GeometryProps {\n  /** The style layers drawn (default all its fills and lines); another function makes the layer anew, so keep it in a\n   * memo or at the module's level */\n  layers?: (layer: StyleLayer) => boolean;\n  /** The line layers that glow at night (default those whose id names a road); another function makes the layer anew,\n   * as `layers` */\n  streets?: (layer: StyleLayer) => boolean;\n  /** The buildings' roofs (as `vectors({ roofs })`: `'data'` by default); another one makes the layer anew */\n  roofs?: RoofMode;\n  /** The buildings' walls show their windows (default false: `setFacades`, the tiles not cut again) */\n  facades?: boolean;\n  /** Paint properties over the style's (`setPaintProperty`), by style layer id, or by style layer drawn once the style\n   * is loaded (a function of its id, kind, source layer): compared by value, only those changed sent; one taken out\n   * keeps its last value */\n  paint?: Paint | ((layer: VectorSublayer) => Record<string, unknown> | undefined);\n  /** Shown (default true) */\n  visible?: boolean;\n  /** Its place among the layers of the components (as `<Layer order>`) */\n  order?: number;\n  /** The layer, once created and each time it is made anew */\n  onLayer?: (layer: VectorLayer) => void;\n  ref?: Ref<VectorLayer | undefined>;\n}\n\nexport interface VectorGeometryProps extends GeometryProps {\n  /** A style URL or object (default OpenFreeMap's Positron); another one makes the layer anew */\n  style?: string | Style;\n}\n\n/** Paint properties by style layer id */\ntype Paint = Record<string, Record<string, unknown>>;\n\n/** The paint properties of `next` that differ from those of `sent`, as `[layer, name, value]` */\nconst changed = (sent: Paint | undefined, next: Paint | undefined): [layer: string, name: string, value: unknown][] =>\n  Object.entries(next ?? {}).flatMap(([layer, properties]) =>\n    Object.entries(properties)\n      .filter(([name, value]) => JSON.stringify(sent?.[layer]?.[name]) !== JSON.stringify(value))\n      .map(([name, value]): [string, string, unknown] => [layer, name, value]),\n  );\n\nconst GeometryComponent = forwardRef<VectorLayer | undefined, Omit<GeometryProps, 'ref'>>(function Geometry(\n  { layers, streets, roofs, facades = false, paint, visible = true, order = 0, onLayer },\n  ref,\n) {\n  const binding = useContext(MapContext);\n  const tiles = useContext(VectorTilesContext);\n  const swipe = useContext(SwipeContext);\n  const latest = useRef({ order, onLayer });\n  /** The paint properties sent to the current layer */\n  const sent = useRef<Paint>(undefined);\n  const [layer, setLayer] = useState<VectorLayer>();\n\n  latest.current = { order, onLayer };\n  useImperativeHandle(ref, () => layer, [layer]);\n\n  // The geometry layer created once the tiles are there, in the declared order; made anew when the layers kept, the\n  // streets or the roofs change; removed when unmounted\n  useEffect(() => {\n    if (!binding || !tiles) return;\n\n    const created = tiles.vectors({\n      ...(layers && { layers }),\n      ...(streets && { streets }),\n      ...(roofs && { roofs }),\n    });\n\n    binding.order.place(created, latest.current.order);\n    swipe?.set(created);\n    sent.current = undefined;\n    setLayer(created);\n    latest.current.onLayer?.(created);\n\n    return () => {\n      binding.order.remove(created);\n      swipe?.unset(created);\n      // Gone already with its tiles, or with the map\n      if (binding.map.hasLayer(created)) created.remove();\n      setLayer(undefined);\n    };\n  }, [binding, swipe, tiles, layers, streets, roofs]);\n\n  // The paint properties changed since the last ones sent (all of them to a layer made anew), those of a function\n  // once the style is loaded; a later render or layer drops the wait\n  useEffect(() => {\n    if (!layer) return;\n\n    const apply = (next: Paint | undefined) => {\n      changed(sent.current, next).forEach(([id, name, value]) => {\n        layer.setPaintProperty(id, name, value);\n      });\n      sent.current = next;\n    };\n\n    if (typeof paint !== 'function') {\n      apply(paint);\n\n      return;\n    }\n\n    const wait = { live: true };\n\n    layer.ready.then(\n      () => {\n        if (!wait.live) return;\n        apply(\n          Object.fromEntries(\n            layer.layers.flatMap((l) => {\n              const properties = paint(l);\n\n              return properties ? [[l.id, properties]] : [];\n            }),\n          ),\n        );\n      },\n      () => undefined,\n    );\n\n    return () => {\n      wait.live = false;\n    };\n  }, [layer, paint]);\n\n  // The walls' windows shown or not\n  useEffect(() => {\n    layer?.setFacades(facades);\n  }, [layer, facades]);\n\n  // Shown or hidden\n  useEffect(() => {\n    layer?.setVisible(visible);\n  }, [layer, visible]);\n\n  // A new `order`: moved to its new place among the layers of the components\n  useEffect(() => {\n    if (binding && layer) binding.order.place(layer, order, layer);\n  }, [binding, layer, order]);\n\n  return null;\n});\n\n/**\n * The fills, lines and buildings of the vector tiles around (`<VectorTiles>`) drawn as geometry on the globe and the\n * relief (`VectorTiles.vectors`): sharp at any zoom and pitch, restyled by `paint` without cutting the tiles again,\n * picked by feature (`map.pickFeature`). The ref and `onLayer` give its handle (`VectorLayer`: `layers`, `featureAt`,\n * `ready`)\n */\nexport const Geometry = GeometryComponent as (props: GeometryProps) => ReactNode;\n\nconst VectorGeometryComponent = forwardRef<VectorLayer | undefined, Omit<VectorGeometryProps, 'ref'>>(\n  function VectorGeometry({ style, ...props }, ref) {\n    return (\n      <VectorTiles {...(style === undefined ? {} : { style })}>\n        <GeometryComponent ref={ref} {...props} />\n      </VectorTiles>\n    );\n  },\n);\n\n/**\n * The fills and lines of a MapLibre style drawn as geometry, with tiles of its own: a `<Geometry>` in a\n * `<VectorTiles>` of its `style`. Beside its trees, labels or lamps, a `<VectorTiles>` with each of them as children\n * shares one set of tiles\n */\nexport const VectorGeometry = VectorGeometryComponent as (props: VectorGeometryProps) => ReactNode;\n"]}

package/dist/react/VectorTiles.d.ts

@@ -0,0 +1,65 @@
+/** `<VectorTiles>`: the vector tiles of a MapLibre style, the parts drawn from them as its children (`<Geometry>`,
+ * `<Trees>`, `<Lamps>`, `<Furniture>`, `<Labels>`) sharing its tiles and its workers */
+import { type ReactNode, type Ref } from 'react';
+import type { VectorExtrusionOptions } from '../basemap/vectortiles/extrusions.ts';
+import type { FurnitureOptions } from '../basemap/vectortiles/furniture.ts';
+import type { LabelsOptions } from '../basemap/vectortiles/labels.ts';
+import type { LampsOptions } from '../basemap/vectortiles/lamps.ts';
+import type { TreesOptions } from '../basemap/vectortiles/trees.ts';
+import type { VectorTiles as VectorTilesHandle, VectorTilesOptions } from '../basemap/vectortiles.ts';
+import type { ExtrusionLayer } from '../layers/extrusions.ts';
+import type { ModelLayer } from '../layers/layers.ts';
+import type { SymbolLayer } from '../layers/symbols.ts';
+import type { LabelCandidate } from '../workers/basemap.worker.ts';
+export interface VectorTilesProps extends VectorTilesOptions {
+    /** The vector tiles, once made and each time they are made anew (another style, other workers) */
+    onTiles?: (tiles: VectorTilesHandle) => void;
+    ref?: Ref<VectorTilesHandle | undefined>;
+    /** The parts drawn from its tiles: `<Geometry>`, `<Trees>`, `<Lamps>`, `<Furniture>`, `<Labels>`, or a component of
+     * your own using `useVectorTiles` */
+    children?: ReactNode;
+}
+/**
+ * The vector tiles of a MapLibre style (`map.vectorTiles`), its children drawing from them: the style's fills, lines
+ * and buildings as geometry (`<Geometry>`), its trees, street lamps, street furniture, labels. One set of tiles and
+ * workers for all of them: the tiles fetched and decoded once. Its options (`style`, `workers`…) compared by value: an
+ * inline object keeps the tiles, another style makes them anew. The ref and `onTiles` give its handle
+ * (`VectorTiles`).
+ *
+ * ```tsx
+ * <VectorTiles style={OPENFREEMAP_STYLES.liberty}>
+ *   <Geometry roofs="generated" />
+ *   <Trees />
+ *   <Labels />
+ * </VectorTiles>
+ * ```
+ */
+export declare const VectorTiles: (props: VectorTilesProps) => ReactNode;
+/** The vector tiles of the `<VectorTiles>` around, once made (undefined before): a part of your own drawn from them
+ * (`streetWind`, `raster`…) */
+export declare const useVectorTiles: () => VectorTilesHandle | undefined;
+/** What a part drawn from the vector tiles around takes besides its options */
+interface PartHandle<L> {
+    /** The layer, once made and each time it is made anew */
+    onLayer?: (layer: L) => void;
+}
+/** The props of a part: its options (those of its `VectorTiles` method), its handle */
+type PartProps<O, L> = O & PartHandle<L> & {
+    ref?: Ref<L | undefined>;
+};
+/** The trees of the vector tiles around on their woods, forests and grass, as 3D models (`VectorTiles.trees`: its
+ * options as props) */
+export declare const Trees: (props: PartProps<TreesOptions, ModelLayer>) => ReactNode;
+/** Street lamps along the streets of the vector tiles around, lit at night (`VectorTiles.lamps`) */
+export declare const Lamps: (props: PartProps<LampsOptions, ModelLayer>) => ReactNode;
+/** The street furniture of the vector tiles around: bus shelters, waste baskets, post boxes, fountains, bicycle racks,
+ * benches (`VectorTiles.furniture`) */
+export declare const Furniture: (props: PartProps<FurnitureOptions, ModelLayer>) => ReactNode;
+/** The labels of the vector tiles around (`VectorTiles.labels`): hidden by the buildings of a `<Geometry>` beside
+ * them */
+export declare const Labels: (props: PartProps<LabelsOptions, SymbolLayer<LabelCandidate>>) => ReactNode;
+/** The buildings of the vector tiles around as an extrusion layer, its style per feature (`VectorTiles.extrusions`:
+ * its options as props; functions compared by identity, so at the module's level or in a memo). The properties of
+ * its features named by `<Extrusions<Building> …>` */
+export declare const Extrusions: <P = Record<string, unknown>>(props: PartProps<VectorExtrusionOptions<P>, ExtrusionLayer<P>>) => ReactNode;
+export {};

package/dist/react/VectorTiles.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** `<VectorTiles>`: the vector tiles of a MapLibre style, the parts drawn from them as its children (`<Geometry>`,
+ * `<Trees>`, `<Lamps>`, `<Furniture>`, `<Labels>`) sharing its tiles and its workers */
+import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import { MapContext, useStableOptions, VectorTilesContext } from "./context.js";
+const VectorTilesComponent = forwardRef(function VectorTiles({ children, onTiles, ...options }, ref) {
+    const binding = useContext(MapContext);
+    const stable = useStableOptions(options);
+    const latest = useRef(onTiles);
+    const [tiles, setTiles] = useState();
+    latest.current = onTiles;
+    useImperativeHandle(ref, () => tiles, [tiles]);
+    // Made once the map is there, anew when its options change; destroyed with its parts when unmounted
+    useEffect(() => {
+        if (!binding)
+            return;
+        const made = binding.map.vectorTiles(stable);
+        setTiles(made);
+        latest.current?.(made);
+        return () => {
+            made.destroy();
+            setTiles(undefined);
+        };
+    }, [binding, stable]);
+    return _jsx(VectorTilesContext.Provider, { value: tiles, children: children });
+});
+/**
+ * The vector tiles of a MapLibre style (`map.vectorTiles`), its children drawing from them: the style's fills, lines
+ * and buildings as geometry (`<Geometry>`), its trees, street lamps, street furniture, labels. One set of tiles and
+ * workers for all of them: the tiles fetched and decoded once. Its options (`style`, `workers`…) compared by value: an
+ * inline object keeps the tiles, another style makes them anew. The ref and `onTiles` give its handle
+ * (`VectorTiles`).
+ *
+ * ```tsx
+ * <VectorTiles style={OPENFREEMAP_STYLES.liberty}>
+ *   <Geometry roofs="generated" />
+ *   <Trees />
+ *   <Labels />
+ * </VectorTiles>
+ * ```
+ */
+export const VectorTiles = VectorTilesComponent;
+/** The vector tiles of the `<VectorTiles>` around, once made (undefined before): a part of your own drawn from them
+ * (`streetWind`, `raster`…) */
+export const useVectorTiles = () => useContext(VectorTilesContext);
+/** A part drawn from the vector tiles around: made by `make` once they are there, anew when its options change
+ * (compared by value, `useStableOptions`), removed when unmounted */
+const usePart = (make, props, ref) => {
+    const binding = useContext(MapContext);
+    const tiles = useContext(VectorTilesContext);
+    // Its options: its props but `onLayer` (a function written inline would make it anew at each render)
+    const stable = useStableOptions({ ...props, onLayer: undefined });
+    const latest = useRef(props.onLayer);
+    const [layer, setLayer] = useState();
+    latest.current = props.onLayer;
+    useImperativeHandle(ref, () => layer, [layer]);
+    useEffect(() => {
+        if (!binding || !tiles)
+            return;
+        const made = make(tiles, stable);
+        setLayer(made);
+        latest.current?.(made);
+        return () => {
+            // Gone already with its tiles, or with the map
+            if (binding.map.hasLayer(made))
+                made.remove();
+            setLayer(undefined);
+        };
+    }, [binding, tiles, stable, make]);
+};
+/** The parts' layers made from the vector tiles (at the module's level: the same functions from render to render) */
+const makeTrees = (tiles, options) => tiles.trees(options);
+const makeLamps = (tiles, options) => tiles.lamps(options);
+const makeFurniture = (tiles, options) => tiles.furniture(options);
+const makeLabels = (tiles, options) => tiles.labels(options);
+const makeExtrusions = (tiles, options) => tiles.extrusions(options);
+const TreesComponent = forwardRef(function Trees(props, ref) {
+    usePart(makeTrees, props, ref);
+    return null;
+});
+const LampsComponent = forwardRef(function Lamps(props, ref) {
+    usePart(makeLamps, props, ref);
+    return null;
+});
+const FurnitureComponent = forwardRef(function Furniture(props, ref) {
+    usePart(makeFurniture, props, ref);
+    return null;
+});
+const LabelsComponent = forwardRef(function Labels(props, ref) {
+    usePart(makeLabels, props, ref);
+    return null;
+});
+const ExtrusionsComponent = forwardRef(function Extrusions(props, ref) {
+    usePart(makeExtrusions, props, ref);
+    return null;
+});
+/** The trees of the vector tiles around on their woods, forests and grass, as 3D models (`VectorTiles.trees`: its
+ * options as props) */
+export const Trees = TreesComponent;
+/** Street lamps along the streets of the vector tiles around, lit at night (`VectorTiles.lamps`) */
+export const Lamps = LampsComponent;
+/** The street furniture of the vector tiles around: bus shelters, waste baskets, post boxes, fountains, bicycle racks,
+ * benches (`VectorTiles.furniture`) */
+export const Furniture = FurnitureComponent;
+/** The labels of the vector tiles around (`VectorTiles.labels`): hidden by the buildings of a `<Geometry>` beside
+ * them */
+export const Labels = LabelsComponent;
+/** The buildings of the vector tiles around as an extrusion layer, its style per feature (`VectorTiles.extrusions`:
+ * its options as props; functions compared by identity, so at the module's level or in a memo). The properties of
+ * its features named by `<Extrusions<Building> …>` */
+export const Extrusions = ExtrusionsComponent;
+//# sourceMappingURL=VectorTiles.js.map

package/dist/react/VectorTiles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorTiles.js","sourceRoot":"","sources":["../../src/react/VectorTiles.tsx"],"names":[],"mappings":"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","sourcesContent":["/** `<VectorTiles>`: the vector tiles of a MapLibre style, the parts drawn from them as its children (`<Geometry>`,\n * `<Trees>`, `<Lamps>`, `<Furniture>`, `<Labels>`) sharing its tiles and its workers */\n\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport type { VectorExtrusionOptions } from '../basemap/vectortiles/extrusions.ts';\nimport type { FurnitureOptions } from '../basemap/vectortiles/furniture.ts';\nimport type { LabelsOptions } from '../basemap/vectortiles/labels.ts';\nimport type { LampsOptions } from '../basemap/vectortiles/lamps.ts';\nimport type { TreesOptions } from '../basemap/vectortiles/trees.ts';\nimport type { VectorTiles as VectorTilesHandle, VectorTilesOptions } from '../basemap/vectortiles.ts';\nimport type { ExtrusionLayer } from '../layers/extrusions.ts';\nimport type { Layer as LayerHandle, ModelLayer } from '../layers/layers.ts';\nimport type { SymbolLayer } from '../layers/symbols.ts';\nimport type { LabelCandidate } from '../workers/basemap.worker.ts';\nimport { MapContext, useStableOptions, VectorTilesContext } from './context.ts';\n\nexport interface VectorTilesProps extends VectorTilesOptions {\n  /** The vector tiles, once made and each time they are made anew (another style, other workers) */\n  onTiles?: (tiles: VectorTilesHandle) => void;\n  ref?: Ref<VectorTilesHandle | undefined>;\n  /** The parts drawn from its tiles: `<Geometry>`, `<Trees>`, `<Lamps>`, `<Furniture>`, `<Labels>`, or a component of\n   * your own using `useVectorTiles` */\n  children?: ReactNode;\n}\n\nconst VectorTilesComponent = forwardRef<VectorTilesHandle | undefined, Omit<VectorTilesProps, 'ref'>>(\n  function VectorTiles({ children, onTiles, ...options }, ref) {\n    const binding = useContext(MapContext);\n    const stable = useStableOptions(options);\n    const latest = useRef(onTiles);\n    const [tiles, setTiles] = useState<VectorTilesHandle>();\n\n    latest.current = onTiles;\n    useImperativeHandle(ref, () => tiles, [tiles]);\n\n    // Made once the map is there, anew when its options change; destroyed with its parts when unmounted\n    useEffect(() => {\n      if (!binding) return;\n\n      const made = binding.map.vectorTiles(stable);\n\n      setTiles(made);\n      latest.current?.(made);\n\n      return () => {\n        made.destroy();\n        setTiles(undefined);\n      };\n    }, [binding, stable]);\n\n    return <VectorTilesContext.Provider value={tiles}>{children}</VectorTilesContext.Provider>;\n  },\n);\n\n/**\n * The vector tiles of a MapLibre style (`map.vectorTiles`), its children drawing from them: the style's fills, lines\n * and buildings as geometry (`<Geometry>`), its trees, street lamps, street furniture, labels. One set of tiles and\n * workers for all of them: the tiles fetched and decoded once. Its options (`style`, `workers`…) compared by value: an\n * inline object keeps the tiles, another style makes them anew. The ref and `onTiles` give its handle\n * (`VectorTiles`).\n *\n * ```tsx\n * <VectorTiles style={OPENFREEMAP_STYLES.liberty}>\n *   <Geometry roofs=\"generated\" />\n *   <Trees />\n *   <Labels />\n * </VectorTiles>\n * ```\n */\nexport const VectorTiles = VectorTilesComponent as (props: VectorTilesProps) => ReactNode;\n\n/** The vector tiles of the `<VectorTiles>` around, once made (undefined before): a part of your own drawn from them\n * (`streetWind`, `raster`…) */\nexport const useVectorTiles = (): VectorTilesHandle | undefined => useContext(VectorTilesContext);\n\n/** What a part drawn from the vector tiles around takes besides its options */\ninterface PartHandle<L> {\n  /** The layer, once made and each time it is made anew */\n  onLayer?: (layer: L) => void;\n}\n\n/** The props of a part: its options (those of its `VectorTiles` method), its handle */\ntype PartProps<O, L> = O & PartHandle<L> & { ref?: Ref<L | undefined> };\n\n/** A part drawn from the vector tiles around: made by `make` once they are there, anew when its options change\n * (compared by value, `useStableOptions`), removed when unmounted */\nconst usePart = <O extends object, L extends LayerHandle>(\n  make: (tiles: VectorTilesHandle, options: O) => L,\n  props: O & PartHandle<L>,\n  ref: ForwardedRef<L | undefined>,\n): void => {\n  const binding = useContext(MapContext);\n  const tiles = useContext(VectorTilesContext);\n  // Its options: its props but `onLayer` (a function written inline would make it anew at each render)\n  const stable = useStableOptions({ ...props, onLayer: undefined });\n  const latest = useRef(props.onLayer);\n  const [layer, setLayer] = useState<L>();\n\n  latest.current = props.onLayer;\n  useImperativeHandle(ref, () => layer, [layer]);\n  useEffect(() => {\n    if (!binding || !tiles) return;\n\n    const made = make(tiles, stable);\n\n    setLayer(made);\n    latest.current?.(made);\n\n    return () => {\n      // Gone already with its tiles, or with the map\n      if (binding.map.hasLayer(made)) made.remove();\n      setLayer(undefined);\n    };\n  }, [binding, tiles, stable, make]);\n};\n\n/** The parts' layers made from the vector tiles (at the module's level: the same functions from render to render) */\nconst makeTrees = (tiles: VectorTilesHandle, options: TreesOptions) => tiles.trees(options);\nconst makeLamps = (tiles: VectorTilesHandle, options: LampsOptions) => tiles.lamps(options);\nconst makeFurniture = (tiles: VectorTilesHandle, options: FurnitureOptions) => tiles.furniture(options);\nconst makeLabels = (tiles: VectorTilesHandle, options: LabelsOptions) => tiles.labels(options);\nconst makeExtrusions = (tiles: VectorTilesHandle, options: VectorExtrusionOptions<Record<string, unknown>>) =>\n  tiles.extrusions(options);\n\nconst TreesComponent = forwardRef<ModelLayer | undefined, TreesOptions & PartHandle<ModelLayer>>(\n  function Trees(props, ref) {\n    usePart(makeTrees, props, ref);\n\n    return null;\n  },\n);\n\nconst LampsComponent = forwardRef<ModelLayer | undefined, LampsOptions & PartHandle<ModelLayer>>(\n  function Lamps(props, ref) {\n    usePart(makeLamps, props, ref);\n\n    return null;\n  },\n);\n\nconst FurnitureComponent = forwardRef<ModelLayer | undefined, FurnitureOptions & PartHandle<ModelLayer>>(\n  function Furniture(props, ref) {\n    usePart(makeFurniture, props, ref);\n\n    return null;\n  },\n);\n\nconst LabelsComponent = forwardRef<\n  SymbolLayer<LabelCandidate> | undefined,\n  LabelsOptions & PartHandle<SymbolLayer<LabelCandidate>>\n>(function Labels(props, ref) {\n  usePart(makeLabels, props, ref);\n\n  return null;\n});\n\nconst ExtrusionsComponent = forwardRef<\n  ExtrusionLayer<Record<string, unknown>> | undefined,\n  VectorExtrusionOptions<Record<string, unknown>> & PartHandle<ExtrusionLayer<Record<string, unknown>>>\n>(function Extrusions(props, ref) {\n  usePart(makeExtrusions, props, ref);\n\n  return null;\n});\n\n/** The trees of the vector tiles around on their woods, forests and grass, as 3D models (`VectorTiles.trees`: its\n * options as props) */\nexport const Trees = TreesComponent as (props: PartProps<TreesOptions, ModelLayer>) => ReactNode;\n\n/** Street lamps along the streets of the vector tiles around, lit at night (`VectorTiles.lamps`) */\nexport const Lamps = LampsComponent as (props: PartProps<LampsOptions, ModelLayer>) => ReactNode;\n\n/** The street furniture of the vector tiles around: bus shelters, waste baskets, post boxes, fountains, bicycle racks,\n * benches (`VectorTiles.furniture`) */\nexport const Furniture = FurnitureComponent as (props: PartProps<FurnitureOptions, ModelLayer>) => ReactNode;\n\n/** The labels of the vector tiles around (`VectorTiles.labels`): hidden by the buildings of a `<Geometry>` beside\n * them */\nexport const Labels = LabelsComponent as (props: PartProps<LabelsOptions, SymbolLayer<LabelCandidate>>) => ReactNode;\n\n/** The buildings of the vector tiles around as an extrusion layer, its style per feature (`VectorTiles.extrusions`:\n * its options as props; functions compared by identity, so at the module's level or in a memo). The properties of\n * its features named by `<Extrusions<Building> …>` */\nexport const Extrusions = ExtrusionsComponent as <P = Record<string, unknown>>(\n  props: PartProps<VectorExtrusionOptions<P>, ExtrusionLayer<P>>,\n) => ReactNode;\n"]}

package/dist/react/context.d.ts

@@ -1,5 +1,6 @@
 /** What the components of a map share: the map, the order of their layers, the viewsheds, the swipe and the marker
  * around; the hooks */
+import type { VectorTiles } from '../basemap/vectortiles.ts';
 import type { LayerOrder } from '../bind/layers.ts';
 import type { Layer as LayerHandle } from '../layers/layers.ts';
 import type { GeoMap } from '../map.ts';
@@ -25,9 +26,17 @@ export declare const MarkerContext: import("react").Context<{
     marker: MarkerHandle;
     lonLat: LonLat;
 } | undefined>;
+/** The vector tiles of the `<VectorTiles>` around, once the map is there */
+export declare const VectorTilesContext: import("react").Context<VectorTiles | undefined>;
 /** The map of the `<IsardMap>` around, once created (undefined before) */
 export declare const useMap: () => GeoMap | undefined;
 /** Listens to an event of the map around while the component is mounted; the listener may change at each render */
 export declare const useMapEvent: <K extends keyof MapEvents>(type: K, listener: (event: MapEvents[K]) => void) => void;
 /** The entries of an object whose value is defined (`exactOptionalPropertyTypes`) */
 export declare const defined: <T extends object>(object: T) => { [K in keyof T]?: Exclude<T[K], undefined>; };
+/** A key of options that changes when they do: plain data compared by value (an object written inline in the JSX
+ * keeps its key), functions, layers and binary data by identity */
+export declare const propsKey: (options: object) => string;
+/** The same options while their `propsKey` stays: an object written inline in the JSX, the same from render to render
+ * until a value in it changes */
+export declare const useStableOptions: <T extends object>(options: T) => T;

package/dist/react/context.js

@@ -5,6 +5,8 @@ export const MapContext = createContext(undefined);
 export const SwipeContext = createContext(undefined);
 /** The marker of a `<Marker>` around and its position (a `<Popup>` in it opens on its click, at that position) */
 export const MarkerContext = createContext(undefined);
+/** The vector tiles of the `<VectorTiles>` around, once the map is there */
+export const VectorTilesContext = createContext(undefined);
 /** The map of the `<IsardMap>` around, once created (undefined before) */
 export const useMap = () => useContext(MapContext)?.map;
 /** Listens to an event of the map around while the component is mounted; the listener may change at each render */
@@ -17,4 +19,34 @@ export const useMapEvent = (type, listener) => {
 };
 /** The entries of an object whose value is defined (`exactOptionalPropertyTypes`) */
 export const defined = (object) => Object.fromEntries(Object.entries(object).filter(([, value]) => value !== undefined));
+/** Numbers standing for the values compared by identity in `propsKey`, the next one */
+const identities = { of: new WeakMap(), next: 1 };
+/** The number of a value compared by identity */
+const identity = (value) => {
+    const known = identities.of.get(value);
+    if (known !== undefined)
+        return known;
+    identities.of.set(value, identities.next);
+    identities.next += 1;
+    return identities.next - 1;
+};
+/** A value compared by identity: a function, a class's instance (a layer), binary data */
+const byIdentity = (value) => typeof value === 'function' ||
+    (typeof value === 'object' &&
+        value !== null &&
+        !Array.isArray(value) &&
+        Object.getPrototypeOf(value) !== Object.prototype &&
+        Object.getPrototypeOf(value) !== null);
+/** A key of options that changes when they do: plain data compared by value (an object written inline in the JSX
+ * keeps its key), functions, layers and binary data by identity */
+export const propsKey = (options) => JSON.stringify(options, (_, value) => (byIdentity(value) ? `#${identity(value)}` : value));
+/** The same options while their `propsKey` stays: an object written inline in the JSX, the same from render to render
+ * until a value in it changes */
+export const useStableOptions = (options) => {
+    const kept = useRef({ key: propsKey(options), options });
+    const key = propsKey(options);
+    if (kept.current.key !== key)
+        kept.current = { key, options };
+    return kept.current.options;
+};
 //# sourceMappingURL=context.js.map

package/dist/react/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/react/context.ts"],"names":[],"mappings":"AAAA;uBACuB;AAEvB,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAerE,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAsB,SAAS,CAAC,CAAC;AASxE,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAyB,SAAS,CAAC,CAAC;AAE7E,kHAAkH;AAClH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAuD,SAAS,CAAC,CAAC;AAE5G,0EAA0E;AAC1E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAuB,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC;AAE5E,mHAAmH;AACnH,MAAM,CAAC,MAAM,WAAW,GAAG,CAA4B,IAAO,EAAE,QAAuC,EAAQ,EAAE;IAC/G,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAEhC,MAAM,CAAC,OAAO,GAAG,QAAQ,CAAC;IAC1B,uGAAuG;IACvG,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;AAChF,CAAC,CAAC;AAEF,qFAAqF;AACrF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAmB,MAAS,EAAiD,EAAE,CACpG,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS,CAAC,CAEnF,CAAC","sourcesContent":["/** What the components of a map share: the map, the order of their layers, the viewsheds, the swipe and the marker\n * around; the hooks */\n\nimport { createContext, useContext, useEffect, useRef } from 'react';\nimport type { LayerOrder } from '../bind/layers.ts';\nimport type { Layer as LayerHandle } from '../layers/layers.ts';\nimport type { GeoMap } from '../map.ts';\nimport type { LonLat, MapEvents, ViewshedOptions } from '../types.ts';\nimport type { Marker as MarkerHandle } from '../ui/overlay.ts';\n\nexport interface Binding {\n  map: GeoMap;\n  order: LayerOrder;\n  /** The observers of the `<Viewshed>` components, set on the map together */\n  viewsheds: Map<object, ViewshedOptions>;\n  applyViewsheds(): void;\n}\n\nexport const MapContext = createContext<Binding | undefined>(undefined);\n\n/** The layers of a `<Swipe>` around, its `<Layer>` children joining it; `other`: the group of its `<SwipeOther>` */\nexport interface SwipeGroup {\n  set(layer: LayerHandle): void;\n  unset(layer: LayerHandle): void;\n  other?: SwipeGroup;\n}\n\nexport const SwipeContext = createContext<SwipeGroup | undefined>(undefined);\n\n/** The marker of a `<Marker>` around and its position (a `<Popup>` in it opens on its click, at that position) */\nexport const MarkerContext = createContext<{ marker: MarkerHandle; lonLat: LonLat } | undefined>(undefined);\n\n/** The map of the `<IsardMap>` around, once created (undefined before) */\nexport const useMap = (): GeoMap | undefined => useContext(MapContext)?.map;\n\n/** Listens to an event of the map around while the component is mounted; the listener may change at each render */\nexport const useMapEvent = <K extends keyof MapEvents>(type: K, listener: (event: MapEvents[K]) => void): void => {\n  const map = useMap();\n  const latest = useRef(listener);\n\n  latest.current = listener;\n  // Listening while mounted, to the listener of the last render; stops when unmounted or the map changes\n  useEffect(() => map?.on(type, (event) => latest.current(event)), [map, type]);\n};\n\n/** The entries of an object whose value is defined (`exactOptionalPropertyTypes`) */\nexport const defined = <T extends object>(object: T): { [K in keyof T]?: Exclude<T[K], undefined> } =>\n  Object.fromEntries(Object.entries(object).filter(([, value]) => value !== undefined)) as {\n    [K in keyof T]?: Exclude<T[K], undefined>;\n  };\n"]}
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/react/context.ts"],"names":[],"mappings":"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","sourcesContent":["/** What the components of a map share: the map, the order of their layers, the viewsheds, the swipe and the marker\n * around; the hooks */\n\nimport { createContext, useContext, useEffect, useRef } from 'react';\nimport type { VectorTiles } from '../basemap/vectortiles.ts';\nimport type { LayerOrder } from '../bind/layers.ts';\nimport type { Layer as LayerHandle } from '../layers/layers.ts';\nimport type { GeoMap } from '../map.ts';\nimport type { LonLat, MapEvents, ViewshedOptions } from '../types.ts';\nimport type { Marker as MarkerHandle } from '../ui/overlay.ts';\n\nexport interface Binding {\n  map: GeoMap;\n  order: LayerOrder;\n  /** The observers of the `<Viewshed>` components, set on the map together */\n  viewsheds: Map<object, ViewshedOptions>;\n  applyViewsheds(): void;\n}\n\nexport const MapContext = createContext<Binding | undefined>(undefined);\n\n/** The layers of a `<Swipe>` around, its `<Layer>` children joining it; `other`: the group of its `<SwipeOther>` */\nexport interface SwipeGroup {\n  set(layer: LayerHandle): void;\n  unset(layer: LayerHandle): void;\n  other?: SwipeGroup;\n}\n\nexport const SwipeContext = createContext<SwipeGroup | undefined>(undefined);\n\n/** The marker of a `<Marker>` around and its position (a `<Popup>` in it opens on its click, at that position) */\nexport const MarkerContext = createContext<{ marker: MarkerHandle; lonLat: LonLat } | undefined>(undefined);\n\n/** The vector tiles of the `<VectorTiles>` around, once the map is there */\nexport const VectorTilesContext = createContext<VectorTiles | undefined>(undefined);\n\n/** The map of the `<IsardMap>` around, once created (undefined before) */\nexport const useMap = (): GeoMap | undefined => useContext(MapContext)?.map;\n\n/** Listens to an event of the map around while the component is mounted; the listener may change at each render */\nexport const useMapEvent = <K extends keyof MapEvents>(type: K, listener: (event: MapEvents[K]) => void): void => {\n  const map = useMap();\n  const latest = useRef(listener);\n\n  latest.current = listener;\n  // Listening while mounted, to the listener of the last render; stops when unmounted or the map changes\n  useEffect(() => map?.on(type, (event) => latest.current(event)), [map, type]);\n};\n\n/** The entries of an object whose value is defined (`exactOptionalPropertyTypes`) */\nexport const defined = <T extends object>(object: T): { [K in keyof T]?: Exclude<T[K], undefined> } =>\n  Object.fromEntries(Object.entries(object).filter(([, value]) => value !== undefined)) as {\n    [K in keyof T]?: Exclude<T[K], undefined>;\n  };\n\n/** Numbers standing for the values compared by identity in `propsKey`, the next one */\nconst identities = { of: new WeakMap<object, number>(), next: 1 };\n\n/** The number of a value compared by identity */\nconst identity = (value: object): number => {\n  const known = identities.of.get(value);\n\n  if (known !== undefined) return known;\n  identities.of.set(value, identities.next);\n  identities.next += 1;\n\n  return identities.next - 1;\n};\n\n/** A value compared by identity: a function, a class's instance (a layer), binary data */\nconst byIdentity = (value: unknown): value is object =>\n  typeof value === 'function' ||\n  (typeof value === 'object' &&\n    value !== null &&\n    !Array.isArray(value) &&\n    Object.getPrototypeOf(value) !== Object.prototype &&\n    Object.getPrototypeOf(value) !== null);\n\n/** A key of options that changes when they do: plain data compared by value (an object written inline in the JSX\n * keeps its key), functions, layers and binary data by identity */\nexport const propsKey = (options: object): string =>\n  JSON.stringify(options, (_, value: unknown) => (byIdentity(value) ? `#${identity(value)}` : value));\n\n/** The same options while their `propsKey` stays: an object written inline in the JSX, the same from render to render\n * until a value in it changes */\nexport const useStableOptions = <T extends object>(options: T): T => {\n  const kept = useRef({ key: propsKey(options), options });\n  const key = propsKey(options);\n\n  if (kept.current.key !== key) kept.current = { key, options };\n\n  return kept.current.options;\n};\n"]}

package/dist/react/index.d.ts

@@ -4,6 +4,11 @@
  *
  * ```tsx
  * <IsardMap preset="ign-3d" center={[2.35, 48.85]} zoom={15} style={{ height: 400 }}>
+ *   <VectorTiles style={OPENFREEMAP_STYLES.liberty}>
+ *     <Geometry roofs="generated" />
+ *     <Trees />
+ *     <Labels />
+ *   </VectorTiles>
  *   <Layer type="lines" data={routes} color="#0057b8" width={3} />
  *   <Marker lonLat={[2.35, 48.85]}><Popup>Here</Popup></Marker>
  * </IsardMap>
@@ -23,5 +28,6 @@ export { Marker, type MarkerProps } from './Marker.tsx';
 export { Panel, type PanelProps } from './Panel.tsx';
 export { Popup, type PopupProps } from './Popup.tsx';
 export { Swipe, SwipeOther, type SwipeProps } from './Swipe.tsx';
-export { VectorGeometry, type VectorGeometryProps } from './VectorGeometry.tsx';
+export { Geometry, type GeometryProps, VectorGeometry, type VectorGeometryProps } from './VectorGeometry.tsx';
+export { Extrusions, Furniture, Labels, Lamps, Trees, useVectorTiles, VectorTiles, type VectorTilesProps, } from './VectorTiles.tsx';
 export { Viewshed } from './Viewshed.tsx';

package/dist/react/index.js

@@ -4,6 +4,11 @@
  *
  * ```tsx
  * <IsardMap preset="ign-3d" center={[2.35, 48.85]} zoom={15} style={{ height: 400 }}>
+ *   <VectorTiles style={OPENFREEMAP_STYLES.liberty}>
+ *     <Geometry roofs="generated" />
+ *     <Trees />
+ *     <Labels />
+ *   </VectorTiles>
  *   <Layer type="lines" data={routes} color="#0057b8" width={3} />
  *   <Marker lonLat={[2.35, 48.85]}><Popup>Here</Popup></Marker>
  * </IsardMap>
@@ -18,6 +23,7 @@ export { Marker } from "./Marker.js";
 export { Panel } from "./Panel.js";
 export { Popup } from "./Popup.js";
 export { Swipe, SwipeOther } from "./Swipe.js";
-export { VectorGeometry } from "./VectorGeometry.js";
+export { Geometry, VectorGeometry } from "./VectorGeometry.js";
+export { Extrusions, Furniture, Labels, Lamps, Trees, useVectorTiles, VectorTiles, } from "./VectorTiles.js";
 export { Viewshed } from "./Viewshed.js";
 //# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAOH,OAAO,EAAE,OAAO,EAAqB,MAAM,cAAe,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAyB,MAAM,kBAAmB,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,QAAQ,EAA0C,MAAM,eAAgB,CAAC;AAClF,OAAO,EAAE,KAAK,EAAsD,MAAM,YAAa,CAAC;AACxF,OAAO,EAAE,MAAM,EAAoB,MAAM,aAAc,CAAC;AACxD,OAAO,EAAE,KAAK,EAAmB,MAAM,YAAa,CAAC;AACrD,OAAO,EAAE,KAAK,EAAmB,MAAM,YAAa,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAmB,MAAM,YAAa,CAAC;AACjE,OAAO,EAAE,cAAc,EAA4B,MAAM,qBAAsB,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC","sourcesContent":["/**\n * Isard in React: the map, its layers, markers, popups, panels and effects as components, created when they mount,\n * updated by the least their props need and removed when they unmount.\n *\n * ```tsx\n * <IsardMap preset=\"ign-3d\" center={[2.35, 48.85]} zoom={15} style={{ height: 400 }}>\n *   <Layer type=\"lines\" data={routes} color=\"#0057b8\" width={3} />\n *   <Marker lonLat={[2.35, 48.85]}><Popup>Here</Popup></Marker>\n * </IsardMap>\n * ```\n */\n\nexport type { Layer as LayerHandle } from '../layers/layers.ts';\nexport type { GeoMap, LayerSpec } from '../map.ts';\nexport type { LonLat } from '../types.ts';\nexport type { Marker as MarkerHandle, Panel as PanelHandle, Popup as PopupHandle } from '../ui/overlay.ts';\nexport type { Camera } from '../wasm/isard.js';\nexport { Control, type ControlProps } from './Control.tsx';\nexport { CustomLayer, type CustomLayerProps } from './CustomLayer.tsx';\nexport { useMap, useMapEvent } from './context.ts';\nexport { IsardMap, type IsardMapProps, type MapEventProps } from './IsardMap.tsx';\nexport { Layer, type LayerHandles, type LayerProps, type LayerType } from './Layer.tsx';\nexport { Marker, type MarkerProps } from './Marker.tsx';\nexport { Panel, type PanelProps } from './Panel.tsx';\nexport { Popup, type PopupProps } from './Popup.tsx';\nexport { Swipe, SwipeOther, type SwipeProps } from './Swipe.tsx';\nexport { VectorGeometry, type VectorGeometryProps } from './VectorGeometry.tsx';\nexport { Viewshed } from './Viewshed.tsx';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAOH,OAAO,EAAE,OAAO,EAAqB,MAAM,cAAe,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAyB,MAAM,kBAAmB,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,QAAQ,EAA0C,MAAM,eAAgB,CAAC;AAClF,OAAO,EAAE,KAAK,EAAsD,MAAM,YAAa,CAAC;AACxF,OAAO,EAAE,MAAM,EAAoB,MAAM,aAAc,CAAC;AACxD,OAAO,EAAE,KAAK,EAAmB,MAAM,YAAa,CAAC;AACrD,OAAO,EAAE,KAAK,EAAmB,MAAM,YAAa,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAmB,MAAM,YAAa,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAsB,cAAc,EAA4B,MAAM,qBAAsB,CAAC;AAC9G,OAAO,EACL,UAAU,EACV,SAAS,EACT,MAAM,EACN,KAAK,EACL,KAAK,EACL,cAAc,EACd,WAAW,GAEZ,MAAM,kBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC","sourcesContent":["/**\n * Isard in React: the map, its layers, markers, popups, panels and effects as components, created when they mount,\n * updated by the least their props need and removed when they unmount.\n *\n * ```tsx\n * <IsardMap preset=\"ign-3d\" center={[2.35, 48.85]} zoom={15} style={{ height: 400 }}>\n *   <VectorTiles style={OPENFREEMAP_STYLES.liberty}>\n *     <Geometry roofs=\"generated\" />\n *     <Trees />\n *     <Labels />\n *   </VectorTiles>\n *   <Layer type=\"lines\" data={routes} color=\"#0057b8\" width={3} />\n *   <Marker lonLat={[2.35, 48.85]}><Popup>Here</Popup></Marker>\n * </IsardMap>\n * ```\n */\n\nexport type { Layer as LayerHandle } from '../layers/layers.ts';\nexport type { GeoMap, LayerSpec } from '../map.ts';\nexport type { LonLat } from '../types.ts';\nexport type { Marker as MarkerHandle, Panel as PanelHandle, Popup as PopupHandle } from '../ui/overlay.ts';\nexport type { Camera } from '../wasm/isard.js';\nexport { Control, type ControlProps } from './Control.tsx';\nexport { CustomLayer, type CustomLayerProps } from './CustomLayer.tsx';\nexport { useMap, useMapEvent } from './context.ts';\nexport { IsardMap, type IsardMapProps, type MapEventProps } from './IsardMap.tsx';\nexport { Layer, type LayerHandles, type LayerProps, type LayerType } from './Layer.tsx';\nexport { Marker, type MarkerProps } from './Marker.tsx';\nexport { Panel, type PanelProps } from './Panel.tsx';\nexport { Popup, type PopupProps } from './Popup.tsx';\nexport { Swipe, SwipeOther, type SwipeProps } from './Swipe.tsx';\nexport { Geometry, type GeometryProps, VectorGeometry, type VectorGeometryProps } from './VectorGeometry.tsx';\nexport {\n  Extrusions,\n  Furniture,\n  Labels,\n  Lamps,\n  Trees,\n  useVectorTiles,\n  VectorTiles,\n  type VectorTilesProps,\n} from './VectorTiles.tsx';\nexport { Viewshed } from './Viewshed.tsx';\n"]}

package/dist/types.d.ts

@@ -410,4 +410,6 @@ export interface LayerHost {
     replaceLayer(layer: Layer, old: number): void;
     /** Resolves once the map is idle (everything in view loaded and drawn) */
     whenIdle(): Promise<void>;
+    /** Work the map waits on before it is idle (`GeoMap.track`) */
+    track<T>(work: Promise<T>): Promise<T>;
 }