Canvas Map Editor

Canvas-based map editor with headless Vue 3 components for rendering and editing GeoJSON features.

Features

• 🎨 Headless Components - No UI, full customization freedom
• MapRenderer - Canvas-based map rendering with pan & zoom
• ✏️ FeatureEditor - Draw and edit points, lines, and polygons
• 📐 ImageRegister - Image registration with control points
• 🔄 DataTransformer - Transform GeoJSON data between coordinate systems
• 📦 TypeScript - Full type definitions included
• 🎯 GeoJSON Support - Import/export GeoJSON features

📦 Installation

npm install @tuoyuan/canvas-map-editor

🚀 Quick Start

MapRenderer

<script setup lang="ts">
import { MapRenderer } from '@tuoyuan/canvas-map-editor'
import type { Feature } from '@tuoyuan/canvas-map-editor'

const imageUrl = '/path/to/your/image.png'
</script>

<template>
  <MapRenderer :base-image-url="imageUrl" width="100%" height="600px">
    <template #default="{ addFeature, getAllFeatures, render }">
      <!-- Your custom UI here -->
      <button @click="() => { /* add feature */ }">Add Point</button>
    </template>
  </MapRenderer>
</template>

FeatureEditor

<script setup lang="ts">
import { ref } from 'vue'
import { MapRenderer, FeatureEditor } from '@tuoyuan/canvas-map-editor'
import type { Feature } from '@tuoyuan/canvas-map-editor'

const mapRef = ref()
const imageUrl = '/path/to/your/image.png'
</script>

<template>
  <FeatureEditor v-if="mapRef" :map="mapRef">
    <template #default="{ setEditType, currentEditType, selectedFeature }">
      <!-- Your custom toolbar -->
      <button @click="setEditType('point')">Draw Point</button>
      <button @click="setEditType('line')">Draw Line</button>
      <button @click="setEditType('polygon')">Draw Polygon</button>
    </template>
  </FeatureEditor>
  
  <MapRenderer ref="mapRef" :base-image-url="imageUrl" />
</template>

ImageRegister

<script setup lang="ts">
import { ImageRegister } from '@tuoyuan/canvas-map-editor'

const baseImageUrl = '/path/to/base-image.png'
const refImageUrl = '/path/to/reference-image.png'
</script>

<template>
  <ImageRegister 
    :base-image-url="baseImageUrl"
    :ref-image-url="refImageUrl"
    :width="800"
    :height="600"
  >
    <template #default="{ 
      controlPoints, 
      exportRegister, 
      resetRegister,
      canExport 
    }">
      <!-- Your custom UI -->
      <div>Control Points: {{ controlPoints.length }}</div>
      <button @click="exportRegister" :disabled="!canExport">Export</button>
      <button @click="resetRegister">Reset</button>
    </template>
  </ImageRegister>
</template>

DataTransformer

<script setup lang="ts">
import { DataTransformer } from '@tuoyuan/canvas-map-editor'
</script>

<template>
  <DataTransformer>
    <template #default="{
      handleSourceImageUpload,
      handleGeoJSONUpload,
      transformData,
      exportTransformedData,
      canTransform
    }">
      <!-- Your custom UI -->
      <input type="file" @change="handleSourceImageUpload" />
      <input type="file" @change="handleGeoJSONUpload" />
      <button @click="transformData" :disabled="!canTransform">Transform</button>
      <button @click="exportTransformedData">Export</button>
    </template>
  </DataTransformer>
</template>

📚 API Reference

MapRenderer Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | baseImageUrl | string | required | Base image URL | | width | string \| number | '100%' | Canvas width | | height | string \| number | '600px' | Canvas height | | enableZoom | boolean | true | Enable zoom | | enablePan | boolean | true | Enable pan |

MapRenderer Slot Props

• addFeature(feature: Feature): Promise<string> - Add a feature
• removeFeature(id: string): boolean - Remove a feature
• getAllFeatures(): FeatureCollection - Get all features
• render(): void - Re-render the map
• fitView(padding?: number): void - Fit view to features
• And more...

FeatureEditor Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | map | MapInstance | required | MapRenderer instance |

FeatureEditor Slot Props

• setEditType(type: 'none' \| 'point' \| 'line' \| 'polygon'): void - Set edit mode
• selectedFeature: Feature \| null - Currently selected feature
• deleteSelected(): void - Delete selected feature
• clearAll(): void - Clear all features
• And more...

🎨 Styling

The components are headless - they don't include any UI styling. You have complete freedom to style them however you want using:

• CSS frameworks (Tailwind, Bootstrap, etc.)
• Component libraries (Element Plus, Ant Design, etc.)
• Custom CSS

📝 TypeScript

Full TypeScript support with type definitions included:

import type { 
  Feature, 
  FeatureCollection, 
  Point, 
  FeatureStyle,
  TransformMatrix 
} from '@tuoyuan/canvas-map-editor'

🛠�?Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build library
npm run build:lib

📄 License

MIT

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.