fixed rendering layers Bubbles + Points

.changeset/rare-singers-tease.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+fixed bubbles + points layering issue

.changeset/soft-plums-repeat.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Fixes layering issue and allows for layering control of bubbles and points

packages/ui/core-components/src/lib/unsorted/viz/map/BaseMap.stories.svelte

@@ -59,3 +59,9 @@
 		<Points data={la_locations} lat="lat" long="long" color="red" />
 	</BaseMap>
 </Story>
+<Story name="Multiple Points">
+	<BaseMap title="My Map" height="300">
+		<Points data={la_locations} lat="lat" long="long" color="red" paneType="red Points" z="1" />
+		<Points data={la_locations} lat="lat" long="long" color="blue" paneType="blue Points" z="2" />
+	</BaseMap>
+</Story>

packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js

@@ -6,6 +6,7 @@ import { initSmoothZoom } from './LeafletSmoothZoom';
 import { writable, derived, readonly } from 'svelte/store';
 import chroma from 'chroma-js';
 import { uiColours } from '@evidence-dev/component-utilities/colours';
+import { toNumber } from '../../../utils.js';
 
 /** @template T @typedef {import('svelte/store').Writable<T>} Writable<T> */
 /** @template T @typedef {import('svelte/store').Readable<T>} Readable<T> */
@@ -264,7 +265,28 @@ export class EvidenceMap {
 		link
 	) {
 		if (!Leaflet) throw new Error('Leaflet is not yet available');
-		const marker = Leaflet.circleMarker(coords, circleOptions).addTo(this.#map);
+
+		//other panes start at z-index 400
+		if (!this.#map.getPane(circleOptions.pane)) {
+			this.#map.createPane(circleOptions.pane);
+			if (circleOptions.pane === 'bubbles' && circleOptions.z === undefined) {
+				this.#map.getPane('bubbles').style.zIndex = 400; // Lower zIndex for bubbles
+			} else if (circleOptions.pane === 'points' && circleOptions.z === undefined) {
+				this.#map.getPane('points').style.zIndex = 401; // Higher zIndex for points
+			} else if (circleOptions.z !== undefined) {
+				if (toNumber(circleOptions.z)) {
+					this.#map.getPane(circleOptions.pane).style.zIndex = 400 + toNumber(circleOptions.z);
+				} else {
+					this.#map.getPane(circleOptions.pane).style.zIndex = 400;
+				}
+			}
+		}
+
+		// Create the marker with the appropriate pane
+		const marker = Leaflet.circleMarker(coords, circleOptions);
+
+		marker.addTo(this.#map);
+
 		this.updateMarkerStyle(marker, circleOptions); // Initial style setting and storage
 
 		marker.on('click', () => {

packages/ui/core-components/src/lib/unsorted/viz/map/components/Bubbles.svelte

@@ -9,8 +9,10 @@
 	export let size = undefined; // column containing size data
 	/** @type {number} */
 	export let opacity = 0.8;
+	/** @type {'bubble' | 'points' }*/
+	export let pointStyle = 'bubbles';
 	/** @type {'categorical' | 'scalar' | undefined} */
 	export let legendType = undefined;
 </script>
 
-<Points sizeCol={size} {opacity} {legendType} {...$$restProps} />
+<Points sizeCol={size} {opacity} {pointStyle} {legendType} {...$$restProps} />

packages/ui/core-components/src/lib/unsorted/viz/map/components/Points.svelte

@@ -212,6 +212,9 @@
 
 	let values, colorScale, sizeExtents, maxData, maxSizeSq;
 
+	/** @type {'bubble' | 'points' }*/
+	export let pointStyle = 'points';
+
 	/**
 	 * Initialize the component.
 	 * @returns {Promise<void>}
@@ -284,6 +287,12 @@
 		});
 		setInputDefault(item, name);
 	}
+
+	/** @type {'points' | 'bubbles' | 'string'}*/
+	export let paneType = pointStyle;
+
+	/** @type {number | undefined} */
+	export let z = undefined;
 </script>
 
 <!-- Additional data.fetch() included in await to trigger reactivity. Should ideally be handled in init() in the future. -->
@@ -300,7 +309,10 @@
 				opacity: opacity,
 				weight: borderWidth,
 				color: borderColor,
-				className: `outline-none ${pointClass}`
+				className: `outline-none ${pointClass}`,
+				markerType: pointStyle,
+				pane: paneType,
+				z: z
 			}}
 			selectedOptions={{
 				fillColor: selectedColor,

sites/docs/pages/components/base-map.md

@@ -390,6 +390,21 @@ options="column name"
 Column containing the names/labels of the points - by default, this is shown as the title of the tooltip.
 </PropListing>
 
+<PropListing
+    name="paneType"
+    options="text"
+>
+    Specifies the type of pane where the points will be rendered.
+</PropListing>
+
+<PropListing
+    name="z"
+    options="number"
+>
+    Represents the z-index value for the pane, controlling its stacking order relative to other panes (higher values are on top, e.g., z=2 is above z=1).
+</PropListing>
+
+
 ### Bubbles
 Use the `<Bubbles/>` component to add an area layer
 
@@ -461,6 +476,20 @@ options="column name"
 Column containing the names/labels of the points - by default, this is shown as the title of the tooltip.
 </PropListing>
 
+<PropListing
+    name="paneType"
+    options="text"
+>
+    Specifies the type of pane where the bubbles will be rendered.
+</PropListing>
+
+<PropListing
+    name="z"
+    options="number"
+>
+    Represents the z-index value for the pane, controlling its stacking order relative to other panes (higher values are on top, e.g., z=2 is above z=1).
+</PropListing>
+
 ### Common Layer Options
 
 #### Color Scale