feat: implement automatic static map image generation

- Add html-to-image for capturing map container with markers
- Auto-generate map image on page/marker save via hooks
- Use flag system (.regenerate-map-image) to trigger generation on Panel reload
- Create file using Kirby API for proper indexing
- Add mapStaticImage field in blueprint to display generated image
- Wait for map to be fully loaded before capture
- Capture entire container (map + custom markers)
- Filter MapLibre controls from capture

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-06 11:48:05 +01:00
parent 1d74105910
commit 9193ac8900
8 changed files with 474 additions and 92 deletions

View file

@ -8,8 +8,10 @@
"name": "map-editor",
"version": "1.0.0",
"dependencies": {
"html-to-image": "^1.11.13",
"js-yaml": "^4.1.0",
"maplibre-gl": "^3.6.0"
"maplibre-gl": "^3.6.0",
"maplibre-gl-map-to-image": "^1.2.0"
},
"devDependencies": {
"kirbyup": "^3.3.0"
@ -2410,6 +2412,12 @@
"node": ">=4"
}
},
"node_modules/html-to-image": {
"version": "1.11.13",
"resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
"integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==",
"license": "MIT"
},
"node_modules/ieee754": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@ -3194,6 +3202,12 @@
"url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1"
}
},
"node_modules/maplibre-gl-map-to-image": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/maplibre-gl-map-to-image/-/maplibre-gl-map-to-image-1.2.0.tgz",
"integrity": "sha512-U4IKKalUd/rudZMHDkpNWqHlOtdLOANDD/s7t8dBPiCAL14zmLAEJ/PE+yFRyl4ZsVymIPAhEPHg/n+7Rq47mA==",
"license": "MIT"
},
"node_modules/minimist": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",