Add custom SVG marker support

examples/Centre Pompidou.md

@@ -10,4 +10,5 @@ coordinates:
   - "2.352245"
 architect: "[[Renzo Piano]]"
 url: https://www.centrepompidou.fr
+size: 4
 ---

examples/Jardin des Plantes.md

@@ -10,4 +10,5 @@ coordinates:
   - "2.3595996"
 icon: trees
 color: green
+size: 2
 ---

examples/Musée d'Orsay.md

@@ -3,9 +3,10 @@ categories:
   - "[[Places]]"
 type:
   - "[[Museums]]"
-rating: 5
+rating: 3
 address: Esplanade Valéry Giscard d'Estaing, 75007 Paris, France
 coordinates:
   - "48.8599614"
   - "2.3265614"
+size: 3
 ---

examples/Places.base

@@ -4,6 +4,9 @@ filters:
 formulas:
   Type icon: list(type)[0].asFile().properties.icon
   Type color: list(type)[0].asFile().properties.color
+  SVG Marker: "'<svg height=\"35\" viewBox=\"0 0 24 36\"><path fill-rule=\"evenodd\" d=\"M12 0C5.373 0 0 5.373 0 12c0 9 12 24 12 24s12-15 12-24c0-6.627-5.373-12-12-12m0 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8\" fill=\"#4f46e5\"/></svg>'"
+  Dynamic SVG Marker: "'<svg width=\"32\" height=\"18\" viewBox=\"0 0 32 18\"><rect x=\"1\" y=\"1\" width=\"30\" height=\"16\" rx=\"8\" fill=\"#6366f1\" stroke=\"#4f46e5\" stroke-width=\"2\"/><text x=\"50%\" y=\"49%\" dominant-baseline=\"central\" font-size=\"12\" font-weight=\"600\" fill=\"white\" text-anchor=\"middle\" font-family=\"system-ui, sans-serif\">' + rating + '</text></svg>'"
+  Dynamic Size SVG Marker: "'<svg height=\"' + (20 + size * 8) + '\" viewBox=\"0 0 24 36\"><path fill-rule=\"evenodd\" d=\"M12 0C5.373 0 0 5.373 0 12c0 9 12 24 12 24s12-15 12-24c0-6.627-5.373-12-12-12m0 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8\" fill=\"#4f46e5\"/></svg>'"
 properties:
   file.name:
     displayName: Place
@@ -62,3 +65,50 @@ views:
     coordinates: note.coordinates
     markerIcon: formula.Type icon
     markerColor: formula.Type color
+  - type: map
+    name: SVG markers
+    order:
+      - file.name
+      - architect
+      - rating
+      - formula.SVG Marker
+    coordinates: note.coordinates
+    markerIcon: note.icon
+    markerColor: note.color
+    defaultZoom: 12
+    markerSvg: formula.SVG Marker
+  - type: map
+    name: Dynamic text SVG markers
+    order:
+      - file.name
+      - architect
+      - rating
+      - formula.Dynamic SVG Marker
+    coordinates: note.coordinates
+    markerIcon: note.icon
+    markerColor: note.color
+    defaultZoom: 12
+    markerSvg: formula.Dynamic SVG Marker
+  - type: map
+    name: Dynamic size SVG markers
+    order:
+      - file.name
+      - architect
+      - rating
+      - formula.Dynamic Size SVG Marker
+    coordinates: note.coordinates
+    markerIcon: note.icon
+    markerColor: note.color
+    defaultZoom: 12
+    markerSvg: formula.Dynamic Size SVG Marker
+  - type: map
+    name: Per-entry SVG markers
+    order:
+      - file.name
+      - architect
+      - rating
+    coordinates: note.coordinates
+    markerIcon: note.icon
+    markerColor: note.color
+    defaultZoom: 12
+    markerSvg: note.entry svg marker

examples/Readme.md

