@tileflow/react 0.1.0-alpha.25 → 0.1.0-alpha.27
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 +16 -13
- package/dist/index.js +17 -35
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -79,7 +79,7 @@ import {Map} from '@tileflow/react';
|
|
|
79
79
|
export function App() {
|
|
80
80
|
return (
|
|
81
81
|
<Map
|
|
82
|
-
source={{
|
|
82
|
+
source={{map: 'madrid'}}
|
|
83
83
|
theme="system"
|
|
84
84
|
center={[-3.7038, 40.4168]}
|
|
85
85
|
zoom={12}
|
|
@@ -89,19 +89,21 @@ export function App() {
|
|
|
89
89
|
}
|
|
90
90
|
```
|
|
91
91
|
|
|
92
|
-
Coordinates are `[longitude, latitude]`. `source
|
|
93
|
-
not a hosted `map_...` identifier.
|
|
94
|
-
For a subpath or external host,
|
|
95
|
-
bundler configuration or search
|
|
92
|
+
Coordinates are `[longitude, latitude]`. `source` is one object, `{map, manifestUrl?}`.
|
|
93
|
+
`source.map` must match the config's portable map ID, not a hosted `map_...` identifier.
|
|
94
|
+
The default manifest URL is exactly `/tileflow/manifest.json`. For a subpath or external host,
|
|
95
|
+
provide `manifestUrl` in the source; the component does not infer bundler configuration or search
|
|
96
|
+
for assets.
|
|
96
97
|
|
|
97
98
|
`theme` selects a published concrete theme. Omission uses `defaultTheme`; `system` requires an
|
|
98
99
|
explicit light/dark mapping, which Streets supplies. Theme changes preserve the MapLibre instance,
|
|
99
100
|
camera, and interactions, and roll back on failure. `onThemeChange` reports transitions.
|
|
100
101
|
|
|
101
102
|
`mapOptions` accepts native MapLibre options except `container` and `style`. Direct camera props
|
|
102
|
-
take priority over `mapOptions`, then the manifest view, then shared defaults.
|
|
103
|
-
|
|
104
|
-
|
|
103
|
+
take priority over `mapOptions`, then the manifest view, then shared defaults. `Map` always selects
|
|
104
|
+
a Tileflow map through its manifest; it has no renderer discriminator or direct-style mode.
|
|
105
|
+
The obsolete source fields `kind` and `style` are rejected. For a completely unmanaged map, use
|
|
106
|
+
`maplibre-gl` directly rather than a Tileflow component.
|
|
105
107
|
|
|
106
108
|
## Add annotations and popups
|
|
107
109
|
|
|
@@ -141,7 +143,7 @@ export function PropertyMap() {
|
|
|
141
143
|
|
|
142
144
|
return (
|
|
143
145
|
<Map
|
|
144
|
-
source={{
|
|
146
|
+
source={{map: 'madrid'}}
|
|
145
147
|
annotations={annotations}
|
|
146
148
|
interactionState={state}
|
|
147
149
|
onInteractionStateChange={setState}
|
|
@@ -178,10 +180,11 @@ Keep tooltips non-interactive; put buttons, links, and forms in popups.
|
|
|
178
180
|
|
|
179
181
|
## Display an image or create a render
|
|
180
182
|
|
|
181
|
-
`<Map mode="image">` displays an
|
|
182
|
-
manifest
|
|
183
|
-
|
|
184
|
-
not
|
|
183
|
+
`<Map mode="image">` displays an explicit `imageUrl` or derives an image URL from the selected
|
|
184
|
+
manifest map's `mapId`, `apiUrl`, concrete theme and view. It still requires a valid Tileflow source.
|
|
185
|
+
It does not create a static render, poll an operation, or load MapLibre. A local style build alone
|
|
186
|
+
does not create that image. Annotations, semantic bindings, and interaction state are not supported
|
|
187
|
+
in image mode.
|
|
185
188
|
|
|
186
189
|
To request a new static render, use `StaticMap` from `@tileflow/react/static`. First install the
|
|
187
190
|
shared client/types used by this example:
|
package/dist/index.js
CHANGED
|
@@ -11,6 +11,7 @@ import {
|
|
|
11
11
|
} from "react";
|
|
12
12
|
import { createPortal } from "react-dom";
|
|
13
13
|
import {
|
|
14
|
+
attachTileflowAtmosphere,
|
|
14
15
|
attachTileflowFairUseNotice,
|
|
15
16
|
attachTileflowMapLifecycle,
|
|
16
17
|
createTileflowSessionStarter,
|
|
@@ -37,8 +38,7 @@ import {
|
|
|
37
38
|
resolveTileflowRuntimeStyle,
|
|
38
39
|
resolveTileflowRuntimeTheme,
|
|
39
40
|
resolveTileflowRuntimeView,
|
|
40
|
-
resolveTileflowStaticImageUrl
|
|
41
|
-
shouldLoadTileflowManifest
|
|
41
|
+
resolveTileflowStaticImageUrl
|
|
42
42
|
} from "@tileflow/core/runtime";
|
|
43
43
|
import {
|
|
44
44
|
createTileflowMapLibreDomRuntime,
|
|
@@ -175,9 +175,6 @@ function validateTileflowMapStyleInputs(input) {
|
|
|
175
175
|
if (input.theme !== void 0 && !validateTileflowThemeSelection(input.theme)) {
|
|
176
176
|
return { error: 'theme must be a concrete portable theme name or "system"', ok: false };
|
|
177
177
|
}
|
|
178
|
-
if (input.theme !== void 0 && input.source.kind !== "tileflow") {
|
|
179
|
-
return { error: "theme is only valid with a tileflow source", ok: false };
|
|
180
|
-
}
|
|
181
178
|
return { ok: true };
|
|
182
179
|
}
|
|
183
180
|
function assertTileflowMapStyleInputs(input) {
|
|
@@ -253,16 +250,14 @@ function Map2(props) {
|
|
|
253
250
|
} = props;
|
|
254
251
|
const generalRenderPopup = renderPopup;
|
|
255
252
|
const generalRenderTooltip = renderTooltip;
|
|
256
|
-
const
|
|
257
|
-
const
|
|
258
|
-
const sourceManifestUrl = source.kind === "tileflow" ? source.manifestUrl : void 0;
|
|
259
|
-
const sourceStyle = source.kind === "maplibre" ? source.style : void 0;
|
|
253
|
+
const sourceMap = source.map;
|
|
254
|
+
const sourceManifestUrl = source.manifestUrl;
|
|
260
255
|
const runtimeSource = useMemo(
|
|
261
|
-
() =>
|
|
262
|
-
[
|
|
256
|
+
() => ({ manifestUrl: sourceManifestUrl, map: sourceMap }),
|
|
257
|
+
[sourceManifestUrl, sourceMap]
|
|
263
258
|
);
|
|
264
|
-
const mapName = runtimeSource.
|
|
265
|
-
const manifestUrl = runtimeSource.
|
|
259
|
+
const mapName = runtimeSource.map;
|
|
260
|
+
const manifestUrl = runtimeSource.manifestUrl ?? defaultTileflowManifestUrl;
|
|
266
261
|
const preparedAnnotations = useMemo(
|
|
267
262
|
() => prepareTileflowReactAnnotations(annotations),
|
|
268
263
|
[annotations]
|
|
@@ -328,22 +323,12 @@ function Map2(props) {
|
|
|
328
323
|
const resolvedCaptureId = normalizeTileflowCaptureId(captureId);
|
|
329
324
|
const resolvedMode = resolveTileflowMapMode({ mode });
|
|
330
325
|
const isImageMode = resolvedMode === "image";
|
|
331
|
-
const
|
|
332
|
-
|
|
333
|
-
});
|
|
334
|
-
const manifestRequestKey = shouldLoadManifest ? JSON.stringify([manifestUrl, mapName]) : "not-needed";
|
|
335
|
-
const currentManifestResolution = manifestResolution.key === manifestRequestKey ? manifestResolution : {
|
|
336
|
-
key: manifestRequestKey,
|
|
337
|
-
map: null,
|
|
338
|
-
state: shouldLoadManifest ? "loading" : "not-needed"
|
|
339
|
-
};
|
|
326
|
+
const manifestRequestKey = JSON.stringify([manifestUrl, mapName]);
|
|
327
|
+
const currentManifestResolution = manifestResolution.key === manifestRequestKey ? manifestResolution : { key: manifestRequestKey, map: null, state: "loading" };
|
|
340
328
|
const manifestMap = currentManifestResolution.state === "ready" ? currentManifestResolution.map : null;
|
|
341
329
|
const themeResolution = useMemo(() => {
|
|
342
|
-
if (!manifestMap
|
|
343
|
-
return {
|
|
344
|
-
error: false,
|
|
345
|
-
name: runtimeSource.kind === "tileflow" && theme && theme !== "system" ? theme : void 0
|
|
346
|
-
};
|
|
330
|
+
if (!manifestMap) {
|
|
331
|
+
return { error: false, name: theme && theme !== "system" ? theme : void 0 };
|
|
347
332
|
}
|
|
348
333
|
try {
|
|
349
334
|
return {
|
|
@@ -353,7 +338,7 @@ function Map2(props) {
|
|
|
353
338
|
} catch {
|
|
354
339
|
return { error: true, name: void 0 };
|
|
355
340
|
}
|
|
356
|
-
}, [manifestMap,
|
|
341
|
+
}, [manifestMap, systemColorScheme, theme]);
|
|
357
342
|
const resolvedThemeName = themeResolution.name;
|
|
358
343
|
const manifestView = resolveTileflowRuntimeView({ manifestMap });
|
|
359
344
|
const manifestCenter = useStableMapOptionValue(
|
|
@@ -458,10 +443,6 @@ function Map2(props) {
|
|
|
458
443
|
reportedDeclarativeDiagnosticKeysRef.current = nextKeys;
|
|
459
444
|
}, [declarativeInteractionDiagnostics]);
|
|
460
445
|
useEffect(() => {
|
|
461
|
-
if (!shouldLoadManifest) {
|
|
462
|
-
setManifestResolution({ key: manifestRequestKey, map: null, state: "not-needed" });
|
|
463
|
-
return;
|
|
464
|
-
}
|
|
465
446
|
let cancelled = false;
|
|
466
447
|
setManifestResolution({ key: manifestRequestKey, map: null, state: "loading" });
|
|
467
448
|
loadTileflowManifest(manifestUrl).then((manifest) => {
|
|
@@ -483,7 +464,7 @@ function Map2(props) {
|
|
|
483
464
|
return () => {
|
|
484
465
|
cancelled = true;
|
|
485
466
|
};
|
|
486
|
-
}, [manifestRequestKey, manifestUrl, mapName
|
|
467
|
+
}, [manifestRequestKey, manifestUrl, mapName]);
|
|
487
468
|
const runtimeStyle = useMemo(() => {
|
|
488
469
|
if (isImageMode || themeResolution.error) {
|
|
489
470
|
return null;
|
|
@@ -496,7 +477,7 @@ function Map2(props) {
|
|
|
496
477
|
});
|
|
497
478
|
}, [isImageMode, manifestMap, runtimeSource, systemColorScheme, themeResolution]);
|
|
498
479
|
runtimeStyleRef.current = runtimeStyle;
|
|
499
|
-
const runtimeMapIdentity =
|
|
480
|
+
const runtimeMapIdentity = `${manifestUrl}\0${runtimeSource.map}`;
|
|
500
481
|
const runtimeStyleReady = runtimeStyle !== null || themeResolution.error && mapRef.current !== null;
|
|
501
482
|
const resolvedAnalytics = useMemo(
|
|
502
483
|
() => mergeTileflowAnalytics(analytics, runtimeStyle?.analytics),
|
|
@@ -544,7 +525,7 @@ function Map2(props) {
|
|
|
544
525
|
]
|
|
545
526
|
);
|
|
546
527
|
const runtimeResolutionState = (() => {
|
|
547
|
-
if (
|
|
528
|
+
if (currentManifestResolution.state !== "ready") {
|
|
548
529
|
return currentManifestResolution.state === "error" ? "error" : "loading";
|
|
549
530
|
}
|
|
550
531
|
if (themeResolution.error) return "error";
|
|
@@ -739,6 +720,7 @@ function Map2(props) {
|
|
|
739
720
|
mapRef.current = map;
|
|
740
721
|
setupResources.map = map;
|
|
741
722
|
registerCleanup(() => map.remove());
|
|
723
|
+
registerCleanup(attachTileflowAtmosphere(map));
|
|
742
724
|
const themeController = initialRuntimeStyle.theme === void 0 ? void 0 : createTileflowThemeController({
|
|
743
725
|
initial: initialRuntimeStyle,
|
|
744
726
|
map,
|
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.27",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "React components for rendering Tileflow maps with MapLibre.",
|
|
6
6
|
"type": "module",
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@tileflow/core": ">=0.1.0-alpha.
|
|
46
|
+
"@tileflow/core": ">=0.1.0-alpha.29 <0.1.0-beta.0",
|
|
47
47
|
"@tileflow/interactions": ">=0.1.0-alpha.4 <0.1.0-beta.0",
|
|
48
|
-
"@tileflow/static": ">=0.1.0-alpha.
|
|
48
|
+
"@tileflow/static": ">=0.1.0-alpha.27 <0.1.0-beta.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"maplibre-gl": ">=6.4.1 <7",
|