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

package/README.md

@@ -102,18 +102,27 @@ 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 props win over
 those options, then the manifest view, then shared defaults. `TileflowMap` always selects a Tileflow
-map through its manifest; it has no renderer discriminator or direct-style mode. The obsolete
-source fields `kind` and `style` are rejected. For a completely unmanaged map, use `maplibre-gl`
-directly rather than a Tileflow component.
+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.
 
 ## Add annotations and native popup UI
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/svelte",
-  "version": "0.1.0-alpha.30",
+  "version": "0.1.0-alpha.32",
   "license": "Apache-2.0",
   "description": "Svelte component for rendering Tileflow maps with MapLibre.",
   "type": "module",
@@ -44,8 +44,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",
@@ -54,7 +54,7 @@
   "devDependencies": {
     "maplibre-gl": "6.13.0",
     "svelte": "^5.57.2",
-    "svelte-check": "^4.3.4"
+    "svelte-check": "^4.7.7"
   },
   "scripts": {
     "build": "svelte-check --tsconfig ./tsconfig.json",

package/src/TileflowMap.svelte

@@ -31,12 +31,13 @@
   import {
     attachTileflowAtmosphere,
     attachTileflowFairUseNotice,
+    attachTileflowMap3D,
     attachTileflowMapLifecycle,
+    attachTileflowNauticalLights,
     attachTileflowNotices,
     createTileflowSessionStarter,
     createTileflowThemeController,
-    createTileflowVegetation,
-    type TileflowVegetationController,
+    type TileflowMap3DAttachment,
     createTileflowTransformRequest,
     getTileflowSystemColorScheme,
     loadTileflowStyleFonts,
@@ -44,6 +45,8 @@
     registerTileflowPmtilesProtocol,
     registerTileflowWorldRequestBridge,
     subscribeTileflowSystemColorScheme,
+    tileflowMaxPitch,
+    tileflowCanvasContextAttributes,
     type TileflowFairUseNoticeController,
     type TileflowMapLifecycleAttachment,
     type TileflowThemeController,
@@ -105,7 +108,7 @@
   export let timeOfDay: TileflowMapProps['timeOfDay'] = undefined;
   export let themeBlend: TileflowMapProps['themeBlend'] = undefined;
   export let vegetation: TileflowMapProps['vegetation'] = undefined;
-  export let viewMode: NonNullable<TileflowMapProps['viewMode']> = '2d';
+  export let viewMode: NonNullable<TileflowMapProps['viewMode']> = '3d';
   export let themeTransition: TileflowMapProps['themeTransition'] = undefined;
   export let tooltip: TileflowMapProps['tooltip'] = undefined;
   export let zoom: TileflowMapProps['zoom'] = undefined;
@@ -148,9 +151,9 @@
   let interactionRuntimesDisposing = false;
   let mapResizeObserver: ResizeObserver | null = null;
   let mapWorldRequestBridge: TileflowWorldRequestBridge | null = null;
-  let vegetationController: TileflowVegetationController | null = null;
-  $: vegetationController?.setVisible(vegetation);
-  $: vegetationController?.setViewMode(viewMode);
+  let sceneAttachment: TileflowMap3DAttachment | null = null;
+  $: sceneAttachment?.setVegetation(vegetation);
+  $: sceneAttachment?.setViewMode(viewMode);
   let themeController: TileflowThemeController | null = null;
   let systemColorScheme: 'dark' | 'light' = 'light';
   let unsubscribeSystemColorScheme: (() => void) | null = null;
@@ -460,8 +463,8 @@
     const unsubscribeSemanticTargets = semanticRuntimeTargetsUnsubscribe;
     const currentMap = mapInstance;
     const currentThemeController = themeController;
-    const currentVegetationController = vegetationController;
-    vegetationController = null;
+    const currentSceneAttachment = sceneAttachment;
+    sceneAttachment = null;
     const worldRequestBridge = mapWorldRequestBridge;
     interactionRuntimesDisposing = true;
     mapFairUseNotice = null;
@@ -504,7 +507,7 @@
       () => semanticInteractionsForMap?.dispose(),
       () => annotationInteractionsForMap?.dispose(),
       () => lifecycleAttachment?.dispose(),
-      () => currentVegetationController?.dispose(),
+      () => currentSceneAttachment?.dispose(),
       () => currentThemeController?.dispose(),
       () => worldRequestBridge?.dispose(),
       () => fairUseNotice?.dispose(),
@@ -586,7 +589,11 @@
     });
     const maplibreMap = new maplibregl.Map({
       ...mapOptions,
+      canvasContextAttributes: tileflowCanvasContextAttributes(mapOptions?.canvasContextAttributes),
       attributionControl: mapOptions?.attributionControl ?? {compact: true},
+      // Tileflow's compiled styles are validated when they are built.
+      validateStyle: mapOptions?.validateStyle ?? false,
+      maxPitch: mapOptions?.maxPitch ?? tileflowMaxPitch,
       bearing: resolvedBearing,
       center: resolvedCenter as LngLatLike,
       container: targetContainer,
@@ -606,6 +613,7 @@
     mapInstance = maplibreMap;
     attachTileflowAtmosphere(maplibreMap);
     attachTileflowNotices(maplibreMap);
+    attachTileflowNauticalLights(maplibreMap);
     themeController =
       runtime.theme === undefined
         ? null
@@ -624,11 +632,14 @@
             },
           });
 
-    vegetationController = createTileflowVegetation({
+    // The map's 3D scene loads only once its style declares one, so 2D maps do not pay for it.
+    sceneAttachment = attachTileflowMap3D({
       map: maplibreMap,
       ...(themeController ? {controller: themeController} : {}),
-      visible: vegetation,
+      vegetation,
       viewMode,
+      load: () => import('@tileflow/core/3d'),
+      onError: (error) => console.error('Failed to load the Tileflow 3D scene', error),
       transformRequest: createTileflowTransformRequest({
         getAnalytics: () => resolvedAnalytics,
         sessionController: session,