@tileflow/vue 0.1.0-alpha.30 → 0.1.0-alpha.32

package/README.md

@@ -100,16 +100,25 @@ map's themes instead of `theme`: position 0 is the first theme and 1.5 is halfwa
 the 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; `view-mode="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 props take
 priority over those options, then the published view, then shared defaults. `TileflowMap` 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

@@ -16,18 +16,21 @@ import {
 import {
   attachTileflowAtmosphere,
   attachTileflowFairUseNotice,
+  attachTileflowMap3D,
   attachTileflowMapLifecycle,
+  attachTileflowNauticalLights,
   attachTileflowNotices,
   createTileflowSessionStarter,
   createTileflowThemeController,
-  createTileflowVegetation,
   createTileflowTransformRequest,
   getTileflowSystemColorScheme,
   loadTileflowStyleFonts,
   registerTileflowContourProtocol,
   registerTileflowPmtilesProtocol,
   registerTileflowWorldRequestBridge,
-  subscribeTileflowSystemColorScheme
+  subscribeTileflowSystemColorScheme,
+  tileflowMaxPitch,
+  tileflowCanvasContextAttributes
 } from "@tileflow/core/browser";
 import { normalizeTileflowCaptureId } from "@tileflow/core/capture";
 import {
@@ -245,7 +248,7 @@ var TileflowMap = defineComponent({
       type: Object
     },
     vegetation: { type: Boolean, default: void 0 },
-    viewMode: { type: String, default: "2d" },
+    viewMode: { type: String, default: "3d" },
     theme: String,
     timeOfDay: String,
     themeBlend: Object,
@@ -297,7 +300,7 @@ var TileflowMap = defineComponent({
     let mapLifecycle = null;
     let mapResizeObserver = null;
     let mapWorldRequestBridge = null;
-    let vegetationController = null;
+    let sceneAttachment = null;
     let themeController = null;
     let unsubscribeSystemColorScheme = null;
     let mapLoadId = 0;
@@ -631,8 +634,8 @@ var TileflowMap = defineComponent({
     watch(
       () => [props.vegetation, props.viewMode],
       ([visible, viewMode]) => {
-        vegetationController?.setVisible(visible);
-        vegetationController?.setViewMode(viewMode ?? "2d");
+        sceneAttachment?.setVegetation(visible);
+        sceneAttachment?.setViewMode(viewMode ?? "3d");
       }
     );
     const destroyMap = () => {
@@ -644,8 +647,8 @@ var TileflowMap = defineComponent({
       const resizeObserver = mapResizeObserver;
       const map = mapRef.value;
       const controller = themeController;
-      const vegetation = vegetationController;
-      vegetationController = null;
+      const scene = sceneAttachment;
+      sceneAttachment = null;
       const annotationInteractionsForMap = annotationRuntime;
       const semanticInteractionsForMap = semanticRuntime;
       const worldRequestBridge = mapWorldRequestBridge;
@@ -663,7 +666,7 @@ var TileflowMap = defineComponent({
         () => worldRequestBridge?.dispose(),
         () => fairUseNotice?.dispose(),
         () => lifecycle?.dispose(),
-        () => vegetation?.dispose(),
+        () => scene?.dispose(),
         () => controller?.dispose(),
         () => resizeObserver?.disconnect(),
         () => map?.remove()
@@ -794,9 +797,15 @@ var TileflowMap = defineComponent({
       });
       const map = new maplibregl.Map({
         ...props.mapOptions,
+        canvasContextAttributes: tileflowCanvasContextAttributes(
+          props.mapOptions?.canvasContextAttributes
+        ),
         attributionControl: props.mapOptions?.attributionControl ?? {
           compact: true
         },
+        // Tileflow's compiled styles are validated when they are built.
+        validateStyle: props.mapOptions?.validateStyle ?? false,
+        maxPitch: props.mapOptions?.maxPitch ?? tileflowMaxPitch,
         bearing: resolvedBearing.value,
         center: resolvedCenter.value,
         container,
@@ -815,6 +824,7 @@ var TileflowMap = defineComponent({
       mapRef.value = map;
       attachTileflowAtmosphere(map);
       attachTileflowNotices(map);
+      attachTileflowNauticalLights(map);
       themeController = runtime.theme === void 0 ? null : createTileflowThemeController({
         initial: runtime,
         map,
@@ -829,11 +839,13 @@ var TileflowMap = defineComponent({
           }
         }
       });
-      vegetationController = createTileflowVegetation({
+      sceneAttachment = attachTileflowMap3D({
         map,
         ...themeController ? { controller: themeController } : {},
-        visible: props.vegetation,
-        viewMode: props.viewMode ?? "2d",
+        vegetation: props.vegetation,
+        viewMode: props.viewMode ?? "3d",
+        load: () => import("@tileflow/core/3d"),
+        onError: (error) => console.error("Failed to load the Tileflow 3D scene", error),
         transformRequest: createTileflowTransformRequest({
           getAnalytics: () => resolvedAnalytics.value,
           sessionController: session,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/vue",
-  "version": "0.1.0-alpha.30",
+  "version": "0.1.0-alpha.32",
   "license": "Apache-2.0",
   "description": "Vue component for rendering Tileflow maps with MapLibre.",
   "type": "module",
@@ -38,8 +38,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"
   },
   "peerDependencies": {
     "maplibre-gl": ">=6.4.1 <7",