From 8a1d4113695da4e9a1b0fa1a987ee28d35b36815 Mon Sep 17 00:00:00 2001
From: Timo Giese <giese.timo@gmail.com>
Date: Tue, 14 Apr 2026 19:10:39 +0000
Subject: [PATCH 1/4] refactor: bundle all vendor deps into spotmap-map.js,
 drop copy-deps

Import Leaflet, all plugins, Font Awesome, and custom CSS directly in
src/map-engine/index.ts so webpack packs everything into the single
build/spotmap-map.js + build/spotmap-map.css output. This eliminates
the copy-deps.js script and the public/ vendor subdirectories entirely.

window.L is explicitly assigned after import so future Leaflet plugins
loaded as separate <script> tags still find the global, matching the
behaviour of the old enqueue-based approach.

Fixes a class of issues where WordPress caching/optimisation plugins
reorder or concatenate the previously separate Leaflet script tags and
break the dependency chain.

https://claude.ai/code/session_01AAsqtsybGk9VPJ4FmggxBC
---
 package.json                    |   5 +-
 public/class-spotmap-public.php |  44 ++++--------
 scripts/copy-deps.js            | 123 --------------------------------
 src/map-engine/index.ts         |  24 ++++++-
 4 files changed, 37 insertions(+), 159 deletions(-)
 delete mode 100644 scripts/copy-deps.js

