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
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:
parent
7e42c4baec
commit
dc84ff63a2
11 changed files with 5560 additions and 5 deletions
86
public/site/plugins/map-editor/README.md
Normal file
86
public/site/plugins/map-editor/README.md
Normal 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
|
||||
Loading…
Add table
Add a link
Reference in a new issue