@tileflow/svelte 0.1.0-alpha.24 → 0.1.0-alpha.25
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 +14 -11
- package/package.json +2 -2
- package/src/TileflowMap.svelte +9 -39
- package/src/style-source.js +0 -6
package/README.md
CHANGED
|
@@ -73,7 +73,7 @@ The worker and shared module must match the application's installed MapLibre ver
|
|
|
73
73
|
</script>
|
|
74
74
|
|
|
75
75
|
<TileflowMap
|
|
76
|
-
source={{
|
|
76
|
+
source={{map: 'madrid'}}
|
|
77
77
|
theme="system"
|
|
78
78
|
center={[-3.7038, 40.4168]}
|
|
79
79
|
zoom={12}
|
|
@@ -81,18 +81,20 @@ The worker and shared module must match the application's installed MapLibre ver
|
|
|
81
81
|
/>
|
|
82
82
|
```
|
|
83
83
|
|
|
84
|
-
Coordinates are `[longitude, latitude]`. `source
|
|
85
|
-
`
|
|
86
|
-
`source.manifestUrl` for a subpath or external
|
|
84
|
+
Coordinates are `[longitude, latitude]`. `source` is one object, `{map, manifestUrl?}`.
|
|
85
|
+
`source.map` matches the config's portable ID, not a hosted `map_...` identifier. The default
|
|
86
|
+
manifest URL is exactly `/tileflow/manifest.json`. Set `source.manifestUrl` for a subpath or external
|
|
87
|
+
host; the browser does not infer bundler configuration.
|
|
87
88
|
|
|
88
89
|
Omitting `theme` uses `defaultTheme`. `system` needs an explicit light/dark mapping, which Streets
|
|
89
90
|
supplies. Theme changes keep the MapLibre instance, camera, and interactions, and roll back on
|
|
90
91
|
failure. `onThemeChange` reports transitions.
|
|
91
92
|
|
|
92
93
|
`mapOptions` accepts native MapLibre options except `container` and `style`. Direct props win over
|
|
93
|
-
those options, then the manifest view, then shared defaults.
|
|
94
|
-
|
|
95
|
-
|
|
94
|
+
those options, then the manifest view, then shared defaults. `TileflowMap` always selects a Tileflow
|
|
95
|
+
map through its manifest; it has no renderer discriminator or direct-style mode. The obsolete
|
|
96
|
+
source fields `kind` and `style` are rejected. For a completely unmanaged map, use `maplibre-gl`
|
|
97
|
+
directly rather than a Tileflow component.
|
|
96
98
|
|
|
97
99
|
## Add annotations and native popup UI
|
|
98
100
|
|
|
@@ -137,7 +139,7 @@ This Svelte 5 component uses the worker and CSS setup above:
|
|
|
137
139
|
{/snippet}
|
|
138
140
|
|
|
139
141
|
<TileflowMap
|
|
140
|
-
source={{
|
|
142
|
+
source={{map: 'madrid'}}
|
|
141
143
|
{annotations}
|
|
142
144
|
interactionState={state}
|
|
143
145
|
onInteractionStateChange={(next) => (state = next)}
|
|
@@ -164,9 +166,10 @@ HTML. Keep tooltips non-interactive and put buttons, links, and forms in popups.
|
|
|
164
166
|
|
|
165
167
|
## Display an existing image
|
|
166
168
|
|
|
167
|
-
`mode="image"` displays an explicit `imageUrl` or
|
|
168
|
-
|
|
169
|
-
|
|
169
|
+
`mode="image"` displays an explicit `imageUrl` or derives an image URL from the selected manifest
|
|
170
|
+
map's `mapId`, `apiUrl`, concrete theme and view, without loading MapLibre. It still requires a valid
|
|
171
|
+
Tileflow source. A local style build does not generate that image. This mode does not submit or poll
|
|
172
|
+
a Static Maps operation; use the server-side
|
|
170
173
|
[Static Maps client](https://github.com/tileflow/tileflow-sdk/blob/main/packages/static/README.md)
|
|
171
174
|
for new renders, keeping privileged credentials off the browser.
|
|
172
175
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tileflow/svelte",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.25",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "Svelte component for rendering Tileflow maps with MapLibre.",
|
|
6
6
|
"type": "module",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"access": "public"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@tileflow/core": ">=0.1.0-alpha.
|
|
47
|
+
"@tileflow/core": ">=0.1.0-alpha.27 <0.1.0-beta.0",
|
|
48
48
|
"@tileflow/interactions": ">=0.1.0-alpha.4 <0.1.0-beta.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
package/src/TileflowMap.svelte
CHANGED
|
@@ -23,7 +23,6 @@
|
|
|
23
23
|
resolveTileflowRuntimeTheme,
|
|
24
24
|
resolveTileflowRuntimeView,
|
|
25
25
|
resolveTileflowStaticImageUrl,
|
|
26
|
-
shouldLoadTileflowManifest,
|
|
27
26
|
type TileflowRuntimeManifestMap,
|
|
28
27
|
} from '@tileflow/core/runtime';
|
|
29
28
|
import {
|
|
@@ -144,7 +143,7 @@
|
|
|
144
143
|
let manifestMap: TileflowRuntimeManifestMap | null = null;
|
|
145
144
|
let manifestLoadId = 0;
|
|
146
145
|
let manifestResolutionKey = '';
|
|
147
|
-
let manifestResolutionState: 'error' | 'loading' | '
|
|
146
|
+
let manifestResolutionState: 'error' | 'loading' | 'ready' = 'loading';
|
|
148
147
|
let mapLoadId = 0;
|
|
149
148
|
let mounted = false;
|
|
150
149
|
let refreshRunId = 0;
|
|
@@ -170,23 +169,11 @@
|
|
|
170
169
|
$: assertTileflowMapStyleInputs({source, theme});
|
|
171
170
|
$: resolvedCaptureId = normalizeTileflowCaptureId(captureId);
|
|
172
171
|
$: isImageMode = resolvedMode === 'image';
|
|
173
|
-
$: mapName = source
|
|
174
|
-
$: manifestUrl =
|
|
175
|
-
|
|
176
|
-
? (source.manifestUrl ?? defaultTileflowManifestUrl)
|
|
177
|
-
: defaultTileflowManifestUrl;
|
|
178
|
-
$: shouldLoadManifest = shouldLoadTileflowManifest({
|
|
179
|
-
source,
|
|
180
|
-
});
|
|
181
|
-
$: manifestRequestKey = shouldLoadManifest
|
|
182
|
-
? JSON.stringify([manifestUrl, mapName])
|
|
183
|
-
: 'not-needed';
|
|
172
|
+
$: mapName = source.map;
|
|
173
|
+
$: manifestUrl = source.manifestUrl ?? defaultTileflowManifestUrl;
|
|
174
|
+
$: manifestRequestKey = JSON.stringify([manifestUrl, mapName]);
|
|
184
175
|
$: currentManifestResolutionState =
|
|
185
|
-
manifestResolutionKey === manifestRequestKey
|
|
186
|
-
? manifestResolutionState
|
|
187
|
-
: shouldLoadManifest
|
|
188
|
-
? 'loading'
|
|
189
|
-
: 'not-needed';
|
|
176
|
+
manifestResolutionKey === manifestRequestKey ? manifestResolutionState : 'loading';
|
|
190
177
|
$: manifestMap =
|
|
191
178
|
manifestResolutionKey === manifestRequestKey && manifestResolutionState === 'ready'
|
|
192
179
|
? loadedManifestMap
|
|
@@ -194,7 +181,6 @@
|
|
|
194
181
|
$: themeResolution = resolveThemeSelection({
|
|
195
182
|
colorScheme: systemColorScheme,
|
|
196
183
|
manifestMap,
|
|
197
|
-
source,
|
|
198
184
|
theme,
|
|
199
185
|
});
|
|
200
186
|
$: resolvedThemeName = themeResolution.name;
|
|
@@ -237,7 +223,6 @@
|
|
|
237
223
|
isImageMode,
|
|
238
224
|
runtimeImageUrl,
|
|
239
225
|
runtimeStyle,
|
|
240
|
-
shouldLoadManifest,
|
|
241
226
|
themeResolutionError: themeResolution.error,
|
|
242
227
|
});
|
|
243
228
|
$: currentMapCaptureState =
|
|
@@ -384,17 +369,7 @@
|
|
|
384
369
|
}
|
|
385
370
|
|
|
386
371
|
async function refreshManifest() {
|
|
387
|
-
const shouldLoad = shouldLoadManifest;
|
|
388
372
|
const requestKey = manifestRequestKey;
|
|
389
|
-
|
|
390
|
-
if (!shouldLoad) {
|
|
391
|
-
manifestLoadId += 1;
|
|
392
|
-
loadedManifestMap = null;
|
|
393
|
-
manifestResolutionKey = requestKey;
|
|
394
|
-
manifestResolutionState = 'not-needed';
|
|
395
|
-
return;
|
|
396
|
-
}
|
|
397
|
-
|
|
398
373
|
const loadId = ++manifestLoadId;
|
|
399
374
|
loadedManifestMap = null;
|
|
400
375
|
manifestResolutionKey = requestKey;
|
|
@@ -1228,16 +1203,12 @@
|
|
|
1228
1203
|
function resolveThemeSelection(input: {
|
|
1229
1204
|
colorScheme: 'dark' | 'light';
|
|
1230
1205
|
manifestMap: TileflowRuntimeManifestMap | null;
|
|
1231
|
-
source: TileflowMapProps['source'];
|
|
1232
1206
|
theme: TileflowMapProps['theme'];
|
|
1233
1207
|
}): Readonly<{error: boolean; name: string | undefined}> {
|
|
1234
|
-
if (!input.manifestMap
|
|
1208
|
+
if (!input.manifestMap) {
|
|
1235
1209
|
return {
|
|
1236
1210
|
error: false,
|
|
1237
|
-
name:
|
|
1238
|
-
input.source.kind === 'tileflow' && input.theme && input.theme !== 'system'
|
|
1239
|
-
? input.theme
|
|
1240
|
-
: undefined,
|
|
1211
|
+
name: input.theme && input.theme !== 'system' ? input.theme : undefined,
|
|
1241
1212
|
};
|
|
1242
1213
|
}
|
|
1243
1214
|
|
|
@@ -1252,16 +1223,15 @@
|
|
|
1252
1223
|
}
|
|
1253
1224
|
|
|
1254
1225
|
function resolveRuntimeResolutionState(input: {
|
|
1255
|
-
currentManifestResolutionState: 'error' | 'loading' | '
|
|
1226
|
+
currentManifestResolutionState: 'error' | 'loading' | 'ready';
|
|
1256
1227
|
imageSize: {height: number; width: number} | null;
|
|
1257
1228
|
imageUrl: string | undefined;
|
|
1258
1229
|
isImageMode: boolean;
|
|
1259
1230
|
runtimeImageUrl: string | undefined;
|
|
1260
1231
|
runtimeStyle: ReturnType<typeof resolveTileflowRuntimeStyle>;
|
|
1261
|
-
shouldLoadManifest: boolean;
|
|
1262
1232
|
themeResolutionError: boolean;
|
|
1263
1233
|
}): 'error' | 'idle' | 'loading' {
|
|
1264
|
-
if (input.
|
|
1234
|
+
if (input.currentManifestResolutionState !== 'ready') {
|
|
1265
1235
|
return input.currentManifestResolutionState === 'error' ? 'error' : 'loading';
|
|
1266
1236
|
}
|
|
1267
1237
|
if (input.themeResolutionError) return 'error';
|
package/src/style-source.js
CHANGED
|
@@ -16,12 +16,6 @@ export function validateTileflowMapStyleInputs(input) {
|
|
|
16
16
|
if (input.theme !== undefined && !validateTileflowThemeSelection(input.theme)) {
|
|
17
17
|
return {error: 'theme must be a concrete portable theme name or "system"', ok: false};
|
|
18
18
|
}
|
|
19
|
-
if (
|
|
20
|
-
input.theme !== undefined &&
|
|
21
|
-
/** @type {{kind?: unknown}} */ (input.source).kind !== 'tileflow'
|
|
22
|
-
) {
|
|
23
|
-
return {error: 'theme is only valid with a tileflow source', ok: false};
|
|
24
|
-
}
|
|
25
19
|
return {ok: true};
|
|
26
20
|
}
|
|
27
21
|
|