feat: add map-editor plugin with interactive OSM map and markers
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 19s

Implement Phase 1 of custom Kirby plugin for editing interactive maps:
- OpenStreetMap base layer with MapLibre GL JS
- Click to add markers, drag to reposition
- Marker list sidebar with selection and deletion
- Auto-save with debounce (YAML format)
- Add marker button creates marker at current map center
- Max 50 markers per map (configurable)
- Clean UI with marker counter

Blueprint updated to use new map-editor field type instead of placeholder.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-01-28 15:43:23 +01:00
parent 7e42c4baec
commit dc84ff63a2
11 changed files with 5560 additions and 5 deletions

View file

@ -0,0 +1,86 @@
# 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