87 lines
1.9 KiB
Markdown
87 lines
1.9 KiB
Markdown
|
# 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
|