@richpods/tiny-geojson-tool 0.1.1 → 0.3.0

package/README.md

@@ -56,6 +56,7 @@ Both components accept:
 | `pmtilesUrl` | `string` | **(required)** | URL to a PMTiles archive for the base map |
 | `center` | `[lng, lat]` | `[0, 20]` | Initial map center |
 | `zoom` | `number` | `2` | Initial zoom level |
+| `bboxPadding` | `[top, right, bottom, left]` | `[0, 0, 0, 0]` | Extra padding used when fitting to GeoJSON bounds |
 
 `GeoJsonEditor` additionally accepts:
 
@@ -65,6 +66,58 @@ Both components accept:
 | `pointRadius` | `number` | `10` | Radius of point features in pixels |
 | `l10n` | `Partial<EditorLocale>` | English | Override UI strings for localization |
 
+Initial map view priority on load:
+
+1. If `modelValue.bbox` is present, it is used directly.
+2. Otherwise, bounds are calculated from `modelValue.features`.
+3. If no bounds can be determined (empty map), `center` and `zoom` are used.
+
+## Accessing the MapLibre Instance
+
+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.
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { GeoJsonEditor } from "@richpods/tiny-geojson-tool";
+import "@richpods/tiny-geojson-tool/styles";
+import type { EditorFeatureCollection } from "@richpods/tiny-geojson-tool";
+
+const editorRef = ref<InstanceType<typeof GeoJsonEditor> | null>(null);
+const geojson = ref<EditorFeatureCollection>({
+    type: "FeatureCollection",
+    features: [],
+});
+
+function flyToVienna() {
+    editorRef.value?.getMap()?.flyTo({ center: [16.37, 48.21], zoom: 12 });
+}
+</script>
+
+<template>
+    <button @click="flyToVienna">Fly to Vienna</button>
+    <GeoJsonEditor
+        ref="editorRef"
+        v-model="geojson"
+        pmtilesUrl="https://example.com/tiles.pmtiles" />
+</template>
+```
+
+The same works for `GeoJsonViewer`:
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { GeoJsonViewer } from "@richpods/tiny-geojson-tool";
+
+const viewerRef = ref<InstanceType<typeof GeoJsonViewer> | null>(null);
+</script>
+
+<template>
+    <GeoJsonViewer ref="viewerRef" :modelValue="geojson" pmtilesUrl="https://example.com/tiles.pmtiles" />
+</template>
+```
+
 ## Drawing Tools
 
 The editor toolbar provides six modes:
@@ -78,20 +131,6 @@ The editor toolbar provides six modes:
 
 Right-click or press Escape to cancel drawing.
 
