isard 1.6.0 → 1.8.0

package/dist/react/CustomLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomLayer.js","sourceRoot":"","sources":["../../src/react/CustomLayer.tsx"],"names":[],"mappings":"AAAA,8FAA8F;AAE9F,OAAO,EAAkB,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAS1C,iHAAiH;AACjH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,EAAoB,EAAa,EAAE;IAC/E,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IACvC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACnC,MAAM,MAAM,GAAG,MAAM,CAAc,SAAS,CAAC,CAAC;IAE9C,sHAAsH;IACtH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAEjD,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC;QACxB,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;QAElD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC;YAC3B,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC;gBAAE,MAAM,CAAC,MAAM,EAAE,CAAC;QACpD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAErB,2EAA2E;IAC3E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,MAAM,CAAC,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAC5F,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAErB,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","sourcesContent":["/** `<CustomLayer>`: your WebGL code or a three.js scene among the layers of the components */\n\nimport { type ReactNode, useContext, useEffect, useRef } from 'react';\nimport type { CustomLayerInterface, Layer as LayerHandle } from '../layers/layers.ts';\nimport { MapContext } from './context.ts';\n\nexport interface CustomLayerProps {\n  /** Your WebGL code: `onAdd`, `render`, `onRemove` (see `map.addCustomLayer`); another object makes it anew */\n  layer: CustomLayerInterface;\n  /** Its place among the layers of the components (as `<Layer order>`) */\n  order?: number;\n}\n\n/** Your WebGL code or a three.js scene drawn in the map's frame and depth, among the layers of the components */\nexport const CustomLayer = ({ layer, order = 0 }: CustomLayerProps): ReactNode => {\n  const binding = useContext(MapContext);\n  const initialOrder = useRef(order);\n  const handle = useRef<LayerHandle>(undefined);\n\n  // Added once the map is there, in the declared order; removed when unmounted, made anew when the layer object changes\n  useEffect(() => {\n    if (!binding) return;\n\n    const custom = binding.map.addCustomLayer(layer);\n\n    handle.current = custom;\n    binding.order.place(custom, initialOrder.current);\n\n    return () => {\n      handle.current = undefined;\n      binding.order.remove(custom);\n      if (binding.map.hasLayer(custom)) custom.remove();\n    };\n  }, [binding, layer]);\n\n  // A new `order`: moved to its new place among the layers of the components\n  useEffect(() => {\n    if (binding && handle.current) binding.order.place(handle.current, order, handle.current);\n  }, [binding, order]);\n\n  return null;\n};\n"]}
+{"version":3,"file":"CustomLayer.js","sourceRoot":"","sources":["../../src/react/CustomLayer.tsx"],"names":[],"mappings":"AAAA,8FAA8F;AAE9F,OAAO,EAAkB,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AASnD,iHAAiH;AACjH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,EAAoB,EAAa,EAAE;IAC/E,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IACvC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACnC,MAAM,MAAM,GAAG,MAAM,CAAc,SAAS,CAAC,CAAC;IAC9C,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,sHAAsH;IACtH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAEjD,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC;QACxB,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;QAE5D,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC;YAC3B,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC;gBAAE,MAAM,CAAC,MAAM,EAAE,CAAC;QACpD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IAE3B,2EAA2E;IAC3E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,MAAM,CAAC,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;IACrG,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAErB,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","sourcesContent":["/** `<CustomLayer>`: your WebGL code or a three.js scene among the layers of the components */\n\nimport { type ReactNode, useContext, useEffect, useRef } from 'react';\nimport type { CustomLayerInterface, Layer as LayerHandle } from '../layers/layers.ts';\nimport { MapContext, useRank } from './context.ts';\n\nexport interface CustomLayerProps {\n  /** Your WebGL code: `onAdd`, `render`, `onRemove` (see `map.addCustomLayer`); another object makes it anew */\n  layer: CustomLayerInterface;\n  /** Its place among the layers of the components (as `<Layer order>`) */\n  order?: number;\n}\n\n/** Your WebGL code or a three.js scene drawn in the map's frame and depth, among the layers of the components */\nexport const CustomLayer = ({ layer, order = 0 }: CustomLayerProps): ReactNode => {\n  const binding = useContext(MapContext);\n  const initialOrder = useRef(order);\n  const handle = useRef<LayerHandle>(undefined);\n  const rank = useRank();\n\n  // Added once the map is there, in the declared order; removed when unmounted, made anew when the layer object changes\n  useEffect(() => {\n    if (!binding) return;\n\n    const custom = binding.map.addCustomLayer(layer);\n\n    handle.current = custom;\n    binding.order.place(custom, initialOrder.current, { rank });\n\n    return () => {\n      handle.current = undefined;\n      binding.order.remove(custom);\n      if (binding.map.hasLayer(custom)) custom.remove();\n    };\n  }, [binding, layer, rank]);\n\n  // A new `order`: moved to its new place among the layers of the components\n  useEffect(() => {\n    if (binding && handle.current) binding.order.place(handle.current, order, { old: handle.current });\n  }, [binding, order]);\n\n  return null;\n};\n"]}

package/dist/react/Layer.d.ts

@@ -29,7 +29,7 @@ export type LayerType = LayerSpec['type'];
 export type LayerProps<P = Record<string, unknown>, T extends LayerType = LayerType> = Extract<BoundLayerSpec<P>, {
     type: T;
 }> & {
-    /** Its place among the layers of the components: from the bottom up, the same order by mounting (default 0) */
+    /** Its place among the layers of the components: from the bottom up, the same order as declared (default 0) */
     order?: number;
     /** The layer, once created and each time it is made anew */
     onLayer?: (layer: LayerHandles<P>[T]) => void;

package/dist/react/Layer.js

@@ -2,7 +2,7 @@
  * declared order */
 import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState, } from 'react';
 import { addBoundLayer, applyLayerChange, layerChange, rebuildBoundLayer, } from "../bind/layers.js";
-import { MapContext, SwipeContext } from "./context.js";
+import { MapContext, SwipeContext, useRank } from "./context.js";
 const LayerComponent = forwardRef(function Layer(props, ref) {
     const binding = useContext(MapContext);
     const swipe = useContext(SwipeContext);
@@ -11,6 +11,7 @@ const LayerComponent = forwardRef(function Layer(props, ref) {
     const mounted = useRef(undefined);
     const latest = useRef({ spec, order, onLayer });
     const [layer, setLayer] = useState();
+    const rank = useRank();
     latest.current = { spec, order, onLayer };
     useImperativeHandle(ref, () => layer, [layer]);
     // Added once the map is there, removed when unmounted (or when the map goes)
@@ -19,7 +20,7 @@ const LayerComponent = forwardRef(function Layer(props, ref) {
             return;
         const { spec, order, onLayer } = latest.current;
         const created = addBoundLayer(binding.map, spec);
-        binding.order.place(created, order);
+        binding.order.place(created, order, { rank });
         mounted.current = { layer: created, spec, order };
         swipe?.set(created);
         setLayer(created);
@@ -34,7 +35,7 @@ const LayerComponent = forwardRef(function Layer(props, ref) {
             if (binding.map.hasLayer(current.layer))
                 current.layer.remove();
         };
-    }, [binding, swipe]);
+    }, [binding, swipe, rank]);
     // Each render: what changed sent, or the layer made anew in its place
     useEffect(() => {
         const current = mounted.current;
@@ -45,7 +46,7 @@ const LayerComponent = forwardRef(function Layer(props, ref) {
         if (change?.rebuild) {
             const old = current.layer;
             const fresh = rebuildBoundLayer(binding.map, old, spec);
-            binding.order.place(fresh, order, old);
+            binding.order.place(fresh, order, { old });
             swipe?.unset(old);
             swipe?.set(fresh);
             current.layer = fresh;
@@ -58,7 +59,7 @@ const LayerComponent = forwardRef(function Layer(props, ref) {
             applyLayerChange(current.layer, spec, change);
         if (current.order !== order) {
             current.order = order;
-            binding.order.place(current.layer, order, current.layer);
+            binding.order.place(current.layer, order, { old: current.layer });
         }
     });
     return null;

package/dist/react/Layer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layer.js","sourceRoot":"","sources":["../../src/react/Layer.tsx"],"names":[],"mappings":"AAAA;oBACoB;AAEpB,OAAO,EACL,UAAU,EAGV,UAAU,EACV,SAAS,EACT,mBAAmB,EACnB,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EACL,aAAa,EACb,gBAAgB,EAEhB,WAAW,EACX,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAe3B,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAsCxD,MAAM,cAAc,GAAG,UAAU,CAAmD,SAAS,KAAK,CAAC,KAAK,EAAE,GAAG;IAC3G,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IACvC,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACvC,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC9C,MAAM,IAAI,GAAG,IAAsB,CAAC;IACpC,MAAM,OAAO,GAAG,MAAM,CAAU,SAAS,CAAC,CAAC;IAC3C,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;IAChD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAe,CAAC;IAElD,MAAM,CAAC,OAAO,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;IAC1C,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE/C,6EAA6E;IAC7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC;QAChD,MAAM,OAAO,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QAEjD,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QACpC,OAAO,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;QAClD,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;QACpB,QAAQ,CAAC,OAAO,CAAC,CAAC;QAClB,OAAO,EAAE,CAAC,OAAgB,CAAC,CAAC;QAE5B,OAAO,GAAG,EAAE;YACV,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;YAEhC,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC;YAC5B,IAAI,CAAC,OAAO;gBAAE,OAAO;YACrB,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACpC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YAC5B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC;gBAAE,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QAClE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAErB,sEAAsE;IACtE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;QAEhC,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO;YAAE,OAAO;QAEjC,MAAM,MAAM,GAAG,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAE/C,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;QACpB,IAAI,MAAM,EAAE,OAAO,EAAE,CAAC;YACpB,MAAM,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC;YAC1B,MAAM,KAAK,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;YAExD,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;YACvC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;YAClB,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC;YAClB,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;YACtB,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;YACtB,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,KAAc,CAAC,CAAC;YAEzC,OAAO;QACT,CAAC;QAED,IAAI,MAAM;YAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QAC1D,IAAI,OAAO,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YAC5B,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;YACtB,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAC3D,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;AACd,CAAC,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,cAEP,CAAC","sourcesContent":["/** `<Layer>`: a layer added when it mounts, updated by the least its props need, removed when it unmounts, in its\n * declared order */\n\nimport {\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  addBoundLayer,\n  applyLayerChange,\n  type BoundLayerSpec,\n  layerChange,\n  rebuildBoundLayer,\n} from '../bind/layers.ts';\nimport type { ExtrusionLayer } from '../layers/extrusions.ts';\nimport type { CircleLayer, FillLayer, LineLayer } from '../layers/features.ts';\nimport type { FlowLayer } from '../layers/flow.ts';\nimport type {\n  GroundLayer,\n  Layer as LayerHandle,\n  ModelLayer,\n  NetworkLayer,\n  RasterLayer,\n  Tiles3dLayer,\n} from '../layers/layers.ts';\nimport type { PointCloudLayer } from '../layers/pointclouds.ts';\nimport type { SymbolLayer } from '../layers/symbols.ts';\nimport type { LayerSpec } from '../map.ts';\nimport { MapContext, SwipeContext } from './context.ts';\n\n/** The handle of a layer by its type */\nexport interface LayerHandles<P = Record<string, unknown>> {\n  lines: LineLayer<P>;\n  circles: CircleLayer<P>;\n  fills: FillLayer<P>;\n  symbols: SymbolLayer<P>;\n  extrusions: ExtrusionLayer<P>;\n  raster: RasterLayer;\n  ground: GroundLayer;\n  network: NetworkLayer;\n  tiles3d: Tiles3dLayer;\n  pointcloud: PointCloudLayer;\n  models: ModelLayer;\n  trees: ModelLayer;\n  flow: FlowLayer;\n}\n\nexport type LayerType = LayerSpec['type'];\n\nexport type LayerProps<P = Record<string, unknown>, T extends LayerType = LayerType> = Extract<\n  BoundLayerSpec<P>,\n  { type: T }\n> & {\n  /** Its place among the layers of the components: from the bottom up, the same order by mounting (default 0) */\n  order?: number;\n  /** The layer, once created and each time it is made anew */\n  onLayer?: (layer: LayerHandles<P>[T]) => void;\n  ref?: Ref<LayerHandles<P>[T] | undefined>;\n};\n\ninterface Mounted {\n  layer: LayerHandle;\n  spec: BoundLayerSpec;\n  order: number;\n}\n\nconst LayerComponent = forwardRef<LayerHandle | undefined, Omit<LayerProps, 'ref'>>(function Layer(props, ref) {\n  const binding = useContext(MapContext);\n  const swipe = useContext(SwipeContext);\n  const { order = 0, onLayer, ...rest } = props;\n  const spec = rest as BoundLayerSpec;\n  const mounted = useRef<Mounted>(undefined);\n  const latest = useRef({ spec, order, onLayer });\n  const [layer, setLayer] = useState<LayerHandle>();\n\n  latest.current = { spec, order, onLayer };\n  useImperativeHandle(ref, () => layer, [layer]);\n\n  // Added once the map is there, removed when unmounted (or when the map goes)\n  useEffect(() => {\n    if (!binding) return;\n\n    const { spec, order, onLayer } = latest.current;\n    const created = addBoundLayer(binding.map, spec);\n\n    binding.order.place(created, order);\n    mounted.current = { layer: created, spec, order };\n    swipe?.set(created);\n    setLayer(created);\n    onLayer?.(created as never);\n\n    return () => {\n      const current = mounted.current;\n\n      mounted.current = undefined;\n      if (!current) return;\n      binding.order.remove(current.layer);\n      swipe?.unset(current.layer);\n      if (binding.map.hasLayer(current.layer)) current.layer.remove();\n    };\n  }, [binding, swipe]);\n\n  // Each render: what changed sent, or the layer made anew in its place\n  useEffect(() => {\n    const current = mounted.current;\n\n    if (!binding || !current) return;\n\n    const change = layerChange(current.spec, spec);\n\n    current.spec = spec;\n    if (change?.rebuild) {\n      const old = current.layer;\n      const fresh = rebuildBoundLayer(binding.map, old, spec);\n\n      binding.order.place(fresh, order, old);\n      swipe?.unset(old);\n      swipe?.set(fresh);\n      current.layer = fresh;\n      current.order = order;\n      setLayer(fresh);\n      latest.current.onLayer?.(fresh as never);\n\n      return;\n    }\n\n    if (change) applyLayerChange(current.layer, spec, change);\n    if (current.order !== order) {\n      current.order = order;\n      binding.order.place(current.layer, order, current.layer);\n    }\n  });\n\n  return null;\n});\n\n/**\n * A layer: the options of its `add…` method with its `type` (`map.add`), and `values` for the layers colored by\n * values. A change of data, style, filter, values or instances updates it; a change of what is set at creation (its\n * URL, grid, nodes…) makes it anew, in its place. Data, functions and arrays are compared by identity: keep them in a\n * memo or a state. The ref and `onLayer` give its handle, typed by its `type`; the properties of its features are\n * inferred from its data or its style functions (`<Layer<Building> …>` to name them)\n */\nexport const Layer = LayerComponent as <P = Record<string, unknown>, T extends LayerType = LayerType>(\n  props: LayerProps<P, T>,\n) => ReactNode;\n"]}
+{"version":3,"file":"Layer.js","sourceRoot":"","sources":["../../src/react/Layer.tsx"],"names":[],"mappings":"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","sourcesContent":["/** `<Layer>`: a layer added when it mounts, updated by the least its props need, removed when it unmounts, in its\n * declared order */\n\nimport {\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  addBoundLayer,\n  applyLayerChange,\n  type BoundLayerSpec,\n  layerChange,\n  rebuildBoundLayer,\n} from '../bind/layers.ts';\nimport type { ExtrusionLayer } from '../layers/extrusions.ts';\nimport type { CircleLayer, FillLayer, LineLayer } from '../layers/features.ts';\nimport type { FlowLayer } from '../layers/flow.ts';\nimport type {\n  GroundLayer,\n  Layer as LayerHandle,\n  ModelLayer,\n  NetworkLayer,\n  RasterLayer,\n  Tiles3dLayer,\n} from '../layers/layers.ts';\nimport type { PointCloudLayer } from '../layers/pointclouds.ts';\nimport type { SymbolLayer } from '../layers/symbols.ts';\nimport type { LayerSpec } from '../map.ts';\nimport { MapContext, SwipeContext, useRank } from './context.ts';\n\n/** The handle of a layer by its type */\nexport interface LayerHandles<P = Record<string, unknown>> {\n  lines: LineLayer<P>;\n  circles: CircleLayer<P>;\n  fills: FillLayer<P>;\n  symbols: SymbolLayer<P>;\n  extrusions: ExtrusionLayer<P>;\n  raster: RasterLayer;\n  ground: GroundLayer;\n  network: NetworkLayer;\n  tiles3d: Tiles3dLayer;\n  pointcloud: PointCloudLayer;\n  models: ModelLayer;\n  trees: ModelLayer;\n  flow: FlowLayer;\n}\n\nexport type LayerType = LayerSpec['type'];\n\nexport type LayerProps<P = Record<string, unknown>, T extends LayerType = LayerType> = Extract<\n  BoundLayerSpec<P>,\n  { type: T }\n> & {\n  /** Its place among the layers of the components: from the bottom up, the same order as declared (default 0) */\n  order?: number;\n  /** The layer, once created and each time it is made anew */\n  onLayer?: (layer: LayerHandles<P>[T]) => void;\n  ref?: Ref<LayerHandles<P>[T] | undefined>;\n};\n\ninterface Mounted {\n  layer: LayerHandle;\n  spec: BoundLayerSpec;\n  order: number;\n}\n\nconst LayerComponent = forwardRef<LayerHandle | undefined, Omit<LayerProps, 'ref'>>(function Layer(props, ref) {\n  const binding = useContext(MapContext);\n  const swipe = useContext(SwipeContext);\n  const { order = 0, onLayer, ...rest } = props;\n  const spec = rest as BoundLayerSpec;\n  const mounted = useRef<Mounted>(undefined);\n  const latest = useRef({ spec, order, onLayer });\n  const [layer, setLayer] = useState<LayerHandle>();\n  const rank = useRank();\n\n  latest.current = { spec, order, onLayer };\n  useImperativeHandle(ref, () => layer, [layer]);\n\n  // Added once the map is there, removed when unmounted (or when the map goes)\n  useEffect(() => {\n    if (!binding) return;\n\n    const { spec, order, onLayer } = latest.current;\n    const created = addBoundLayer(binding.map, spec);\n\n    binding.order.place(created, order, { rank });\n    mounted.current = { layer: created, spec, order };\n    swipe?.set(created);\n    setLayer(created);\n    onLayer?.(created as never);\n\n    return () => {\n      const current = mounted.current;\n\n      mounted.current = undefined;\n      if (!current) return;\n      binding.order.remove(current.layer);\n      swipe?.unset(current.layer);\n      if (binding.map.hasLayer(current.layer)) current.layer.remove();\n    };\n  }, [binding, swipe, rank]);\n\n  // Each render: what changed sent, or the layer made anew in its place\n  useEffect(() => {\n    const current = mounted.current;\n\n    if (!binding || !current) return;\n\n    const change = layerChange(current.spec, spec);\n\n    current.spec = spec;\n    if (change?.rebuild) {\n      const old = current.layer;\n      const fresh = rebuildBoundLayer(binding.map, old, spec);\n\n      binding.order.place(fresh, order, { old });\n      swipe?.unset(old);\n      swipe?.set(fresh);\n      current.layer = fresh;\n      current.order = order;\n      setLayer(fresh);\n      latest.current.onLayer?.(fresh as never);\n\n      return;\n    }\n\n    if (change) applyLayerChange(current.layer, spec, change);\n    if (current.order !== order) {\n      current.order = order;\n      binding.order.place(current.layer, order, { old: current.layer });\n    }\n  });\n\n  return null;\n});\n\n/**\n * A layer: the options of its `add…` method with its `type` (`map.add`), and `values` for the layers colored by\n * values. A change of data, style, filter, values or instances updates it; a change of what is set at creation (its\n * URL, grid, nodes…) makes it anew, in its place. Data, functions and arrays are compared by identity: keep them in a\n * memo or a state. The ref and `onLayer` give its handle, typed by its `type`; the properties of its features are\n * inferred from its data or its style functions (`<Layer<Building> …>` to name them)\n */\nexport const Layer = LayerComponent as <P = Record<string, unknown>, T extends LayerType = LayerType>(\n  props: LayerProps<P, T>,\n) => ReactNode;\n"]}

package/dist/react/VectorGeometry.d.ts

@@ -1,12 +1,10 @@
-/** `<VectorGeometry>`: the fills and lines of a MapLibre style drawn as geometry (`vectorTiles().vectors()`), among the
- * layers of the components */
+/** `<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 { type ReactNode, type Ref } from 'react';
 import type { Style, StyleLayer } from '../basemap/vectorstyle.ts';
 import type { VectorLayer, VectorSublayer } from '../layers/vectors.ts';
-import type { RoofMode } from '../workers/basemap/geometry.ts';
-export interface VectorGeometryProps {
-    /** A style URL or object (default OpenFreeMap's Positron); another one makes the layer anew */
-    style?: string | Style;
+import type { RoofMode } from '../util/roofs.ts';
+export interface GeometryProps {
     /** The style layers drawn (default all its fills and lines); another function makes the layer anew, so keep it in a
      * memo or at the module's level */
     layers?: (layer: StyleLayer) => boolean;
@@ -29,12 +27,23 @@ export interface VectorGeometryProps {
     onLayer?: (layer: VectorLayer) => void;
     ref?: Ref<VectorLayer | undefined>;
 }
+export interface VectorGeometryProps extends GeometryProps {
+    /** A style URL or object (default OpenFreeMap's Positron); another one makes the layer anew */
+    style?: string | Style;
+}
 /** Paint properties by style layer id */
 type Paint = Record<string, Record<string, unknown>>;
 /**
- * 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 declare const Geometry: (props: GeometryProps) => ReactNode;
+/**
+ * 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 declare const VectorGeometry: (props: VectorGeometryProps) => ReactNode;
 export {};

package/dist/react/VectorGeometry.js

@@ -1,32 +1,35 @@
-/** `<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, useRank, 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 */
     const sent = useRef(undefined);
     const [layer, setLayer] = useState();
+    const rank = useRank();
     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 }),
             ...(roofs && { roofs }),
         });
-        binding.order.place(created, latest.current.order);
+        binding.order.place(created, latest.current.order, { rank });
         swipe?.set(created);
         sent.current = undefined;
         setLayer(created);
@@ -34,10 +37,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, rank]);
     // 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(() => {
@@ -77,14 +82,24 @@ const VectorGeometryComponent = forwardRef(function VectorGeometry({ style, laye
     // A new `order`: moved to its new place among the layers of the components
     useEffect(() => {
         if (binding && layer)
-            binding.order.place(layer, order, layer);
+            binding.order.place(layer, order, { old: layer });
     }, [binding, layer, order]);
     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":"AAAA;8BAC8B;AAE9B,OAAO,EACL,UAAU,EAGV,UAAU,EACV,SAAS,EACT,mBAAmB,EACnB,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AA+BxD,iGAAiG;AACjG,MAAM,OAAO,GAAG,CAAC,IAAuB,EAAE,IAAuB,EAAmD,EAAE,CACpH,MAAM,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,UAAU,CAAC,EAAE,EAAE,CACzD,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC;KACvB,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;KAC1F,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAA6B,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAC3E,CAAC;AAEJ,MAAM,uBAAuB,GAAG,UAAU,CACxC,SAAS,cAAc,CACrB,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,OAAO,EAAE,EAC7F,GAAG;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IACvC,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACvC,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;IAC1C,qDAAqD;IACrD,MAAM,IAAI,GAAG,MAAM,CAAQ,SAAS,CAAC,CAAC;IACtC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAe,CAAC;IAElD,MAAM,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;IACpC,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE/C,8GAA8G;IAC9G,gHAAgH;IAChH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QAC5E,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;YAC5B,GAAG,CAAC,MAAM,IAAI,EAAE,MAAM,EAAE,CAAC;YACzB,GAAG,CAAC,OAAO,IAAI,EAAE,OAAO,EAAE,CAAC;YAC3B,GAAG,CAAC,KAAK,IAAI,EAAE,KAAK,EAAE,CAAC;SACxB,CAAC,CAAC;QAEH,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACnD,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;QACpB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;QACzB,QAAQ,CAAC,OAAO,CAAC,CAAC;QAClB,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC;QAElC,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAC9B,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;YACtB,KAAK,CAAC,OAAO,EAAE,CAAC;YAChB,QAAQ,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAEpD,gHAAgH;IAChH,mEAAmE;IACnE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,MAAM,KAAK,GAAG,CAAC,IAAuB,EAAE,EAAE;YACxC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE;gBACxD,KAAK,CAAC,gBAAgB,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;YAC1C,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;QAEF,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE,CAAC;YAChC,KAAK,CAAC,KAAK,CAAC,CAAC;YAEb,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAE5B,KAAK,CAAC,KAAK,CAAC,IAAI,CACd,GAAG,EAAE;YACH,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,OAAO;YACvB,KAAK,CACH,MAAM,CAAC,WAAW,CAChB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;gBACzB,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;gBAE5B,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAChD,CAAC,CAAC,CACH,CACF,CAAC;QACJ,CAAC,EACD,GAAG,EAAE,CAAC,SAAS,CAChB,CAAC;QAEF,OAAO,GAAG,EAAE;YACV,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnB,kCAAkC;IAClC,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAErB,kBAAkB;IAClB,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAErB,2EAA2E;IAC3E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,KAAK;YAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAE5B,OAAO,IAAI,CAAC;AACd,CAAC,CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,uBAAoE,CAAC","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, useRank, 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  const rank = useRank();\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, { rank });\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, rank]);\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, { old: 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,20 @@ 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>;
+/** A component's rank among the layers of the components (`LayerOrder.rank`): taken at its first render, in the
+ * declared order, kept after */
+export declare const useRank: () => number | 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

@@ -1,10 +1,19 @@
 /** 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 { createContext, useContext, useEffect, useRef } from 'react';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
 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);
+/** A component's rank among the layers of the components (`LayerOrder.rank`): taken at its first render, in the
+ * declared order, kept after */
+export const useRank = () => {
+    const binding = useContext(MapContext);
+    const [rank] = useState(() => binding?.order.rank());
+    return rank;
+};
 /** 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 +26,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