History

isUnknown dc84ff63a2 All checks were successful Deploy / Build and Deploy to Production (push) Successful in 19s Details feat: add map-editor plugin with interactive OSM map and markers 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>		2026-01-28 15:43:23 +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 map-editor plugin with interactive OSM map and markers	2026-01-28 15:43:23 +01:00
index.css	feat: add map-editor plugin with interactive OSM map and markers	2026-01-28 15:43:23 +01:00
index.js	feat: add map-editor plugin with interactive OSM map and markers	2026-01-28 15:43:23 +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