- Add markerIcon files field to marker.yml for custom JPG/PNG/SVG icons
- Add markerIconSize range field (20-500px, default 40px) with unit display
- Layout icon fields side-by-side (50/50 width) in marker blueprint
- Add markerIconUrl prop in index.php to auto-detect uploaded icon
- Add markerIconSize prop in index.php to read size from page data
- Update MapPreview.vue to display custom images instead of default pins
- Set icon dimensions dynamically based on markerIconSize value
- Icon size updates on save/reload (reactive implementation deferred)
- Remove custom tiles background functionality (not needed)
Note: Custom icons show uploaded image, may have white background on
transparent PNGs depending on image processing. Size is non-reactive
and requires save + reload to update in preview.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Remove custom title field from marker.yml blueprint
- Use default Kirby page title for marker names in MarkerList
- Add French tooltips to MarkerList buttons (Ajouter, Modifier, Supprimer)
- API already uses page title via $marker->title()->value()
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Enhanced coordinate synchronization in single mode to handle Panel
actions like "Supprimer" (reset to saved values).
Issues Fixed:
- Marker not updating when clicking "Supprimer" button in Panel
- Panel "Supprimer" restores saved coordinates but marker didn't move
- No detection of programmatic field value changes
Solution:
- Add MutationObserver to detect attribute changes on input fields
- Add 500ms polling as fallback for value detection
- Add nextTick() for reactive updates to ensure proper timing
- Handle coordinate reset: when invalid, return to default center
- Proper cleanup with onBeforeUnmount for observers and intervals
Behavior:
- User changes field → marker updates immediately
- User drags marker → fields update immediately
- User clicks "Supprimer" → marker returns to saved position
- Fields cleared → marker disappears, map resets to default center
Technical Details:
- MutationObserver watches 'value' attribute on lat/lon inputs
- Polling checks every 500ms for changes missed by events
- Watcher uses nextTick() to ensure DOM updates complete
- All event listeners and observers properly cleaned up on unmount
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixed marker display and centering in single mode (marker pages) by
changing from props-based to form-based coordinate synchronization.
Issues Fixed:
- Kirby blueprint query syntax {{ page.field }} passed literal strings
instead of values to component props
- Invalid coordinates (NaN, NaN) caused map initialization errors
- Marker not displaying in marker page position tab
- Map not centering on marker location
Solution:
- Remove latitude/longitude props from marker.yml blueprint
- Read coordinates directly from Panel form fields via DOM
- Add event listeners to sync form changes with map
- Bidirectional sync: drag marker → updates form fields
- Robust coordinate validation (check for NaN, null, 0)
Changes:
- MapEditor.vue: Add form field reading and event listeners
- MapEditor.vue: Replace props-based coords with reactive refs
- MapEditor.vue: Update marker drag handler to modify form inputs
- marker.yml: Remove non-functional query string props
- routes.php: Use data() instead of body() for all routes
Single Mode Flow:
1. Component reads latitude/longitude from form inputs on mount
2. Creates marker and centers map on valid coordinates
3. Form changes → updates marker position
4. Marker drag → updates form fields (triggers save on user action)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Major refactoring of the map-editor plugin to store markers as Kirby
subpages instead of YAML data, enabling extensible block content.
Backend Changes:
- Add API routes for marker CRUD operations (GET, POST, PATCH, DELETE)
- Create marker.yml blueprint with content & position tabs
- Add markers section to map.yml blueprint
- Update useMapData to only handle center/zoom/background
- Create useMarkersApi composable for API communication
Frontend Changes:
- Refactor MapEditor.vue to support multi/single modes
- Multi mode: loads markers via API, redirects to Panel for editing
- Single mode: displays single marker for position tab in marker page
- Remove MarkerEditor.vue modal (replaced by Panel editing)
- Normalize position format handling (lon vs lng)
API Features:
- Session-based auth for Panel requests (no CSRF needed)
- Proper error handling and validation
- Markers created as listed pages (not drafts)
- Uses Kirby's data() method for JSON parsing
Documentation:
- Add IMPLEMENTATION_SUMMARY.md with technical details
- Add TESTING_CHECKLIST.md with 38 test cases
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
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>
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>
