@richpods/tiny-geojson-tool 0.2.0 → 0.3.1
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
CHANGED
|
@@ -72,6 +72,52 @@ Initial map view priority on load:
|
|
|
72
72
|
2. Otherwise, bounds are calculated from `modelValue.features`.
|
|
73
73
|
3. If no bounds can be determined (empty map), `center` and `zoom` are used.
|
|
74
74
|
|
|
75
|
+
## Accessing the MapLibre Instance
|
|
76
|
+
|
|
77
|
+
Both components expose a `getMap()` method via template ref that returns the underlying MapLibre GL JS `Map` instance (or `null` before the map is initialized). This lets you call MapLibre methods directly — add controls, fly to coordinates, query features, etc.
|
|
78
|
+
|
|
79
|
+
```vue
|
|
80
|
+
<script setup lang="ts">
|
|
81
|
+
import { ref } from "vue";
|
|
82
|
+
import { GeoJsonEditor } from "@richpods/tiny-geojson-tool";
|
|
83
|
+
import "@richpods/tiny-geojson-tool/styles";
|
|
84
|
+
import type { EditorFeatureCollection } from "@richpods/tiny-geojson-tool";
|
|
85
|
+
|
|
86
|
+
const editorRef = ref<InstanceType<typeof GeoJsonEditor> | null>(null);
|
|
87
|
+
const geojson = ref<EditorFeatureCollection>({
|
|
88
|
+
type: "FeatureCollection",
|
|
89
|
+
features: [],
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
function flyToVienna() {
|
|
93
|
+
editorRef.value?.getMap()?.flyTo({ center: [16.37, 48.21], zoom: 12 });
|
|
94
|
+
}
|
|
95
|
+
</script>
|
|
96
|
+
|
|
97
|
+
<template>
|
|
98
|
+
<button @click="flyToVienna">Fly to Vienna</button>
|
|
99
|
+
<GeoJsonEditor
|
|
100
|
+
ref="editorRef"
|
|
101
|
+
v-model="geojson"
|
|
102
|
+
pmtilesUrl="https://example.com/tiles.pmtiles" />
|
|
103
|
+
</template>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
The same works for `GeoJsonViewer`:
|
|
107
|
+
|
|
108
|
+
```vue
|
|
109
|
+
<script setup lang="ts">
|
|
110
|
+
import { ref } from "vue";
|
|
111
|
+
import { GeoJsonViewer } from "@richpods/tiny-geojson-tool";
|
|
112
|
+
|
|
113
|
+
const viewerRef = ref<InstanceType<typeof GeoJsonViewer> | null>(null);
|
|
114
|
+
</script>
|
|
115
|
+
|
|
116
|
+
<template>
|
|
117
|
+
<GeoJsonViewer ref="viewerRef" :modelValue="geojson" pmtilesUrl="https://example.com/tiles.pmtiles" />
|
|
118
|
+
</template>
|
|
119
|
+
```
|
|
120
|
+
|
|
75
121
|
## Drawing Tools
|
|
76
122
|
|
|
77
123
|
The editor toolbar provides six modes:
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type Map as MaplibreMap } from "maplibre-gl";
|
|
1
2
|
import type { EditorFeatureCollection, EditorFeature, Position, ToolMode, BboxPadding } from "../types";
|
|
2
3
|
type __VLS_Props = {
|
|
3
4
|
modelValue: EditorFeatureCollection;
|
|
@@ -8,7 +9,12 @@ type __VLS_Props = {
|
|
|
8
9
|
zoom?: number;
|
|
9
10
|
bboxPadding?: BboxPadding;
|
|
10
11
|
};
|
|
11
|
-
declare
|
|
12
|
+
declare function fitBounds(): void;
|
|
13
|
+
declare function getMap(): MaplibreMap | null;
|
|
14
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
|
|
15
|
+
getMap: typeof getMap;
|
|
16
|
+
fitBounds: typeof fitBounds;
|
|
17
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
12
18
|
"update:modelValue": (value: EditorFeatureCollection) => any;
|
|
13
19
|
featureClick: (feature: EditorFeature | null) => any;
|
|
14
20
|
featureDelete: (id: string) => any;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { Map as MaplibreMap } from "maplibre-gl";
|
|
1
2
|
import type { EditorFeatureCollection, Position, BboxPadding } from "../types";
|
|
2
3
|
import type { EditorLocale } from "../l10n";
|
|
3
4
|
type __VLS_Props = {
|
|
@@ -8,11 +9,16 @@ type __VLS_Props = {
|
|
|
8
9
|
bboxPadding?: BboxPadding;
|
|
9
10
|
l10n?: Partial<EditorLocale>;
|
|
10
11
|
};
|
|
12
|
+
declare function fitBounds(): void;
|
|
13
|
+
declare function getMap(): MaplibreMap | null;
|
|
11
14
|
type __VLS_ModelProps = {
|
|
12
15
|
modelValue?: EditorFeatureCollection;
|
|
13
16
|
};
|
|
14
17
|
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
15
|
-
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
18
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
19
|
+
getMap: typeof getMap;
|
|
20
|
+
fitBounds: typeof fitBounds;
|
|
21
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
16
22
|
"update:modelValue": (value: EditorFeatureCollection) => any;
|
|
17
23
|
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
18
24
|
"onUpdate:modelValue"?: ((value: EditorFeatureCollection) => any) | undefined;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type Map as MaplibreMap } from "maplibre-gl";
|
|
1
2
|
import type { EditorFeatureCollection, Position, BboxPadding } from "../types";
|
|
2
3
|
type __VLS_Props = {
|
|
3
4
|
modelValue?: EditorFeatureCollection;
|
|
@@ -6,7 +7,12 @@ type __VLS_Props = {
|
|
|
6
7
|
zoom?: number;
|
|
7
8
|
bboxPadding?: BboxPadding;
|
|
8
9
|
};
|
|
9
|
-
declare
|
|
10
|
+
declare function fitBounds(): void;
|
|
11
|
+
declare function getMap(): MaplibreMap | null;
|
|
12
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
|
|
13
|
+
getMap: typeof getMap;
|
|
14
|
+
fitBounds: typeof fitBounds;
|
|
15
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
10
16
|
modelValue: EditorFeatureCollection;
|
|
11
17
|
bboxPadding: BboxPadding;
|
|
12
18
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|