diff --git a/package.json b/package.json
index 610dffa..83a6350 100644
--- a/package.json
+++ b/package.json
@@ -55,9 +55,8 @@
         "typescript": "^5.9.3"
     },
     "scripts": {
-        "copy-deps": "node scripts/copy-deps.js",
-        "build": "npm run copy-deps && wp-scripts build --webpack-src-dir=src",
-        "start": "npm run copy-deps && wp-scripts start --webpack-src-dir=src",
+        "build": "wp-scripts build --webpack-src-dir=src",
+        "start": "wp-scripts start --webpack-src-dir=src",
         "wp-env": "wp-env",
         "env:start": "wp-env start --debug",
         "env:setup": "node examples/setup-dev.js",
diff --git a/public/class-spotmap-public.php b/public/class-spotmap-public.php
index 7a7b872..dec8003 100644
--- a/public/class-spotmap-public.php
+++ b/public/class-spotmap-public.php
@@ -42,13 +42,14 @@ public function enqueue_styles() {
 		if ( ! $this->should_enqueue() ) {
 			return;
 		}
-		wp_enqueue_style( 'leaflet', plugin_dir_url( __FILE__ ) . 'leaflet/leaflet.css');
-		wp_enqueue_style( 'custom', plugin_dir_url( __FILE__ ) . 'css/custom.css');
-        wp_enqueue_style( 'leaflet-fullscreen', plugin_dir_url( __FILE__ ) . 'leafletfullscreen/leaflet.fullscreen.css');
-		wp_enqueue_style( 'leaflet-easybutton', plugin_dir_url( __FILE__ ) . 'leaflet-easy-button/easy-button.css');
-		// wp_enqueue_style( 'dashicon', '/wp-includes/css/dashicons.css');
-		wp_enqueue_style( 'font-awesome', plugin_dir_url( __DIR__ ). 'includes/css/font-awesome-all.min.css');
-		wp_enqueue_style( 'leaflet-beautify-marker', plugin_dir_url( __FILE__ ) . 'leaflet-beautify-marker/leaflet-beautify-marker-icon.css');
+		$map_asset_file = plugin_dir_path( dirname( __FILE__ ) ) . 'build/spotmap-map.asset.php';
+		$map_asset = file_exists( $map_asset_file ) ? include $map_asset_file : [ 'dependencies' => [], 'version' => false ];
+		wp_enqueue_style(
+			'spotmap-map',
+			plugin_dir_url( dirname( __FILE__ ) ) . 'build/spotmap-map.css',
+			[],
+			$map_asset['version']
+		);
     }
 
 	public function register_post_meta(): void {
@@ -86,20 +87,10 @@ public function enqueue_block_editor_assets(){
 		wp_enqueue_script(
 			'spotmap-handler',
 			plugin_dir_url( dirname( __FILE__ ) ) . 'build/spotmap-map.js',
-			array_merge(
-				$map_asset['dependencies'],
-				[ 'jquery', 'leaflet', 'leaflet-fullscreen', 'leaflet-gpx', 'leaflet-easybutton', 'leaflet-beautify-marker', 'leaflet-text-path' ]
-			),
+			array_merge( $map_asset['dependencies'], [ 'jquery' ] ),
 			$map_asset['version'],
 			true
 		);
-		wp_enqueue_script( 'leaflet',               plugins_url( 'leaflet/leaflet.js', __FILE__ ) );
-		wp_enqueue_script( 'leaflet-fullscreen',    plugin_dir_url( __FILE__ ) . 'leafletfullscreen/leaflet.fullscreen.js', [ 'leaflet' ] );
-		wp_enqueue_script( 'leaflet-gpx',           plugin_dir_url( __FILE__ ) . 'leaflet-gpx/gpx.js' );
-		wp_enqueue_script( 'leaflet-easybutton',    plugin_dir_url( __FILE__ ) . 'leaflet-easy-button/easy-button.js' );
-		wp_enqueue_script( 'leaflet-swisstopo',     plugin_dir_url( __FILE__ ) . 'leaflet-tilelayer-swisstopo/Leaflet.TileLayer.Swiss.umd.js' );
-		wp_enqueue_script( 'leaflet-beautify-marker', plugin_dir_url( __FILE__ ) . 'leaflet-beautify-marker/leaflet-beautify-marker-icon.js' );
-		wp_enqueue_script( 'leaflet-text-path',     plugin_dir_url( __FILE__ ) . 'leaflet-textpath/leaflet.textpath.js' );
 		$this->localize_js_script( 'spotmap-handler' );
 		$this->enqueue_styles();
 		$this->localize_js_script( 'spotmap-spotmap-editor-script' );
@@ -114,7 +105,7 @@ public function enqueue_block_editor_assets(){
 		wp_enqueue_script(
 			'spotmap-post-location',
 			plugin_dir_url( dirname( __FILE__ ) ) . 'build/post-location.js',
-			array_merge( $post_location_asset['dependencies'], [ 'leaflet' ] ),
+			$post_location_asset['dependencies'],
 			$post_location_asset['version'],
 			true
 		);
@@ -131,22 +122,11 @@ public function enqueue_scripts(){
 		wp_enqueue_script(
 			'spotmap-handler',
 			plugin_dir_url( dirname( __FILE__ ) ) . 'build/spotmap-map.js',
-			array_merge(
-				$map_asset['dependencies'],
-				[ 'jquery', 'leaflet', 'leaflet-fullscreen', 'leaflet-gpx', 'leaflet-easybutton', 'leaflet-beautify-marker', 'leaflet-text-path' ]
-			),
+			array_merge( $map_asset['dependencies'], [ 'jquery' ] ),
 			$map_asset['version'],
 			true
 		);
-		$this->localize_js_script('spotmap-handler');
-		wp_enqueue_script('leaflet',  plugins_url( 'leaflet/leaflet.js', __FILE__ ));
-        wp_enqueue_script('leaflet-fullscreen',plugin_dir_url( __FILE__ ) . 'leafletfullscreen/leaflet.fullscreen.js', ['leaflet']);
-        wp_enqueue_script('leaflet-gpx',plugin_dir_url( __FILE__ ) . 'leaflet-gpx/gpx.js');
-        wp_enqueue_script('leaflet-easybutton',plugin_dir_url( __FILE__ ) . 'leaflet-easy-button/easy-button.js');
-        wp_enqueue_script('leaflet-swisstopo',plugin_dir_url( __FILE__ ) . 'leaflet-tilelayer-swisstopo/Leaflet.TileLayer.Swiss.umd.js');
-        wp_enqueue_script('leaflet-beautify-marker', plugin_dir_url( __FILE__ ) . 'leaflet-beautify-marker/leaflet-beautify-marker-icon.js');
-		wp_enqueue_script('leaflet-text-path',plugin_dir_url( __FILE__ ) . 'leaflet-textpath/leaflet.textpath.js');
-
+		$this->localize_js_script( 'spotmap-handler' );
 	}
 
 	function localize_js_script($script_slug){
diff --git a/scripts/copy-deps.js b/scripts/copy-deps.js
deleted file mode 100644
index d7850fd..0000000
--- a/scripts/copy-deps.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
- * Copy front-end dependencies from node_modules to public/ so WordPress can
- * enqueue them as separate scripts/styles (no bundling).
- */
-
-/* eslint-disable no-console */
-const fs = require( 'fs' );
-const path = require( 'path' );
-
-const root = path.resolve( __dirname, '..' );
-const pub = ( ...parts ) => path.join( root, 'public', ...parts );
-const nm = ( ...parts ) => path.join( root, 'node_modules', ...parts );
-const inc = ( ...parts ) => path.join( root, 'includes', ...parts );
-
-function copyFile( src, dest ) {
-    fs.mkdirSync( path.dirname( dest ), { recursive: true } );
-    fs.copyFileSync( src, dest );
-    console.log(
-        `  ${ path.relative( root, src ) } -> ${ path.relative( root, dest ) }`
-    );
-}
-
-function copyJsFile( src, dest ) {
-    copyFile( src, dest );
-    const mapSrc = src + '.map';
-    if ( fs.existsSync( mapSrc ) ) {
-        copyFile( mapSrc, dest + '.map' );
-    }
-}
-
-function copyDir( src, dest ) {
-    fs.mkdirSync( dest, { recursive: true } );
-    for ( const entry of fs.readdirSync( src, { withFileTypes: true } ) ) {
-        const srcPath = path.join( src, entry.name );
-        const destPath = path.join( dest, entry.name );
-        if ( entry.isDirectory() ) {
-            copyDir( srcPath, destPath );
-        } else {
-            fs.copyFileSync( srcPath, destPath );
-            console.log(
-                `  ${ path.relative( root, srcPath ) } -> ${ path.relative(
-                    root,
-                    destPath
-                ) }`
-            );
-        }
-    }
-}
-
-console.log( 'Copying front-end dependencies...\n' );
-
-// Leaflet core
-copyJsFile(
-    nm( 'leaflet', 'dist', 'leaflet.js' ),
-    pub( 'leaflet', 'leaflet.js' )
-);
-copyFile(
-    nm( 'leaflet', 'dist', 'leaflet.css' ),
-    pub( 'leaflet', 'leaflet.css' )
-);
-copyDir( nm( 'leaflet', 'dist', 'images' ), pub( 'leaflet', 'images' ) );
-
-// Leaflet Fullscreen (file names changed in v5)
-copyFile(
-    nm( 'leaflet.fullscreen', 'dist', 'Control.FullScreen.umd.js' ),
-    pub( 'leafletfullscreen', 'leaflet.fullscreen.js' )
-);
-copyFile(
-    nm( 'leaflet.fullscreen', 'dist', 'Control.FullScreen.css' ),
-    pub( 'leafletfullscreen', 'leaflet.fullscreen.css' )
-);
-
-// Leaflet GPX
-copyFile( nm( 'leaflet-gpx', 'gpx.js' ), pub( 'leaflet-gpx', 'gpx.js' ) );
-copyDir( nm( 'leaflet-gpx', 'icons' ), pub( 'leaflet-gpx' ) );
-
-// Leaflet EasyButton
-copyFile(
-    nm( 'leaflet-easybutton', 'src', 'easy-button.js' ),
-    pub( 'leaflet-easy-button', 'easy-button.js' )
-);
-copyFile(
-    nm( 'leaflet-easybutton', 'src', 'easy-button.css' ),
-    pub( 'leaflet-easy-button', 'easy-button.css' )
-);
-
-// Leaflet TextPath
-copyFile(
-    nm( 'leaflet-textpath', 'leaflet.textpath.js' ),
-    pub( 'leaflet-textpath', 'leaflet.textpath.js' )
-);
-
-// Leaflet Beautify Marker
-copyFile(
-    nm( 'beautifymarker', 'leaflet-beautify-marker-icon.js' ),
-    pub( 'leaflet-beautify-marker', 'leaflet-beautify-marker-icon.js' )
-);
-copyFile(
-    nm( 'beautifymarker', 'leaflet-beautify-marker-icon.css' ),
-    pub( 'leaflet-beautify-marker', 'leaflet-beautify-marker-icon.css' )
-);
-
-// Leaflet TileLayer Swiss
-copyJsFile(
-    nm( 'leaflet-tilelayer-swiss', 'dist', 'Leaflet.TileLayer.Swiss.umd.js' ),
-    pub( 'leaflet-tilelayer-swisstopo', 'Leaflet.TileLayer.Swiss.umd.js' )
-);
-
-// Font Awesome
-copyFile(
-    nm( '@fortawesome', 'fontawesome-free', 'css', 'all.min.css' ),
-    inc( 'css', 'font-awesome-all.min.css' )
-);
-copyDir(
-    nm( '@fortawesome', 'fontawesome-free', 'webfonts' ),
-    inc( 'webfonts' )
-);
-
-// Plugin custom styles (authored in src/css/, served from public/css/)
-const src = ( ...parts ) => path.join( root, 'src', ...parts );
-copyFile( src( 'css', 'custom.css' ), pub( 'css', 'custom.css' ) );
-
-console.log( '\nDone.' );
diff --git a/src/map-engine/index.ts b/src/map-engine/index.ts
index a8955ee..51e6532 100644
--- a/src/map-engine/index.ts
+++ b/src/map-engine/index.ts
@@ -1,3 +1,22 @@
+// Leaflet core
+import * as L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+// Leaflet plugins
+import 'leaflet.fullscreen';
+import 'leaflet.fullscreen/dist/Control.FullScreen.css';
+import 'leaflet-gpx';
+import 'leaflet-easybutton';
+import 'leaflet-easybutton/src/easy-button.css';
+import 'leaflet-textpath';
+import 'beautifymarker';
+import 'beautifymarker/leaflet-beautify-marker-icon.css';
+import 'leaflet-tilelayer-swiss';
+
+// Font Awesome & custom styles
+import '@fortawesome/fontawesome-free/css/all.min.css';
+import '../css/custom.css';
+
 import { Spotmap } from './Spotmap';
 
 // Export for module consumers
@@ -14,5 +33,8 @@ export type {
     PointType,
 } from './types';
 
-// Expose as a global for PHP inline scripts and the block editor
+// Expose as globals for PHP inline scripts and the block editor.
+// window.L restores the global that the old <script src="leaflet.js"> tag
+// provided, so future Leaflet plugins loaded as separate script tags still work.
+window.L = L;
 window.Spotmap = Spotmap;

From 5b9ce7be52372da62c1407682ed0c94964b9ddf6 Mon Sep 17 00:00:00 2001
From: Timo Giese <giese.timo@gmail.com>
Date: Wed, 15 Apr 2026 07:52:31 +0200
Subject: [PATCH 2/4] fix global var

---
 src/map-engine/globals.d.ts | 2 ++
 webpack.config.js           | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/src/map-engine/globals.d.ts b/src/map-engine/globals.d.ts
index 3040d7f..acae760 100644
--- a/src/map-engine/globals.d.ts
+++ b/src/map-engine/globals.d.ts
@@ -1,3 +1,4 @@
+import type * as Leaflet from 'leaflet';
 import type { SpotmapGlobal } from './types';
 import type { Spotmap } from './Spotmap';
 
@@ -5,6 +6,7 @@ declare global {
     interface Window {
         Spotmap: typeof Spotmap;
         spotmapjsobj: SpotmapGlobal;
+        L: typeof Leaflet;
     }
 
     const spotmapjsobj: SpotmapGlobal;
diff --git a/webpack.config.js b/webpack.config.js
index 807275a..abda771 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,6 +2,9 @@ const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
 
 module.exports = {
     ...defaultConfig,
+    performance: {
+        hints: false,
+    },
     entry: {
         ...defaultConfig.entry(),
         'spotmap-map': './src/map-engine/index.ts',

From e4cfde1911dbb53c207419df4aece7a2523365f1 Mon Sep 17 00:00:00 2001
From: Timo Giese <giese.timo@gmail.com>
Date: Wed, 15 Apr 2026 08:25:04 +0200
Subject: [PATCH 3/4] complete change

---
 package-lock.json                             |  23 +++-
 package.json                                  |   4 +-
 src/map-engine/MarkerManager.ts               |  71 ++----------
 src/map-engine/Spotmap.ts                     |   3 +-
 .../__tests__/MarkerManager.test.ts           |  29 ++---
 src/map-engine/index.ts                       |   1 +
 src/map-engine/popup-templates.ts             | 102 ++++++++++++++++++
 src/map-engine/popup.css                      |  16 +++
 8 files changed, 170 insertions(+), 79 deletions(-)
 create mode 100644 src/map-engine/popup-templates.ts
 create mode 100644 src/map-engine/popup.css

diff --git a/package-lock.json b/package-lock.json
index 32d7c5e..dd9d011 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,16 @@
 {
     "name": "spotmap",
-    "version": "1.0.0",
+    "version": "1.0.0-rc.2",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "spotmap",
-            "version": "1.0.0",
+            "version": "1.0.0-rc.2",
             "license": "GPL-2.0-or-later",
             "dependencies": {
                 "@fortawesome/fontawesome-free": "^5.15.3",
+                "@types/mustache": "^4.2.6",
                 "@wordpress/dataviews": "^14.0.0",
                 "beautifymarker": "^1.0.9",
                 "leaflet": "^1.9.4",
@@ -17,7 +18,8 @@
                 "leaflet-gpx": "^2.2.0",
                 "leaflet-textpath": "^1.3.0",
                 "leaflet-tilelayer-swiss": "^2.2.1",
-                "leaflet.fullscreen": "^5.3.1"
+                "leaflet.fullscreen": "^5.3.1",
+                "mustache": "^4.2.0"
             },
             "devDependencies": {
                 "@jest/globals": "^29.7.0",
@@ -8260,6 +8262,12 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@types/mustache": {
+            "version": "4.2.6",
+            "resolved": "https://registry.npmmirror.com/@types/mustache/-/mustache-4.2.6.tgz",
+            "integrity": "sha512-t+8/QWTAhOFlrF1IVZqKnMRJi84EgkIK5Kh0p2JV4OLywUvCwJPFxbJAl7XAow7DVIHsF+xW9f1MVzg0L6Szjw==",
+            "license": "MIT"
+        },
         "node_modules/@types/mysql": {
             "version": "2.15.26",
             "resolved": "https://registry.npmjs.org/@types/mysql/-/mysql-2.15.26.tgz",
@@ -21112,6 +21120,15 @@
                 "multicast-dns": "cli.js"
             }
         },
+        "node_modules/mustache": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmmirror.com/mustache/-/mustache-4.2.0.tgz",
+            "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
+            "license": "MIT",
+            "bin": {
+                "mustache": "bin/mustache"
+            }
+        },
         "node_modules/mute-stream": {
             "version": "2.0.0",
             "resolved": "https://registry.npmmirror.com/mute-stream/-/mute-stream-2.0.0.tgz",
diff --git a/package.json b/package.json
index 83a6350..713f799 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     ],
     "dependencies": {
         "@fortawesome/fontawesome-free": "^5.15.3",
+        "@types/mustache": "^4.2.6",
         "@wordpress/dataviews": "^14.0.0",
         "beautifymarker": "^1.0.9",
         "leaflet": "^1.9.4",
@@ -33,7 +34,8 @@
         "leaflet-gpx": "^2.2.0",
         "leaflet-textpath": "^1.3.0",
         "leaflet-tilelayer-swiss": "^2.2.1",
-        "leaflet.fullscreen": "^5.3.1"
+        "leaflet.fullscreen": "^5.3.1",
+        "mustache": "^4.2.0"
     },
     "devDependencies": {
         "@jest/globals": "^29.7.0",
diff --git a/src/map-engine/MarkerManager.ts b/src/map-engine/MarkerManager.ts
index a66bf9c..b930137 100644
--- a/src/map-engine/MarkerManager.ts
+++ b/src/map-engine/MarkerManager.ts
@@ -1,5 +1,7 @@
+import Mustache from 'mustache';
 import type { SpotPoint, SpotmapLayers } from './types';
 import { debug as debugLog } from './utils';
+import { POPUP_TEMPLATE, buildView } from './popup-templates';
 import {
     CIRCLE_DOT_ICON_SIZE,
     CIRCLE_DOT_ICON_ANCHOR,
@@ -28,19 +30,22 @@ export class MarkerManager {
     private readonly iconCache = new Map< string, L.Icon >();
     private readonly abortController = new AbortController();
     private readonly dbg: ( ...args: unknown[] ) => void;
+    private readonly feedCount: number;
 
     constructor(
         map: L.Map,
         layers: SpotmapLayers,
         layerManager: LayerManager,
         canvasRenderer: L.Renderer,
-        debugEnabled = false
+        debugEnabled = false,
+        feedCount = 1
     ) {
         this.canvasRenderer = canvasRenderer;
         this.map = map;
         this.layers = layers;
         this.layerManager = layerManager;
         this.dbg = ( ...args ) => debugLog( debugEnabled, ...args );
+        this.feedCount = feedCount;
 
         const { signal } = this.abortController;
         document.addEventListener(
@@ -88,7 +93,7 @@ export class MarkerManager {
         }
 
         const iconShape = this.getIconShape( point );
-        const popupHtml = MarkerManager.getPopupHtml( point );
+        const popupHtml = MarkerManager.getPopupHtml( point, this.feedCount );
         const popupOptions: L.PopupOptions = {
             autoPan: false,
             maxWidth: 280,
@@ -359,65 +364,7 @@ export class MarkerManager {
         this.markerById.clear();
     }
 
-    /**
-     * Generate the popup HTML for a point.
-     */
-    private static popupImageHtml( src: string ): string {
-        return `<img src="${ src }" style="display:block;width:100%;max-height:180px;object-fit:cover;margin-bottom:4px;" loading="lazy" alt="" /><br>`;
-    }
-
-    static getPopupHtml( entry: SpotPoint ): string {
-        if ( entry.type === 'POST' ) {
-            let html = '';
-            if ( entry.image_url ) {
-                html += MarkerManager.popupImageHtml( entry.image_url );
-            }
-            const title = entry.message ?? 'Post';
-            if ( entry.url ) {
-                html += `<b><a href="${ entry.url }" target="_blank" rel="noopener noreferrer">${ title }</a></b><br>`;
-            } else {
-                html += `<b>${ title }</b><br>`;
-            }
-            if ( entry.excerpt ) {
-                html += `<span style="font-size:0.9em">${ entry.excerpt }</span><br>`;
-            }
-            html += `<span style="font-size:0.85em;color:#888">${ entry.date }</span>`;
-            return html;
-        }
-
-        let html = `<b>${ entry.type }</b><br>`;
-        html += `Time: ${ entry.time }<br>Date: ${ entry.date }<br>`;
-
-        if (
-            entry.local_timezone &&
-            ! (
-                entry.localdate === entry.date && entry.localtime === entry.time
-            )
-        ) {
-            html += `Local Time: ${ entry.localtime }<br>Local Date: ${ entry.localdate }<br>`;
-        }
-
-        if ( entry.message && entry.type === 'MEDIA' ) {
-            html += MarkerManager.popupImageHtml( entry.message );
-        } else if ( entry.message ) {
-            html += `${ entry.message }<br>`;
-        }
-
-        if ( entry.altitude > 0 ) {
-            html += `Altitude: ${ Number( entry.altitude ) }m<br>`;
-        }
-
-        if ( entry.battery_status === 'LOW' ) {
-            html += `Battery status is low!<br>`;
-        }
-
-        if ( entry.hiddenPoints ) {
-            const { count, radius } = entry.hiddenPoints;
-            const radiusNote =
-                radius > 0 ? ` within a radius of ${ radius } meters` : '';
-            html += `There are ${ count } hidden points${ radiusNote }<br>`;
-        }
-
-        return html;
+    static getPopupHtml( entry: SpotPoint, feedCount = 1 ): string {
+        return Mustache.render( POPUP_TEMPLATE, buildView( entry, feedCount ) );
     }
 }
diff --git a/src/map-engine/Spotmap.ts b/src/map-engine/Spotmap.ts
index 0da2291..e7b576a 100644
--- a/src/map-engine/Spotmap.ts
+++ b/src/map-engine/Spotmap.ts
@@ -226,7 +226,8 @@ export class Spotmap {
             this.layers,
             this.layerManager,
             canvasRenderer,
-            dbg
+            dbg,
+            this.options.feeds.length
         );
         this.lineManager = new LineManager(
             this.layers,
diff --git a/src/map-engine/__tests__/MarkerManager.test.ts b/src/map-engine/__tests__/MarkerManager.test.ts
index 07041fc..f003bc5 100644
--- a/src/map-engine/__tests__/MarkerManager.test.ts
+++ b/src/map-engine/__tests__/MarkerManager.test.ts
@@ -46,18 +46,7 @@ describe( 'MarkerManager.getPopupHtml', () => {
         expect( html ).not.toContain( '<img' );
     } );
 
-    it( 'shows image tag for MEDIA type', () => {
-        const html = MarkerManager.getPopupHtml(
-            makePoint( {
-                type: 'MEDIA',
-                message: 'https://example.com/photo.jpg',
-            } )
-        );
-        expect( html ).toContain( '<img' );
-        expect( html ).toContain( 'https://example.com/photo.jpg' );
-    } );
-
-    it( 'shows battery warning when status is LOW', () => {
+it( 'shows battery warning when status is LOW', () => {
         const html = MarkerManager.getPopupHtml(
             makePoint( { battery_status: 'LOW' } )
         );
@@ -112,4 +101,20 @@ describe( 'MarkerManager.getPopupHtml', () => {
         );
         expect( html ).not.toContain( 'Local Time' );
     } );
+
+    it( 'shows feed name inline when feedCount > 1', () => {
+        const html = MarkerManager.getPopupHtml(
+            makePoint( { type: 'OK', feed_name: 'Tracker A' } ),
+            2
+        );
+        expect( html ).toContain( 'OK — Tracker A' );
+    } );
+
+    it( 'omits feed name when feedCount is 1', () => {
+        const html = MarkerManager.getPopupHtml(
+            makePoint( { type: 'OK', feed_name: 'Tracker A' } )
+        );
+        expect( html ).toContain( '<b>OK</b>' );
+        expect( html ).not.toContain( 'Tracker A' );
+    } );
 } );
diff --git a/src/map-engine/index.ts b/src/map-engine/index.ts
index 51e6532..8174ba5 100644
--- a/src/map-engine/index.ts
+++ b/src/map-engine/index.ts
@@ -16,6 +16,7 @@ import 'leaflet-tilelayer-swiss';
 // Font Awesome & custom styles
 import '@fortawesome/fontawesome-free/css/all.min.css';
 import '../css/custom.css';
+import './popup.css';
 
 import { Spotmap } from './Spotmap';
 
diff --git a/src/map-engine/popup-templates.ts b/src/map-engine/popup-templates.ts
new file mode 100644
index 0000000..3c7253c
--- /dev/null
+++ b/src/map-engine/popup-templates.ts
@@ -0,0 +1,102 @@
+import type { SpotPoint } from './types';
+
+/**
+ * Single Mustache template for all popup types.
+ * Renders only the fields that are present in the view — no type branching here.
+ * The view object (built by buildView) is responsible for shaping data correctly.
+ */
+export const POPUP_TEMPLATE = `\
+{{#imageUrl}}<img src="{{{imageUrl}}}" class="spotmap-popup-image" loading="lazy" alt="" /><br>
+{{/imageUrl}}\
+{{#linkedTitle}}<b><a href="{{{url}}}" target="_blank" rel="noopener noreferrer">{{linkedTitle}}</a></b><br>
+{{/linkedTitle}}\
+{{#plainTitle}}<b>{{plainTitle}}</b><br>
+{{/plainTitle}}\
+{{#pointType}}<b>{{pointType}}{{#feedName}} — {{feedName}}{{/feedName}}</b><br>
+{{/pointType}}\
+{{#time}}Time: {{time}}<br>Date: {{date}}<br>
+{{/time}}\
+{{^time}}{{#date}}<span class="spotmap-popup-date">{{date}}</span>{{/date}}
+{{/time}}\
+{{#showLocalTime}}Local Time: {{localtime}}<br>Local Date: {{localdate}}<br>
+{{/showLocalTime}}\
+{{#excerpt}}<span class="spotmap-popup-excerpt">{{excerpt}}</span><br>
+{{/excerpt}}\
+{{#message}}{{message}}<br>
+{{/message}}\
+{{#altitude}}Altitude: {{altitude}}m<br>
+{{/altitude}}\
+{{#showBattery}}Battery status is low!<br>
+{{/showBattery}}\
+{{#hiddenPoints}}There are {{count}} hidden points{{#radius}} within a radius of {{.}} meters{{/radius}}<br>
+{{/hiddenPoints}}`;
+
+export interface PopupView {
+    // Image at the top (POST featured image)
+    imageUrl?: string;
+    // Title with link (POST with permalink)
+    linkedTitle?: string;
+    url?: string;
+    // Title without link (POST without permalink)
+    plainTitle?: string;
+    // Header label for SPOT points (the message type, e.g. "OK", "HELP")
+    pointType?: string;
+    // Feed name shown inline when the map has more than one feed
+    feedName?: string;
+    // Date/time — SPOT points show both, POST shows only date in small text
+    time?: string;
+    date: string;
+    showLocalTime?: boolean;
+    localtime?: string;
+    localdate?: string;
+    // Post excerpt
+    excerpt?: string;
+    // Optional text message
+    message?: string;
+    // Altitude in meters (omitted when zero)
+    altitude?: number;
+    showBattery?: boolean;
+    // Mustache renders count + optional radius section
+    hiddenPoints?: { count: number; radius: number[] } | null;
+}
+
+export function buildView( entry: SpotPoint, feedCount = 1 ): PopupView {
+    if ( entry.type === 'POST' ) {
+        return {
+            imageUrl: entry.image_url,
+            linkedTitle: entry.url ? ( entry.message ?? 'Post' ) : undefined,
+            url: entry.url,
+            plainTitle: entry.url ? undefined : ( entry.message ?? 'Post' ),
+            excerpt: entry.excerpt,
+            date: entry.date,
+        };
+    }
+
+    const showLocalTime =
+        !! entry.local_timezone &&
+        ! ( entry.localdate === entry.date && entry.localtime === entry.time );
+
+    return {
+        pointType: entry.type,
+        feedName: feedCount > 1 ? entry.feed_name : undefined,
+        time: entry.time,
+        date: entry.date,
+        showLocalTime,
+        localtime: entry.localtime,
+        localdate: entry.localdate,
+        message: entry.message,
+        altitude: entry.altitude > 0 ? entry.altitude : undefined,
+        showBattery: entry.battery_status === 'LOW',
+        hiddenPoints: entry.hiddenPoints
+            ? {
+                  count: entry.hiddenPoints.count,
+                  // Pass as one-element array so {{#radius}}{{.}}{{/radius}}
+                  // renders the value, or empty array to skip the section.
+                  radius:
+                      entry.hiddenPoints.radius > 0
+                          ? [ entry.hiddenPoints.radius ]
+                          : [],
+              }
+            : null,
+    };
+}
diff --git a/src/map-engine/popup.css b/src/map-engine/popup.css
new file mode 100644
index 0000000..48d0f8a
--- /dev/null
+++ b/src/map-engine/popup.css
@@ -0,0 +1,16 @@
+.spotmap-popup-image {
+    display: block;
+    width: 100%;
+    max-height: 180px;
+    object-fit: cover;
+    margin-bottom: 4px;
+}
+
+.spotmap-popup-excerpt {
+    font-size: 0.9em;
+}
+
+.spotmap-popup-date {
+    font-size: 0.85em;
+    color: #888;
+}

From e9c17fdea8e5008619e261ee58a2e42fc0da2894 Mon Sep 17 00:00:00 2001
From: Timo Giese <giese.timo@gmail.com>
Date: Wed, 15 Apr 2026 08:48:42 +0200
Subject: [PATCH 4/4] test(map-engine): cover POST branch in buildView and
 MarkerManager feedCount instance path

---
 .../__tests__/MarkerManager.test.ts           |  60 ++++++++
 .../__tests__/popup-templates.test.ts         | 130 ++++++++++++++++++
 2 files changed, 190 insertions(+)
 create mode 100644 src/map-engine/__tests__/popup-templates.test.ts

diff --git a/src/map-engine/__tests__/MarkerManager.test.ts b/src/map-engine/__tests__/MarkerManager.test.ts
index f003bc5..8c80bf3 100644
--- a/src/map-engine/__tests__/MarkerManager.test.ts
+++ b/src/map-engine/__tests__/MarkerManager.test.ts
@@ -1,3 +1,11 @@
+import {
+    describe,
+    it,
+    expect,
+    jest,
+    beforeEach,
+    afterEach,
+} from '@jest/globals';
 import { MarkerManager } from '../MarkerManager';
 import type { SpotPoint } from '../types';
 
@@ -118,3 +126,55 @@ it( 'shows battery warning when status is LOW', () => {
         expect( html ).not.toContain( 'Tracker A' );
     } );
 } );
+
+describe( 'MarkerManager instance', () => {
+    beforeEach( () => {
+        const mockMarker = {
+            bindPopup: jest.fn().mockReturnThis(),
+            on: jest.fn().mockReturnThis(),
+        };
+        ( global as Record< string, unknown > ).L = {
+            BeautifyIcon: { icon: jest.fn().mockReturnValue( {} ) },
+            marker: jest.fn().mockReturnValue( mockMarker ),
+        };
+        ( global as Record< string, unknown > ).spotmapjsobj = { marker: {} };
+    } );
+
+    afterEach( () => {
+        delete ( global as Record< string, unknown > ).L;
+        delete ( global as Record< string, unknown > ).spotmapjsobj;
+    } );
+
+    it( 'passes feedCount through to getPopupHtml via addPoint', () => {
+        const mockFeed = {
+            points: [] as SpotPoint[],
+            markers: [] as unknown[],
+            featureGroup: { addLayer: jest.fn() },
+        };
+        // Use `as never` so TypeScript accepts plain objects as mock arguments.
+        const manager = new MarkerManager(
+            {} as never,
+            { feeds: { test: mockFeed } } as never,
+            { getFeedColor: jest.fn().mockReturnValue( 'blue' ) } as never,
+            {} as never,
+            false,
+            2
+        );
+
+        const point = makePoint( { type: 'OK', feed_name: 'test' } );
+        manager.addPoint( point );
+
+        // The marker was created and added to the feed
+        expect( mockFeed.points ).toContain( point );
+        // getPopupHtml was called with feedCount=2, so feed name appears in popup
+        const markerMock = ( global as Record< string, unknown > ).L as {
+            marker: jest.Mock;
+        };
+        const bindPopupCall = (
+            markerMock.marker.mock.results[ 0 ].value as {
+                bindPopup: jest.Mock;
+            }
+        ).bindPopup.mock.calls[ 0 ][ 0 ] as string;
+        expect( bindPopupCall ).toContain( 'OK' );
+    } );
+} );
diff --git a/src/map-engine/__tests__/popup-templates.test.ts b/src/map-engine/__tests__/popup-templates.test.ts
new file mode 100644
index 0000000..f72e40b
--- /dev/null
+++ b/src/map-engine/__tests__/popup-templates.test.ts
@@ -0,0 +1,130 @@
+import { describe, it, expect } from '@jest/globals';
+import { buildView } from '../popup-templates';
+import type { SpotPoint } from '../types';
+
+function makePoint( overrides: Partial< SpotPoint > = {} ): SpotPoint {
+    return {
+        id: 1,
+        feed_name: 'test',
+        latitude: 47.0,
+        longitude: 8.0,
+        altitude: 0,
+        type: 'OK',
+        unixtime: 1700000000,
+        time: '12:00 pm',
+        date: 'Jan 1, 2024',
+        ...overrides,
+    };
+}
+
+describe( 'buildView', () => {
+    describe( 'POST type', () => {
+        it( 'builds linkedTitle and url when URL is present', () => {
+            const view = buildView(
+                makePoint( {
+                    type: 'POST',
+                    message: 'My Post Title',
+                    url: 'https://example.com/post',
+                    date: 'Jan 1, 2024',
+                } )
+            );
+            expect( view.linkedTitle ).toBe( 'My Post Title' );
+            expect( view.url ).toBe( 'https://example.com/post' );
+            expect( view.plainTitle ).toBeUndefined();
+            expect( view.pointType ).toBeUndefined();
+        } );
+
+        it( 'builds plainTitle when no URL', () => {
+            const view = buildView(
+                makePoint( {
+                    type: 'POST',
+                    message: 'My Post Title',
+                    date: 'Jan 1, 2024',
+                } )
+            );
+            expect( view.plainTitle ).toBe( 'My Post Title' );
+            expect( view.linkedTitle ).toBeUndefined();
+        } );
+
+        it( 'falls back to "Post" as title when message is absent', () => {
+            const view = buildView(
+                makePoint( { type: 'POST', date: 'Jan 1, 2024' } )
+            );
+            expect( view.plainTitle ).toBe( 'Post' );
+        } );
+
+        it( 'includes imageUrl when image_url is present', () => {
+            const view = buildView(
+                makePoint( {
+                    type: 'POST',
+                    image_url: 'https://example.com/img.jpg',
+                    date: 'Jan 1, 2024',
+                } )
+            );
+            expect( view.imageUrl ).toBe( 'https://example.com/img.jpg' );
+        } );
+
+        it( 'includes excerpt when present', () => {
+            const view = buildView(
+                makePoint( {
+                    type: 'POST',
+                    excerpt: 'A short excerpt.',
+                    date: 'Jan 1, 2024',
+                } )
+            );
+            expect( view.excerpt ).toBe( 'A short excerpt.' );
+        } );
+    } );
+
+    describe( 'non-POST type', () => {
+        it( 'includes feedName when feedCount > 1', () => {
+            const view = buildView(
+                makePoint( { feed_name: 'Tracker A' } ),
+                2
+            );
+            expect( view.feedName ).toBe( 'Tracker A' );
+        } );
+
+        it( 'omits feedName when feedCount is 1', () => {
+            const view = buildView( makePoint( { feed_name: 'Tracker A' } ) );
+            expect( view.feedName ).toBeUndefined();
+        } );
+
+        it( 'sets showLocalTime when timezone differs from UTC', () => {
+            const view = buildView(
+                makePoint( {
+                    local_timezone: 'Europe/Rome',
+                    time: '10:00 am',
+                    date: 'Jan 1, 2024',
+                    localtime: '11:00 am',
+                    localdate: 'Jan 1, 2024',
+                } )
+            );
+            expect( view.showLocalTime ).toBe( true );
+        } );
+
+        it( 'omits altitude when zero', () => {
+            const view = buildView( makePoint( { altitude: 0 } ) );
+            expect( view.altitude ).toBeUndefined();
+        } );
+
+        it( 'includes altitude when above zero', () => {
+            const view = buildView( makePoint( { altitude: 2500 } ) );
+            expect( view.altitude ).toBe( 2500 );
+        } );
+
+        it( 'wraps hiddenPoints radius in array when > 0', () => {
+            const view = buildView(
+                makePoint( { hiddenPoints: { count: 5, radius: 50 } } )
+            );
+            expect( view.hiddenPoints?.radius ).toEqual( [ 50 ] );
+        } );
+
+        it( 'passes empty radius array when radius is 0', () => {
+            const view = buildView(
+                makePoint( { hiddenPoints: { count: 3, radius: 0 } } )
+            );
+            expect( view.hiddenPoints?.radius ).toEqual( [] );
+        } );
+    } );
+} );