@richpods/tiny-geojson-tool 0.1.0

package/LICENSE.md

@@ -0,0 +1,55 @@
+# Blue Oak Model License
+
+Version 1.0.0
+
+## Purpose
+
+This license gives everyone as much permission to work with
+this software as possible, while protecting contributors
+from liability.
+
+## Acceptance
+
+In order to receive this license, you must agree to its
+rules.  The rules of this license are both obligations
+under that agreement and conditions to your license.
+You must not do anything with this software that triggers
+a rule that you cannot or will not follow.
+
+## Copyright
+
+Each contributor licenses you to do everything with this
+software that would otherwise infringe that contributor's
+copyright in it.
+
+## Notices
+
+You must ensure that everyone who gets a copy of
+any part of this software from you, with or without
+changes, also gets the text of this license or a link to
+<https://blueoakcouncil.org/license/1.0.0>.
+
+## Excuse
+
+If anyone notifies you in writing that you have not
+complied with [Notices](#notices), you can keep your
+license by taking all practical steps to comply within 30
+days after the notice.  If you do not do so, your license
+ends immediately.
+
+## Patent
+
+Each contributor licenses you to do everything with this
+software that would otherwise infringe any patent claims
+they can license or become able to license.
+
+## Reliability
+
+No contributor can revoke this license.
+
+## No Liability
+
+***As far as the law allows, this software comes as is,
+without any warranty or condition, and no contributor
+will be liable to anyone for any damages related to this
+software or this license, under any kind of legal claim.***

package/README.md

@@ -0,0 +1,161 @@
+# @richpods/tiny-geojson-tool
+
+Vue 3 component library for editing and viewing GeoJSON on a [MapLibre GL JS](https://maplibre.org/) map. Draw polygons, lines, and markers, style them with [simplestyle-spec](https://github.com/mapbox/simplestyle-spec) properties, and bind the result with `v-model`.
+
+> [!IMPORTANT]
+> The Tiny GeoJSON Tool is currently **v0.x** and subject to breaking changes prior to v1.0.0. Pin to a specific version or commit SHA if you need stability.
+
+You can find a demo of this editor at [code.richpods.org/tiny-geojson-tool/](https://code.richpods.org/tiny-geojson-tool/)
+
+## Components
+
+**`GeoJsonEditor`** — Full editing UI with a drawing toolbar, property editor, and interactive map. Supports drawing polygons, lines, and point markers, selecting and deleting features, and editing style properties (fill, stroke, marker color/size/icon).
+
+**`GeoJsonViewer`** — Read-only map display. Renders GeoJSON features with hover popups for title/description.
+
+## Install
+
+```sh
+npm install @richpods/tiny-geojson-tool maplibre-gl pmtiles
+```
+
+Vue 3.5+, `maplibre-gl`, and `pmtiles` are peer dependencies.
+
+## Usage
+
+```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 geojson = ref<EditorFeatureCollection>({
+    type: "FeatureCollection",
+    features: [],
+});
+</script>
+
+<template>
+    <GeoJsonEditor v-model="geojson" pmtilesUrl="https://example.com/tiles.pmtiles" />
+</template>
+```
+
+For read-only display:
+
+```vue
+<GeoJsonViewer :modelValue="geojson" pmtilesUrl="https://example.com/tiles.pmtiles" />
+```
+
+## Props
+
+Both components accept:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `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 |
+
+`GeoJsonEditor` additionally accepts:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `modelValue` | `EditorFeatureCollection` | Empty collection | GeoJSON feature collection (v-model) |
+| `pointRadius` | `number` | `10` | Radius of point features in pixels |
+| `l10n` | `Partial<EditorLocale>` | English | Override UI strings for localization |
+
+## Drawing Tools
+
+The editor toolbar provides six modes:
+
+- **Select** — Click features to select and edit properties
+- **Draw Point** — Click to place circle points
+- **Draw Marker** — Click to place icon markers
+- **Draw Line** — Click to add vertices, click near the last vertex to finish
+- **Draw Polygon** — Click to add vertices, click near the first vertex to close
+- **Eraser** — Click features to delete them
+
+Right-click or press Escape to cancel drawing.
+
+## Style Properties
+
+Features support [simplestyle-spec 1.1.0](https://github.com/mapbox/simplestyle-spec) properties:
+
+- **Polygons** — `fill`, `fill-opacity`, `stroke`, `stroke-opacity`, `stroke-width`
+- **Lines** — `stroke`, `stroke-opacity`, `stroke-width`
+- **Points** — `fill`, `fill-opacity`, `stroke`, `stroke-opacity`, `stroke-width`
+- **Markers** — `marker-color`, `marker-size` (small/medium/large), `marker-symbol`
+
+All features support `title` and `description`. Extensions beyond the spec: `circle-radius`, `marker-label`, `marker-label-position`.
+
+## Localization
+
+All user-facing strings in the editor can be overridden via the `l10n` prop. Pass a partial object — any keys you omit will use the English defaults.
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { GeoJsonEditor } from "@richpods/tiny-geojson-tool";
+import type { EditorLocale, EditorFeatureCollection } from "@richpods/tiny-geojson-tool";
+
+const geojson = ref<EditorFeatureCollection>({
+    type: "FeatureCollection",
+    features: [],
+});
+
+const de: Partial<EditorLocale> = {
+    toolSelect: "Auswählen",
+    toolMarker: "Markierung",
+    toolLine: "Linie",
+    toolPolygon: "Polygon",
+    toolEraser: "Radierer",
+    propTitle: "Titel",
+    propDescription: "Beschreibung",
+};
+</script>
+
+<template>
+    <GeoJsonEditor
+        v-model="geojson"
+        :l10n="de"
+        pmtilesUrl="https://example.com/tiles.pmtiles" />
+</template>
+```
+
+See `EditorLocale` for the full list of keys and `DEFAULT_LOCALE` for the English defaults.
+
+## Theming
+
+All styles use CSS custom properties prefixed with `--tge-`. Override them to customize the look.
+
+## 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.
+
+## Development
+
+```sh
+npm install
+npm run dev          # Start demo at localhost:5173
+npm run build        # Build library to dist/
+npm run build:demo   # Build demo app to dist-demo/
+npm run preview:demo # Preview built demo locally
+npm run typecheck    # Run type checking
+```
+
+## Acknowledgements
+
+This project is built with the following open-source libraries:
+
+- **[Vue](https://vuejs.org/)** — JavaScript framework
+- **[MapLibre GL JS](https://maplibre.org/)** — Open-source map rendering library 
+- **[PMTiles](https://github.com/protomaps/PMTiles)** — Cloud-optimized tile archive format
+- **[Ionicons](https://ionic.io/ionicons)** — Open-source icon set
+- **[Shortbread](https://shortbread-tiles.org/)** — Vector tile schema for OpenStreetMap data
+
+Map data: [OpenStreetMap](https://www.openstreetmap.org/copyright) contributors.
+
+## License
+
+[Blue Oak Model License 1.0.0](https://blueoakcouncil.org/license/1.0.0)

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

@@ -0,0 +1,22 @@
+import type { EditorFeatureCollection, EditorFeature, Position, ToolMode } from "../types";
+type __VLS_Props = {
+    modelValue: EditorFeatureCollection;
+    activeTool: ToolMode;
+    pmtilesUrl: string;
+    pointRadius?: number;
+    center?: Position;
+    zoom?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: EditorFeatureCollection) => any;
+    featureClick: (feature: EditorFeature | null) => any;
+    featureDelete: (id: string) => any;
+    toolDone: (featureId: string) => 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;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,13 @@
+import type { ToolMode } from "../types";
+import type { EditorLocale } from "../l10n";
+type __VLS_Props = {
+    activeTool: ToolMode;
+    l10n: EditorLocale;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:activeTool": (tool: ToolMode) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:activeTool"?: ((tool: ToolMode) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,23 @@
+import type { EditorFeatureCollection, Position } from "../types";
+import type { EditorLocale } from "../l10n";
+type __VLS_Props = {
+    pmtilesUrl: string;
+    pointRadius?: number;
+    center?: Position;
+    zoom?: number;
+    l10n?: Partial<EditorLocale>;
+};
+type __VLS_ModelProps = {
+    modelValue?: EditorFeatureCollection;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: EditorFeatureCollection) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: EditorFeatureCollection) => any) | undefined;
+}>, {
+    pointRadius: number;
+    l10n: Partial<EditorLocale>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,12 @@
+import type { EditorFeatureCollection, Position } from "../types";
+type __VLS_Props = {
+    modelValue?: EditorFeatureCollection;
+    pmtilesUrl: string;
+    center?: Position;
+    zoom?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    modelValue: EditorFeatureCollection;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,29 @@
+import type { EditorFeature, EditorProperties } from "../types";
+import type { EditorLocale } from "../l10n";
+type __VLS_Props = {
+    feature: EditorFeature;
+    label: string;
+    expanded: boolean;
+    selected: boolean;
+    dragging: boolean;
+    reorderable: boolean;
+    l10n: EditorLocale;
+    iconUrls: Map<string, string>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: () => any;
+    delete: (id: string) => any;
+    dragstart: (event: DragEvent) => any;
+    dragend: (event: DragEvent) => any;
+    toggle: () => any;
+    update: (id: string, properties: Partial<EditorProperties>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+    onDelete?: ((id: string) => any) | undefined;
+    onDragstart?: ((event: DragEvent) => any) | undefined;
+    onDragend?: ((event: DragEvent) => any) | undefined;
+    onToggle?: (() => any) | undefined;
+    onUpdate?: ((id: string, properties: Partial<EditorProperties>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,23 @@
+import type { EditorFeature, EditorProperties } from "../types";
+import type { EditorLocale } from "../l10n";
+type __VLS_Props = {
+    features: EditorFeature[];
+    selectedFeatureId: string | null;
+    l10n: EditorLocale;
+    iconUrls: Map<string, string>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (id: string) => any;
+    delete: (id: string) => any;
+    close: () => any;
+    update: (id: string, properties: Partial<EditorProperties>) => any;
+    reorder: (featureId: string, newIndex: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((id: string) => any) | undefined;
+    onDelete?: ((id: string) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onUpdate?: ((id: string, properties: Partial<EditorProperties>) => any) | undefined;
+    onReorder?: ((featureId: string, newIndex: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/composables/useDrawing.d.ts

@@ -0,0 +1,21 @@
+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[]>;
+    selectedFeatureId: import("vue").Ref<string | null, string | null>;
+    isDrawing: import("vue").ComputedRef<boolean>;
+    setTool: (tool: ToolMode) => void;
+    addDrawingCoord: (coord: Position) => void;
+    cancelDrawing: () => void;
+    finishDrawing: () => Position[];
+    selectFeature: (id: string | null) => void;
+    distancePx: (map: {
+        project: (lngLat: [number, number]) => {
+            x: number;
+            y: number;
+        };
+    }, a: Position, b: Position) => number;
+    getTempGeoJson: () => GeoJSON.FeatureCollection;
+    getTempLineGeoJson: (mousePos?: Position) => GeoJSON.FeatureCollection;
+    getTempVerticesGeoJson: () => GeoJSON.FeatureCollection;
+};

package/dist/composables/useGeoJson.d.ts

@@ -0,0 +1,14 @@
+import { type Ref } from "vue";
+import type { EditorFeatureCollection, EditorFeature, EditorProperties, Position } from "../types";
+export declare function useGeoJson(model: Ref<EditorFeatureCollection>): {
+    model: Ref<EditorFeatureCollection, EditorFeatureCollection>;
+    addFeature: (feature: EditorFeature) => void;
+    removeFeature: (id: string) => void;
+    updateFeature: (id: string, updater: (f: EditorFeature) => EditorFeature) => void;
+    updateFeatureProperties: (id: string, props: Partial<EditorProperties>) => void;
+    createPolygon: (coordinates: Position[][]) => EditorFeature;
+    createLineString: (coordinates: Position[]) => EditorFeature;
+    createPoint: (coordinates: Position) => EditorFeature;
+    createMarker: (coordinates: Position) => EditorFeature;
+    getFeature: (id: string) => EditorFeature | undefined;
+};

package/dist/composables/useMapStyle.d.ts

@@ -0,0 +1,4 @@
+import type { StyleSpecification } from "maplibre-gl";
+export declare function useMapStyle(pmtilesUrl: string): {
+    getStyle: () => StyleSpecification;
+};

package/dist/constants.d.ts

@@ -0,0 +1,30 @@
+import type { Position } from "./types";
+export declare const DEFAULT_POINT_RADIUS = 10;
+export declare const DEFAULT_CENTER: Position;
+export declare const DEFAULT_ZOOM = 2;
+/** Default style values (simplestyle-spec 1.1.0 defaults) */
+export declare const DEFAULTS: {
+    readonly fill: "#555555";
+    readonly fillOpacity: 0.6;
+    readonly stroke: "#555555";
+    readonly strokeOpacity: 1;
+    readonly strokeWidth: 2;
+    readonly markerColor: "#7e7e7e";
+    readonly markerSize: "medium";
+    readonly circleRadius: 8;
+};
+/** Numeric scale factors for marker-size enum */
+export declare const MARKER_SIZE_SCALE: Record<string, number>;
+/** Layer IDs used for editor features */
+export declare const LAYER_IDS: {
+    readonly fill: "editor-fill";
+    readonly line: "editor-line";
+    readonly points: "editor-points";
+    readonly symbols: "editor-symbols";
+    readonly labels: "editor-labels";
+    readonly vertices: "editor-vertices";
+};
+export declare const SOURCE_ID = "editor-geojson";
+export declare const TEMP_SOURCE_ID = "drawing-temp";
+export declare const TEMP_LINE_SOURCE_ID = "drawing-temp-line";
+export declare const TEMP_VERTICES_SOURCE_ID = "drawing-temp-vertices";

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import "maplibre-gl/dist/maplibre-gl.css";
+import "./styles/theme-standard.scss";
+import "./styles/editor.scss";
+export { default as GeoJsonEditor } from "./components/GeoJsonEditor.vue";
+export { default as GeoJsonViewer } from "./components/GeoJsonViewer.vue";
+export { useGeoJson } from "./composables/useGeoJson";
+export { useDrawing } from "./composables/useDrawing";
+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 { 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, Position, ToolMode, EditorProps, ViewerProps, } from "./types";

package/dist/l10n.d.ts

@@ -0,0 +1,42 @@
+/** Locale strings for the GeoJSON editor UI */
+export interface EditorLocale {
+    toolSelect: string;
+    toolPoint: string;
+    toolMarker: string;
+    toolLine: string;
+    toolPolygon: string;
+    toolEraser: string;
+    propTitle: string;
+    propDescription: string;
+    propFillColor: string;
+    propFillOpacity: string;
+    propStrokeColor: string;
+    propStrokeOpacity: string;
+    propStrokeWidth: string;
+    propCircleRadius: string;
+    propPointColor: string;
+    propMarkerColor: string;
+    propMarkerSize: string;
+    propSizeSmall: string;
+    propSizeMedium: string;
+    propSizeLarge: string;
+    propIcon: string;
+    propIconRemove: string;
+    propIconNone: string;
+    propIconSearch: string;
+    propIconNoResults: string;
+    propLabel: string;
+    propLabelPosition: string;
+    propPositionTop: string;
+    propPositionBottom: string;
+    propPositionLeft: string;
+    propPositionRight: string;
+    layerPanelTitle: string;
+    layerPanelEmpty: string;
+    layerDelete: string;
+    layerPoint: string;
+    layerMarker: string;
+    layerLine: string;
+    layerPolygon: string;
+}
+export declare const DEFAULT_LOCALE: EditorLocale;