@tileflow/vue 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 +15 -12
- package/dist/index.js +8 -31
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -69,7 +69,7 @@ import {TileflowMap} from '@tileflow/vue';
|
|
|
69
69
|
|
|
70
70
|
<template>
|
|
71
71
|
<TileflowMap
|
|
72
|
-
:source="{
|
|
72
|
+
:source="{map: 'madrid'}"
|
|
73
73
|
theme="system"
|
|
74
74
|
:center="[-3.7038, 40.4168]"
|
|
75
75
|
:zoom="12"
|
|
@@ -79,19 +79,20 @@ import {TileflowMap} from '@tileflow/vue';
|
|
|
79
79
|
</template>
|
|
80
80
|
```
|
|
81
81
|
|
|
82
|
-
Coordinates are `[longitude, latitude]`. `source
|
|
83
|
-
`map_...` identifier. The default manifest
|
|
84
|
-
`source.manifestUrl` explicitly for a subpath,
|
|
85
|
-
not infer build-tool configuration.
|
|
82
|
+
Coordinates are `[longitude, latitude]`. `source` is one object, `{map, manifestUrl?}`.
|
|
83
|
+
`source.map` is the config's portable ID, not a hosted `map_...` identifier. The default manifest
|
|
84
|
+
URL is exactly `/tileflow/manifest.json`; provide `source.manifestUrl` explicitly for a subpath,
|
|
85
|
+
reverse proxy, or external host. The component does not infer build-tool configuration.
|
|
86
86
|
|
|
87
87
|
Omitting `theme` uses `defaultTheme`. `system` needs the map's explicit light/dark mapping, which
|
|
88
88
|
Streets supplies. Switching themes preserves the map, camera, and interactions, with rollback on
|
|
89
89
|
failure. Listen to `themeChange` for transitions.
|
|
90
90
|
|
|
91
91
|
`mapOptions` accepts native MapLibre options except `container` and `style`. Direct props take
|
|
92
|
-
priority over those options, then the published view, then shared defaults.
|
|
93
|
-
|
|
94
|
-
|
|
92
|
+
priority over those options, then the published view, then shared defaults. `TileflowMap` always
|
|
93
|
+
selects a Tileflow map through its manifest; it has no renderer discriminator or direct-style mode.
|
|
94
|
+
The obsolete source fields `kind` and `style` are rejected. For a completely unmanaged map, use
|
|
95
|
+
`maplibre-gl` directly rather than a Tileflow component.
|
|
95
96
|
|
|
96
97
|
## Add annotations and native popup UI
|
|
97
98
|
|
|
@@ -126,7 +127,7 @@ const state = ref<TileflowInteractionState>({popup: null});
|
|
|
126
127
|
<template>
|
|
127
128
|
<TileflowMap
|
|
128
129
|
v-model:interaction-state="state"
|
|
129
|
-
:source="{
|
|
130
|
+
:source="{map: 'madrid'}"
|
|
130
131
|
:annotations="annotations"
|
|
131
132
|
@interaction-diagnostic="(diagnostic) => console.error(diagnostic.code)"
|
|
132
133
|
>
|
|
@@ -157,9 +158,11 @@ links, buttons, or forms.
|
|
|
157
158
|
|
|
158
159
|
## Display an existing image
|
|
159
160
|
|
|
160
|
-
`mode="image"` renders an explicit `imageUrl` or
|
|
161
|
-
|
|
162
|
-
|
|
161
|
+
`mode="image"` renders an explicit `imageUrl` or derives an image URL from the selected manifest
|
|
162
|
+
map's `mapId`, `apiUrl`, concrete theme and view, without loading MapLibre. It still requires a valid
|
|
163
|
+
Tileflow source. A local style build does not generate an image. This mode does not create or poll
|
|
164
|
+
a static render; use the server-side
|
|
165
|
+
[Static Maps client](https://github.com/tileflow/tileflow-sdk/blob/main/packages/static/README.md)
|
|
163
166
|
for that operation and keep privileged keys on the server.
|
|
164
167
|
|
|
165
168
|
Do not pass annotations, semantic bindings, state, or interaction slots to image mode. Unsupported
|
package/dist/index.js
CHANGED
|
@@ -40,8 +40,7 @@ import {
|
|
|
40
40
|
resolveTileflowRuntimeStyle,
|
|
41
41
|
resolveTileflowRuntimeTheme,
|
|
42
42
|
resolveTileflowRuntimeView,
|
|
43
|
-
resolveTileflowStaticImageUrl
|
|
44
|
-
shouldLoadTileflowManifest
|
|
43
|
+
resolveTileflowStaticImageUrl
|
|
45
44
|
} from "@tileflow/core/runtime";
|
|
46
45
|
import {
|
|
47
46
|
initialTileflowInteractionState
|
|
@@ -167,9 +166,6 @@ function validateTileflowMapStyleInputs(input) {
|
|
|
167
166
|
if (input.theme !== void 0 && !validateTileflowThemeSelection(input.theme)) {
|
|
168
167
|
return { error: 'theme must be a concrete portable theme name or "system"', ok: false };
|
|
169
168
|
}
|
|
170
|
-
if (input.theme !== void 0 && input.source.kind !== "tileflow") {
|
|
171
|
-
return { error: "theme is only valid with a tileflow source", ok: false };
|
|
172
|
-
}
|
|
173
169
|
return { ok: true };
|
|
174
170
|
}
|
|
175
171
|
function assertTileflowMapStyleInputs(input) {
|
|
@@ -330,31 +326,20 @@ var TileflowMap = defineComponent({
|
|
|
330
326
|
},
|
|
331
327
|
...controlledInteractionOwnership ? { interactionState: initialInteractionState } : { defaultInteractionState: initialInteractionState }
|
|
332
328
|
});
|
|
333
|
-
const mapName = computed(
|
|
334
|
-
|
|
335
|
-
);
|
|
336
|
-
const manifestUrl = computed(
|
|
337
|
-
() => props.source.kind === "tileflow" ? props.source.manifestUrl ?? defaultTileflowManifestUrl : defaultTileflowManifestUrl
|
|
338
|
-
);
|
|
339
|
-
const shouldLoadManifest = computed(
|
|
340
|
-
() => shouldLoadTileflowManifest({
|
|
341
|
-
source: props.source
|
|
342
|
-
})
|
|
343
|
-
);
|
|
344
|
-
const manifestRequestKey = computed(
|
|
345
|
-
() => shouldLoadManifest.value ? JSON.stringify([manifestUrl.value, mapName.value]) : "not-needed"
|
|
346
|
-
);
|
|
329
|
+
const mapName = computed(() => props.source.map);
|
|
330
|
+
const manifestUrl = computed(() => props.source.manifestUrl ?? defaultTileflowManifestUrl);
|
|
331
|
+
const manifestRequestKey = computed(() => JSON.stringify([manifestUrl.value, mapName.value]));
|
|
347
332
|
const currentManifestResolutionState = computed(
|
|
348
|
-
() => manifestResolutionKey.value === manifestRequestKey.value ? manifestResolutionState.value :
|
|
333
|
+
() => manifestResolutionKey.value === manifestRequestKey.value ? manifestResolutionState.value : "loading"
|
|
349
334
|
);
|
|
350
335
|
const manifestMap = computed(
|
|
351
336
|
() => manifestResolutionKey.value === manifestRequestKey.value && manifestResolutionState.value === "ready" ? loadedManifestMap.value : null
|
|
352
337
|
);
|
|
353
338
|
const themeResolution = computed(() => {
|
|
354
|
-
if (!manifestMap.value
|
|
339
|
+
if (!manifestMap.value) {
|
|
355
340
|
return {
|
|
356
341
|
error: false,
|
|
357
|
-
name: props.
|
|
342
|
+
name: props.theme && props.theme !== "system" ? props.theme : void 0
|
|
358
343
|
};
|
|
359
344
|
}
|
|
360
345
|
try {
|
|
@@ -415,7 +400,7 @@ var TileflowMap = defineComponent({
|
|
|
415
400
|
}) : void 0)
|
|
416
401
|
);
|
|
417
402
|
const runtimeResolutionState = computed(() => {
|
|
418
|
-
if (
|
|
403
|
+
if (currentManifestResolutionState.value !== "ready") {
|
|
419
404
|
return currentManifestResolutionState.value === "error" ? "error" : "loading";
|
|
420
405
|
}
|
|
421
406
|
if (themeResolution.value.error) return "error";
|
|
@@ -538,15 +523,7 @@ var TileflowMap = defineComponent({
|
|
|
538
523
|
settleInteractionReadiness();
|
|
539
524
|
});
|
|
540
525
|
const refreshManifest = async () => {
|
|
541
|
-
const shouldLoad = shouldLoadManifest.value;
|
|
542
526
|
const requestKey = manifestRequestKey.value;
|
|
543
|
-
if (!shouldLoad) {
|
|
544
|
-
manifestLoadId += 1;
|
|
545
|
-
loadedManifestMap.value = null;
|
|
546
|
-
manifestResolutionKey.value = requestKey;
|
|
547
|
-
manifestResolutionState.value = "not-needed";
|
|
548
|
-
return;
|
|
549
|
-
}
|
|
550
527
|
const loadId = ++manifestLoadId;
|
|
551
528
|
loadedManifestMap.value = null;
|
|
552
529
|
manifestResolutionKey.value = requestKey;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tileflow/vue",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.25",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "Vue component for rendering Tileflow maps with MapLibre.",
|
|
6
6
|
"type": "module",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"access": "public"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@tileflow/core": ">=0.1.0-alpha.
|
|
41
|
+
"@tileflow/core": ">=0.1.0-alpha.27 <0.1.0-beta.0",
|
|
42
42
|
"@tileflow/interactions": ">=0.1.0-alpha.4 <0.1.0-beta.0"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|