-## Bounding Box
-
-The GeoJSON `bbox` member ([RFC 7946 §5](https://datatracker.ietf.org/doc/html/rfc7946#section-5)) can be used to store and restore a map view. `GeoJsonEditor` exposes a `saveBbox` method via template ref, and both components respect an existing `bbox` on load.
-
-```javascript
-// Save the current map view as bbox
-editorRef.value.saveBbox();
-
-// Or provide a custom bbox [west, south, east, north]
-editorRef.value.saveBbox([-74.1, 40.6, -73.8, 40.9]);
-```
-
-When a `bbox` is present on the feature collection, both `GeoJsonEditor` and `GeoJsonViewer` will fit the map to that bounding box on load (instead of auto-fitting to features). Explicit `center`/`zoom` props still take priority over `bbox`.
-
 ## Style Properties
 
 Features support [simplestyle-spec 1.1.0](https://github.com/mapbox/simplestyle-spec) properties:
@@ -143,20 +182,6 @@ See `EditorLocale` for the full list of keys and `DEFAULT_LOCALE` for the Englis
 
 All styles use CSS custom properties prefixed with `--tge-`. Override them to customize the look.
 
-## Utilities
-
-The library exports helper functions for working with GeoJSON data outside of the components.
-
-| Function | Description |
-|----------|-------------|
-| `computeBbox(fc)` | Compute a `BBox` (`[west, south, east, north]`) from a feature collection. Returns `undefined` if there are no features. |
-
-```ts
-import { computeBbox } from "@richpods/tiny-geojson-tool";
-
-const bbox = computeBbox(geojson.value);
-```
-
 ## Base Map
 
 The base map expects vector tiles served from a PMTiles archive. We recommend the [Shortbread](https://shortbread-tiles.org/) schema for your tiles. You must provide the `pmtilesUrl` prop pointing to your own tile source.

package/dist/components/EditorMap.vue.d.ts

@@ -1,4 +1,5 @@
-import type { BBox, EditorFeatureCollection, EditorFeature, Position, ToolMode } from "../types";
+import { type Map as MaplibreMap } from "maplibre-gl";
+import type { EditorFeatureCollection, EditorFeature, Position, ToolMode, BboxPadding } from "../types";
 type __VLS_Props = {
     modelValue: EditorFeatureCollection;
     activeTool: ToolMode;
@@ -6,22 +7,21 @@ type __VLS_Props = {
     pointRadius?: number;
     center?: Position;
     zoom?: number;
+    bboxPadding?: BboxPadding;
 };
-declare function saveBbox(bbox?: BBox): void;
+declare function getMap(): MaplibreMap | null;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
-    saveBbox: typeof saveBbox;
+    getMap: typeof getMap;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: EditorFeatureCollection) => any;
     featureClick: (feature: EditorFeature | null) => any;
     featureDelete: (id: string) => any;
     toolDone: (featureId: string) => any;
-    moveend: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: EditorFeatureCollection) => any) | undefined;
     onFeatureClick?: ((feature: EditorFeature | null) => any) | undefined;
     onFeatureDelete?: ((id: string) => any) | undefined;
     onToolDone?: ((featureId: string) => any) | undefined;
-    onMoveend?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/GeoJsonEditor.vue.d.ts

@@ -1,28 +1,28 @@
-import type { BBox, EditorFeatureCollection, Position } from "../types";
+import type { Map as MaplibreMap } from "maplibre-gl";
+import type { EditorFeatureCollection, Position, BboxPadding } from "../types";
 import type { EditorLocale } from "../l10n";
 type __VLS_Props = {
     pmtilesUrl: string;
     pointRadius?: number;
     center?: Position;
     zoom?: number;
+    bboxPadding?: BboxPadding;
     l10n?: Partial<EditorLocale>;
 };
-declare function saveBbox(bbox?: BBox): void;
+declare function getMap(): MaplibreMap | null;
 type __VLS_ModelProps = {
     modelValue?: EditorFeatureCollection;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
-    saveBbox: typeof saveBbox;
+    getMap: typeof getMap;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: EditorFeatureCollection) => any;
-} & {
-    moveend: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: EditorFeatureCollection) => any) | undefined;
-    onMoveend?: (() => any) | undefined;
 }>, {
     pointRadius: number;
+    bboxPadding: BboxPadding;
     l10n: Partial<EditorLocale>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/GeoJsonViewer.vue.d.ts

@@ -1,12 +1,18 @@
-import type { EditorFeatureCollection, Position } from "../types";
+import { type Map as MaplibreMap } from "maplibre-gl";
+import type { EditorFeatureCollection, Position, BboxPadding } from "../types";
 type __VLS_Props = {
     modelValue?: EditorFeatureCollection;
     pmtilesUrl: string;
     center?: Position;
     zoom?: number;
+    bboxPadding?: BboxPadding;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare function getMap(): MaplibreMap | null;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    getMap: typeof getMap;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     modelValue: EditorFeatureCollection;
+    bboxPadding: BboxPadding;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/composables/useDrawing.d.ts

@@ -1,7 +1,7 @@
 import type { ToolMode, Position } from "../types";
 export declare function useDrawing(): {
     activeTool: import("vue").Ref<ToolMode, ToolMode>;
-    drawingCoords: import("vue").Ref<[number, number][], [number, number][] | Position[]>;
+    drawingCoords: import("vue").Ref<[number, number][], Position[] | [number, number][]>;
     selectedFeatureId: import("vue").Ref<string | null, string | null>;
     isDrawing: import("vue").ComputedRef<boolean>;
     setTool: (tool: ToolMode) => void;

package/dist/index.d.ts

@@ -9,8 +9,7 @@ export { useMapStyle } from "./composables/useMapStyle";
 export { getFeatureLayers, getFeatureLayerIds, getQueryableLayerIds, getVerticesLayer, reconcileFeatureLayers, getDrawingLayers, } from "./utils/layers";
 export type { GeomType, FeatureSummary } from "./utils/layers";
 export { loadIcon, loadIconsForFeatures, getIconUrl, COMMON_ICONS } from "./utils/icons";
-export { computeBbox } from "./utils/mapView";
 export { DEFAULT_LOCALE } from "./l10n";
 export type { EditorLocale } from "./l10n";
 export { SOURCE_ID, LAYER_IDS, DEFAULTS, MARKER_SIZE_SCALE } from "./constants";
-export type { EditorFeatureCollection, EditorFeature, EditorPolygonFeature, EditorLineStringFeature, EditorPointFeature, EditorMarkerFeature, EditorProperties, BaseProperties, FillStyleProperties, StrokeStyleProperties, MarkerStyleProperties, PointStyleProperties, LabelProperties, BBox, Position, ToolMode, EditorProps, ViewerProps, } from "./types";
+export type { EditorFeatureCollection, EditorFeature, EditorPolygonFeature, EditorLineStringFeature, EditorPointFeature, EditorMarkerFeature, EditorProperties, BaseProperties, FillStyleProperties, StrokeStyleProperties, MarkerStyleProperties, PointStyleProperties, LabelProperties, Position, GeoJsonBbox, BboxPadding, ToolMode, EditorProps, ViewerProps, } from "./types";