@@ -31,3 +31,29 @@ You can see these properties by selecting **Properties** at the top of the base
 ## Related notes map
 
 See the [[Museums]] note for an example of a map that only displays markers for its assigned type.
+
+## Custom SVG markers
+
+For full control over marker appearance, use the **Marker SVG** property to provide custom SVG markup. This works well with formulas to create dynamic markers.
+
+![[Places.base#SVG markers]]
+
+The **SVG Marker** formula renders a custom pin shape:
+
+```js
+'<svg viewBox="0 0 366 552" height="30">...</svg>'
+```
+
+You can also create markers with dynamic content. The **Dynamic SVG marker** formula displays each place's rating inside a pill:
+
+```js
+'<svg width="32" height="18" viewBox="0 0 32 18">...' + rating + '...</svg>'
+```
+
+Or vary marker size based on data as in the **Dynamic size SVG marker** formula:
+
+```js
+'<svg viewBox="0 0 366 552" height="' + (15 + size * 8) + '">...</svg>'
+```
+
+SVGs with explicit `width` and `height` display at that fixed size. SVGs with only a `viewBox` scale with zoom like default markers.

src/map-view.ts

@@ -24,6 +24,7 @@ interface MapConfig {
 	coordinatesProp: BasesPropertyId | null;
 	markerIconProp: BasesPropertyId | null;
 	markerColorProp: BasesPropertyId | null;
+	markerSvgProp: BasesPropertyId | null;
 	mapHeight: number;
 	defaultZoom: number;
 	center: [number, number];
@@ -113,7 +114,7 @@ export class MapView extends BasesView {
 		if (!this.map || !this.mapConfig) return;
 		const newStyle = await this.styleManager.getMapStyle(this.mapConfig.mapTiles, this.mapConfig.mapTilesDark);
 		this.map.setStyle(newStyle);
-		this.markerManager.clearLoadedIcons();
+		this.markerManager.clearLoadedMarkerImages();
 
 		// Re-add markers after style change since setStyle removes all runtime layers
 		this.map.once('styledata', () => {
@@ -407,7 +408,7 @@ export class MapView extends BasesView {
 			const currentStyle = this.map.getStyle();
 			if (JSON.stringify(newStyle) !== JSON.stringify(currentStyle)) {
 				this.map.setStyle(newStyle);
-				this.markerManager.clearLoadedIcons();
+				this.markerManager.clearLoadedMarkerImages();
 			}
 		}
 
@@ -442,6 +443,7 @@ export class MapView extends BasesView {
 		const coordinatesProp = this.config.getAsPropertyId('coordinates');
 		const markerIconProp = this.config.getAsPropertyId('markerIcon');
 		const markerColorProp = this.config.getAsPropertyId('markerColor');
+		const markerSvgProp = this.config.getAsPropertyId('markerSvg');
 
 		// Load numeric configurations with validation
 		const minZoom = this.getNumericConfig('minZoom', 0, 0, 24);
@@ -493,6 +495,7 @@ export class MapView extends BasesView {
 			coordinatesProp,
 			markerIconProp,
 			markerColorProp,
+			markerSvgProp,
 			mapHeight,
 			defaultZoom,
 			center,
@@ -753,6 +756,13 @@ export class MapView extends BasesView {
 						filter: prop => !prop.startsWith('file.'),
 						placeholder: 'Property',
 					},
+					{
+						displayName: 'Marker SVG',
+						type: 'property',
+						key: 'markerSvg',
+						filter: prop => !prop.startsWith('file.'),
+						placeholder: 'Property',
+					},
 				]
 			},
 			{

src/map/constants.ts

@@ -2,3 +2,5 @@ export const DEFAULT_MAP_HEIGHT = 400;
 export const DEFAULT_MAP_CENTER: [number, number] = [0, 0];
 export const DEFAULT_MAP_ZOOM = 4;
 
+export const SVG_MARKER_RENDER_SCALE = 2;
+export const SVG_MARKER_REFERENCE_SIZE = 48;