@tileflow/react 0.1.0-alpha.31 → 0.1.0-alpha.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -6
- package/dist/index.js +19 -13
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -111,16 +111,22 @@ themes instead of `theme`: position 0 is the first theme and 1.5 is halfway from
|
|
|
111
111
|
third. Moving the position updates the map at once. See
|
|
112
112
|
[theme transitions and blends](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/theme-transitions-and-blends.md).
|
|
113
113
|
|
|
114
|
-
Interactive maps
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
114
|
+
Interactive maps show the 3D scene their style declares by default: buildings with Tileflow
|
|
115
|
+
landmarks and the map's Team building models, 3D trees, and street lights where the map enables
|
|
116
|
+
them. The 3D renderers load only when the style declares a scene, so 2D maps do not download them.
|
|
117
|
+
`viewMode` is `3d` by default; `viewMode="2d"` opts out, mounting no 3D buildings or street lights, and
|
|
118
|
+
draws vegetation as the map's policy sets for the 2D view (Streets keeps its model trees in either
|
|
119
|
+
view). `vegetation` overrides vegetation visibility (omitting it uses the map default); `vegetation={false}`
|
|
120
|
+
hides models and flat artwork alike. Changing either prop updates the existing map immediately.
|
|
121
|
+
They do not change camera pitch and do not apply in image mode. See
|
|
122
|
+
[the map's 3D scene](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/buildings-3d.md#the-maps-3d-scene)
|
|
123
|
+
and [vegetation controls](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/trees-3d.md#visibility-and-representation).
|
|
120
124
|
|
|
121
125
|
`mapOptions` accepts native MapLibre options except `container` and `style`. Direct camera props
|
|
122
126
|
take priority over `mapOptions`, then the manifest view, then shared defaults. `Map` always selects
|
|
123
127
|
a Tileflow map through its manifest; it has no renderer discriminator or direct-style mode.
|
|
128
|
+
Tileflow's styles are validated when they are compiled, so `validateStyle` defaults to `false`; pass
|
|
129
|
+
`true` to validate them again in the browser.
|
|
124
130
|
The obsolete source fields `kind` and `style` are rejected. For a completely unmanaged map, use
|
|
125
131
|
`maplibre-gl` directly rather than a Tileflow component.
|
|
126
132
|
|
package/dist/index.js
CHANGED
|
@@ -41,10 +41,11 @@ import { createPortal } from "react-dom";
|
|
|
41
41
|
import {
|
|
42
42
|
attachTileflowAtmosphere,
|
|
43
43
|
attachTileflowFairUseNotice,
|
|
44
|
+
attachTileflowMap3D,
|
|
44
45
|
attachTileflowMapLifecycle,
|
|
46
|
+
attachTileflowNotices,
|
|
45
47
|
createTileflowSessionStarter,
|
|
46
48
|
createTileflowThemeController,
|
|
47
|
-
createTileflowVegetation,
|
|
48
49
|
createTileflowTransformRequest,
|
|
49
50
|
getTileflowSystemColorScheme,
|
|
50
51
|
loadTileflowStyleFonts,
|
|
@@ -297,7 +298,7 @@ function Map2(props) {
|
|
|
297
298
|
themeBlend,
|
|
298
299
|
themeTransition,
|
|
299
300
|
vegetation,
|
|
300
|
-
viewMode = "
|
|
301
|
+
viewMode = "3d",
|
|
301
302
|
interactionState,
|
|
302
303
|
interactions = defaultInteractions,
|
|
303
304
|
onInteractionDiagnostic,
|
|
@@ -338,12 +339,12 @@ function Map2(props) {
|
|
|
338
339
|
const containerRef = useRef(null);
|
|
339
340
|
const imageRef = useRef(null);
|
|
340
341
|
const mapRef = useRef(null);
|
|
341
|
-
const
|
|
342
|
-
const
|
|
343
|
-
|
|
342
|
+
const sceneRef = useRef(void 0);
|
|
343
|
+
const sceneInputsRef = useRef({ vegetation, viewMode });
|
|
344
|
+
sceneInputsRef.current = { vegetation, viewMode };
|
|
344
345
|
useEffect2(() => {
|
|
345
|
-
|
|
346
|
-
|
|
346
|
+
sceneRef.current?.setVegetation(vegetation);
|
|
347
|
+
sceneRef.current?.setViewMode(viewMode);
|
|
347
348
|
}, [vegetation, viewMode]);
|
|
348
349
|
const themeControllerRef = useRef(void 0);
|
|
349
350
|
const runtimeStyleRef = useRef(null);
|
|
@@ -814,12 +815,15 @@ function Map2(props) {
|
|
|
814
815
|
attributionControl: stableMapOptions?.attributionControl ?? {
|
|
815
816
|
compact: true
|
|
816
817
|
},
|
|
818
|
+
// Tileflow's compiled styles are validated when they are built.
|
|
819
|
+
validateStyle: stableMapOptions?.validateStyle ?? false,
|
|
817
820
|
transformRequest
|
|
818
821
|
});
|
|
819
822
|
mapRef.current = map;
|
|
820
823
|
setupResources.map = map;
|
|
821
824
|
registerCleanup(() => map.remove());
|
|
822
825
|
registerCleanup(attachTileflowAtmosphere(map));
|
|
826
|
+
registerCleanup(attachTileflowNotices(map));
|
|
823
827
|
const themeController = initialRuntimeStyle.theme === void 0 ? void 0 : createTileflowThemeController({
|
|
824
828
|
initial: initialRuntimeStyle,
|
|
825
829
|
map,
|
|
@@ -843,11 +847,13 @@ function Map2(props) {
|
|
|
843
847
|
}
|
|
844
848
|
});
|
|
845
849
|
}
|
|
846
|
-
const
|
|
850
|
+
const scene = attachTileflowMap3D({
|
|
847
851
|
map,
|
|
848
852
|
...themeController ? { controller: themeController } : {},
|
|
849
|
-
|
|
850
|
-
viewMode:
|
|
853
|
+
vegetation: sceneInputsRef.current.vegetation,
|
|
854
|
+
viewMode: sceneInputsRef.current.viewMode,
|
|
855
|
+
load: () => import("@tileflow/core/3d"),
|
|
856
|
+
onError: (error) => console.error("Failed to load the Tileflow 3D scene", error),
|
|
851
857
|
// Direct tile readers use HTTP, not MapLibre's custom World protocol.
|
|
852
858
|
transformRequest: createTileflowTransformRequest({
|
|
853
859
|
getAnalytics: () => resolvedAnalyticsRef.current,
|
|
@@ -859,10 +865,10 @@ function Map2(props) {
|
|
|
859
865
|
)
|
|
860
866
|
})
|
|
861
867
|
});
|
|
862
|
-
|
|
868
|
+
sceneRef.current = scene;
|
|
863
869
|
registerCleanup(() => {
|
|
864
|
-
|
|
865
|
-
if (
|
|
870
|
+
scene.dispose();
|
|
871
|
+
if (sceneRef.current === scene) sceneRef.current = void 0;
|
|
866
872
|
});
|
|
867
873
|
const browserWindow = container.ownerDocument.defaultView;
|
|
868
874
|
if (!browserWindow) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tileflow/react",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.33",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "React components for rendering Tileflow maps with MapLibre.",
|
|
6
6
|
"type": "module",
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@tileflow/core": ">=0.1.0-alpha.
|
|
47
|
-
"@tileflow/interactions": ">=0.1.0-alpha.
|
|
46
|
+
"@tileflow/core": ">=0.1.0-alpha.38 <0.1.0-beta.0",
|
|
47
|
+
"@tileflow/interactions": ">=0.1.0-alpha.6 <0.1.0-beta.0",
|
|
48
48
|
"@tileflow/static": ">=0.1.0-alpha.28 <0.1.0-beta.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|