History

isUnknown b19635f324 feat: add custom marker icons with configurable size - 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>		2026-01-29 16:14:33 +01:00
..
api	feat: transform map-editor markers into Kirby subpages	2026-01-29 14:08:40 +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 custom marker icons with configurable size	2026-01-29 16:14:33 +01:00
index.css	feat: add custom marker icons with configurable size	2026-01-29 16:14:33 +01:00
index.js	feat: add custom marker icons with configurable size	2026-01-29 16:14:33 +01:00
index.php	feat: add custom marker icons with configurable size	2026-01-29 16:14:33 +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	refactor: comprehensive map-editor plugin refactoring (phases 1-3)	2026-01-28 16:29:15 +01:00

README.md

Kirby Map Editor Plugin

Plugin d'édition de cartes interactives pour Kirby CMS avec marqueurs enrichis et géocodage.

Structure du code

map-editor/
├── index.php                   # Enregistrement du plugin Kirby
├── lib/fields/
│   └── map-editor.php         # Définition du champ custom
├── src/
│   ├── index.js               # Entry point
│   ├── composables/           # Logique métier réutilisable
│   │   ├── useMarkers.js     # Gestion des marqueurs (CRUD)
│   │   └── useMapData.js     # Gestion des données YAML
│   ├── components/
│   │   ├── field/
│   │   │   └── MapEditor.vue # Composant principal (orchestrateur)
│   │   └── map/
│   │       ├── MapPreview.vue    # Carte MapLibre interactive
│   │       ├── MarkerList.vue    # Liste des marqueurs (sidebar)
│   │       ├── MarkerEditor.vue  # Modal d'édition de marqueur
│   │       └── GeocodeSearch.vue # Recherche d'adresse
│   └── utils/
│       ├── constants.js       # Constantes globales
│       ├── api/
│       │   └── nominatim.js  # Client API Nominatim
│       └── helpers/
│           └── debounce.js   # Fonction de debounce
├── package.json
└── README.md

Composables

useMarkers

Gère l'état et les opérations CRUD sur les marqueurs.

Utilisation : ```javascript import { useMarkers } from '../../composables/useMarkers.js';

const { markers, selectedMarkerId, canAddMarker, addMarker, deleteMarker, } = useMarkers({ maxMarkers: 50 }); ```

useMapData

Gère le chargement/sauvegarde des données de carte en YAML.

Utilisation : ```javascript import { useMapData } from '../../composables/useMapData.js';

const { center, zoom, loadMapData, debouncedSave } = useMapData({ defaultCenter: { lat: 43.836699, lon: 4.360054 }, defaultZoom: 13, onSave: (yamlString) => emit('input', yamlString), }); ```

Build

```bash npm install npm run build ```

Build avec Kirbyup → `/index.js` et `/index.css`

Avantages du refactoring

Réutilisabilité : Composables utilisables dans d'autres composants
Testabilité : Fonctions pures testables indépendamment
Maintenabilité : Code organisé par responsabilité
Lisibilité : MapEditor réduit de 370 → 230 lignes
Performance : Auto-save optimisé

Technologies

Vue 3 Composition API
MapLibre GL JS 3.6+
Nominatim API (OpenStreetMap)
js-yaml pour parsing YAML