geoproject-app/public/site/plugins/map-editor

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