History

isUnknown 437349cd2b All checks were successful Deploy / Build and Deploy to Production (push) Successful in 16s Details feat: add Phase 2 features to map-editor plugin (rich marker content) Implement marker editing modal with comprehensive content management: - MarkerEditor.vue modal with custom overlay (replaces k-dialog) - Edit marker on double-click or via edit button in list - Required fields: title (validated), optional description - Editable position (lat/lon) and custom icon support - Content blocks system: add/remove/reorder text and image blocks - French translations for all UI elements - Click marker in list to center map on it with smooth animation - Fix marker anchor to bottom (pin tip) for accurate positioning - Auto-save with isDirty flag to detect any form changes Modal features: - Title field (required) - Description textarea (optional) - Position inputs (latitude/longitude) - Icon selector (default or custom via UUID/filename) - Content builder with text and image blocks - Block reordering (up/down) and deletion - Validation: save button enabled only when title filled and form modified Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>		2026-01-28 16:16:19 +01:00
..
assets/icons	feat: add map-editor plugin with interactive OSM map and markers	2026-01-28 15:43:23 +01:00
src	feat: add Phase 2 features to map-editor plugin (rich marker content)	2026-01-28 16:16:19 +01:00
index.css	feat: add Phase 2 features to map-editor plugin (rich marker content)	2026-01-28 16:16:19 +01:00
index.js	feat: add Phase 2 features to map-editor plugin (rich marker content)	2026-01-28 16:16:19 +01:00
index.php	feat: add map-editor plugin with interactive OSM map and markers	2026-01-28 15:43:23 +01:00
package-lock.json	feat: add map-editor plugin with interactive OSM map and markers	2026-01-28 15:43:23 +01:00
package.json	feat: add map-editor plugin with interactive OSM map and markers	2026-01-28 15:43:23 +01:00
README.md	feat: add map-editor plugin with interactive OSM map and markers	2026-01-28 15:43:23 +01:00

README.md

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

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

Usage in Blueprints

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:

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:

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