@tileflow/react 0.1.0-alpha.32 → 0.1.0-alpha.34

package/README.md

@@ -111,16 +111,25 @@ themes instead of `theme`: position 0 is the first theme and 1.5 is halfway from
 third. Moving the position updates the map at once. See
 [theme transitions and blends](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/theme-transitions-and-blends.md).
 
-Interactive maps automatically render the map's vegetation. `vegetation` overrides visibility
-(omitting it uses the map default); false hides models and flat artwork alike. `viewMode` is `2d`
-by default and may be `3d`: only maps with `vegetation.mode: 'auto'` switch representation.
-Streets uses model trees in either view. Changing either prop updates the existing map immediately.
-These props do not change camera pitch, buildings or lighting and do not apply in image mode. See
-[vegetation controls](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/trees-3d.md#visibility-and-representation).
+Interactive maps show the 3D scene their style declares by default: buildings with Tileflow
+landmarks and the map's Team building models, 3D trees, and street lights where the map enables
+them. The 3D renderers load only when the style declares a scene, so 2D maps do not download them.
+`viewMode` is `3d` by default; `viewMode="2d"` opts out, mounting no 3D buildings or street lights, and
+draws vegetation as the map's policy sets for the 2D view (Streets keeps its model trees in either
+view). `vegetation` overrides vegetation visibility (omitting it uses the map default); `vegetation={false}`
+hides models and flat artwork alike. Changing either prop updates the existing map immediately.
+They do not change camera pitch and do not apply in image mode. See
+[the map's 3D scene](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/buildings-3d.md#the-maps-3d-scene)
+and [vegetation controls](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/trees-3d.md#visibility-and-representation).
 
 `mapOptions` accepts native MapLibre options except `container` and `style`. Direct camera props
 take priority over `mapOptions`, then the manifest view, then shared defaults. `Map` always selects
 a Tileflow map through its manifest; it has no renderer discriminator or direct-style mode.
+Tileflow's styles are validated when they are compiled, so `validateStyle` defaults to `false`; pass
+`true` to validate them again in the browser.
+The map canvas is multisampled by default (`canvasContextAttributes.antialias` is `true`) so the
+thin edges of 3D models stay continuous; other context attributes you pass are kept, and
+`canvasContextAttributes: {antialias: false}` trades that smoothing for lower GPU cost.
 The obsolete source fields `kind` and `style` are rejected. For a completely unmanaged map, use
 `maplibre-gl` directly rather than a Tileflow component.
 

package/dist/index.js

@@ -41,18 +41,21 @@ import { createPortal } from "react-dom";
 import {
   attachTileflowAtmosphere,
   attachTileflowFairUseNotice,
+  attachTileflowMap3D,
   attachTileflowMapLifecycle,
+  attachTileflowNauticalLights,
   attachTileflowNotices,
   createTileflowSessionStarter,
   createTileflowThemeController,
-  createTileflowVegetation,
   createTileflowTransformRequest,
   getTileflowSystemColorScheme,
   loadTileflowStyleFonts,
   registerTileflowContourProtocol,
   registerTileflowPmtilesProtocol,
   registerTileflowWorldRequestBridge,
-  subscribeTileflowSystemColorScheme
+  subscribeTileflowSystemColorScheme,
+  tileflowCanvasContextAttributes,
+  tileflowMaxPitch
 } from "@tileflow/core/browser";
 import { normalizeTileflowCaptureId } from "@tileflow/core/capture";
 import {
@@ -298,7 +301,7 @@ function Map2(props) {
     themeBlend,
     themeTransition,
     vegetation,
-    viewMode = "2d",
+    viewMode = "3d",
     interactionState,
     interactions = defaultInteractions,
     onInteractionDiagnostic,
@@ -339,12 +342,12 @@ function Map2(props) {
   const containerRef = useRef(null);
   const imageRef = useRef(null);
   const mapRef = useRef(null);
-  const vegetationRef = useRef(void 0);
-  const vegetationInputsRef = useRef({ vegetation, viewMode });
-  vegetationInputsRef.current = { vegetation, viewMode };
+  const sceneRef = useRef(void 0);
+  const sceneInputsRef = useRef({ vegetation, viewMode });
+  sceneInputsRef.current = { vegetation, viewMode };
   useEffect2(() => {
-    vegetationRef.current?.setVisible(vegetation);
-    vegetationRef.current?.setViewMode(viewMode);
+    sceneRef.current?.setVegetation(vegetation);
+    sceneRef.current?.setViewMode(viewMode);
   }, [vegetation, viewMode]);
   const themeControllerRef = useRef(void 0);
   const runtimeStyleRef = useRef(null);
@@ -805,6 +808,9 @@ function Map2(props) {
       });
       const map = new maplibregl.Map({
         ...stableMapOptions,
+        canvasContextAttributes: tileflowCanvasContextAttributes(
+          stableMapOptions?.canvasContextAttributes
+        ),
         container,
         style: initialRuntimeStyle.style,
         bearing: bearingRef.current,
@@ -815,6 +821,9 @@ function Map2(props) {
         attributionControl: stableMapOptions?.attributionControl ?? {
           compact: true
         },
+        // Tileflow's compiled styles are validated when they are built.
+        validateStyle: stableMapOptions?.validateStyle ?? false,
+        maxPitch: stableMapOptions?.maxPitch ?? tileflowMaxPitch,
         transformRequest
       });
       mapRef.current = map;
@@ -822,6 +831,7 @@ function Map2(props) {
       registerCleanup(() => map.remove());
       registerCleanup(attachTileflowAtmosphere(map));
       registerCleanup(attachTileflowNotices(map));
+      registerCleanup(attachTileflowNauticalLights(map));
       const themeController = initialRuntimeStyle.theme === void 0 ? void 0 : createTileflowThemeController({
         initial: initialRuntimeStyle,
         map,
@@ -845,11 +855,13 @@ function Map2(props) {
           }
         });
       }
-      const vegetationController = createTileflowVegetation({
+      const scene = attachTileflowMap3D({
         map,
         ...themeController ? { controller: themeController } : {},
-        visible: vegetationInputsRef.current.vegetation,
-        viewMode: vegetationInputsRef.current.viewMode,
+        vegetation: sceneInputsRef.current.vegetation,
+        viewMode: sceneInputsRef.current.viewMode,
+        load: () => import("@tileflow/core/3d"),
+        onError: (error) => console.error("Failed to load the Tileflow 3D scene", error),
         // Direct tile readers use HTTP, not MapLibre's custom World protocol.
         transformRequest: createTileflowTransformRequest({
           getAnalytics: () => resolvedAnalyticsRef.current,
@@ -861,10 +873,10 @@ function Map2(props) {
           )
         })
       });
-      vegetationRef.current = vegetationController;
+      sceneRef.current = scene;
       registerCleanup(() => {
-        vegetationController.dispose();
-        if (vegetationRef.current === vegetationController) vegetationRef.current = void 0;
+        scene.dispose();
+        if (sceneRef.current === scene) sceneRef.current = void 0;
       });
       const browserWindow = container.ownerDocument.defaultView;
       if (!browserWindow) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/react",
-  "version": "0.1.0-alpha.32",
+  "version": "0.1.0-alpha.34",
   "license": "Apache-2.0",
   "description": "React components for rendering Tileflow maps with MapLibre.",
   "type": "module",
@@ -43,8 +43,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/core": ">=0.1.0-alpha.37 <0.1.0-beta.0",
-    "@tileflow/interactions": ">=0.1.0-alpha.5 <0.1.0-beta.0",
+    "@tileflow/core": ">=0.1.0-alpha.39 <0.1.0-beta.0",
+    "@tileflow/interactions": ">=0.1.0-alpha.6 <0.1.0-beta.0",
     "@tileflow/static": ">=0.1.0-alpha.28 <0.1.0-beta.0"
   },
   "peerDependencies": {