# Map Editor Plugin for Kirby CMS

Interactive map editor plugin for Kirby CMS using MapLibre GL JS. Create print-ready maps with draggable markers and rich content.

## Phase 1 - Complete ✓

Basic map functionality with OSM tiles and draggable markers.

### Features

- Interactive OpenStreetMap base layer
- Add markers by clicking on the map
- Drag & drop markers to reposition
- Delete markers with confirmation
- Marker list sidebar
- Real-time YAML data storage
- Zoom controls
- Maximum 50 markers per map (configurable)

### Installation

1. Plugin is located in `/public/site/plugins/map-editor/`
2. Dependencies are already installed via `npm install`
3. Plugin is built and ready to use

### Usage in Blueprints

```yaml
mapdata:
  label: Carte
  type: map-editor
  defaultCenter: [43.836699, 4.360054]  # [latitude, longitude]
  defaultZoom: 13
  maxMarkers: 50
```

### Data Format

The plugin stores data in YAML format in the page content file:

```yaml
Mapdata:
  background:
    type: osm
  center:
    lat: 43.836699
    lon: 4.360054
  zoom: 13
  markers:
    - id: marker_1234567890_abc
      position:
        lat: 43.836699
        lon: 4.360054
      icon:
        type: default
      title: ""
      content: []
```

### Development

Build the plugin during development:

```bash
cd /public/site/plugins/map-editor
npm run dev    # Watch mode
npm run build  # Production build
```

### Next Phases (Planned)

- **Phase 2**: Rich marker content (titles, custom icons, text + images)
- **Phase 3**: Geocoding search with Nominatim API
- **Phase 4**: Static map rendering for PDF export

## Technical Details

- **MapLibre GL JS**: Open-source map rendering engine
- **OSM Tiles**: Free OpenStreetMap tiles
- **Kirbyup**: Build tool for Kirby panel plugins
- **Vue 2**: Kirby panel uses Vue 2 (not Vue 3)

## Browser Support

- Modern browsers with ES6+ support
- WebGL required for MapLibre