Add ignoreZoom option to maps

.changeset/strange-seals-laugh.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Add ignoreZoom option to maps

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

@@ -62,6 +62,9 @@
 	/** @type {boolean} */
 	export let legend = true;
 
+	/** @type {boolean} */
+	export let ignoreZoom = false;
+
 	/** @type {string|undefined} */
 	export let attribution = undefined;
 
@@ -96,6 +99,7 @@
 		{legendType}
 		{chartType}
 		{legend}
+		{ignoreZoom}
 		{...$$restProps}
 		on:error={(e) => (error = e.detail)}
 	/>

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

@@ -26,7 +26,7 @@
 		query
 	);
 
-	const la_locations = Query.create(`select * from la_locations order by 1`, query);
+	const la_locations = Query.create(`select * from la_locations order by 1 limit 2`, query);
 
 	const grouped_locations = Query.create(
 		`SELECT 
@@ -95,7 +95,6 @@ ORDER BY 1;
 			tooltipType="hover"
 			opacity="0.6"
 		/>
-
 		<Points data={la_locations} lat="lat" long="long" color="red" value="sales" />
 	</BaseMap>
 </Story>
@@ -284,3 +283,20 @@ ORDER BY 1;
 		/>
 	</BaseMap>
 </Story>
+<Story name="Ignore Zoom">
+	<BaseMap title="My Map" height="300">
+		<Areas
+			data={la_zip_sales}
+			geoJsonUrl="/geo-json/ca_california_zip_codes_geo_1.min.json"
+			areaCol="zip_code"
+			name="area"
+			value="sales"
+			geoId="ZCTA5CE10"
+			valueFmt="usd"
+			tooltipType="hover"
+			opacity="1"
+			ignoreZoom="true"
+		/>
+		<Points data={la_locations} lat="lat" long="long" color="red" value="sales" />
+	</BaseMap>
+</Story>

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

@@ -70,6 +70,9 @@
 	/** @type {boolean} */
 	export let legend = true;
 
+	/** @type {boolean} */
+	export let ignoreZoom = false;
+
 	/** @type {string|undefined} */
 	export let attribution = undefined;
 
@@ -104,6 +107,7 @@
 		colorPalette={colorPaletteStore}
 		{legendType}
 		{legend}
+		{ignoreZoom}
 		{...$$restProps}
 	/>
 </BaseMap>

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

@@ -149,12 +149,21 @@ export class EvidenceMap {
 		this.#bounds = Leaflet.latLngBounds(); // Reset bounds to recalculate
 
 		this.#map.eachLayer((layer) => {
+			// Handle layers with sublayers (_layers) - necessary for setting ignoreZoom correctly
+			if (layer._layers && layer._layers instanceof Object) {
+				const firstLayer = Object.values(layer._layers)?.[0];
+				layer.ignoreZoom = firstLayer?.ignoreZoom ?? false;
+			}
+
+			// Extend bounds for layers that shouldn't ignore zoom
 			if (
-				layer instanceof Leaflet.Marker ||
-				layer instanceof Leaflet.CircleMarker ||
-				layer instanceof Leaflet.GeoJSON
+				(layer instanceof Leaflet.Marker ||
+					layer instanceof Leaflet.CircleMarker ||
+					layer instanceof Leaflet.GeoJSON) &&
+				!layer.ignoreZoom
 			) {
-				this.#bounds.extend(layer.getBounds ? layer.getBounds() : layer.getLatLng());
+				const bounds = layer.getBounds?.() || layer.getLatLng?.();
+				if (bounds) this.#bounds.extend(bounds);
 			}
 		});
 
@@ -189,7 +198,8 @@ export class EvidenceMap {
 		onclick,
 		setInput,
 		unsetInput,
-		link
+		link,
+		ignoreZoom
 	) {
 		if (!Leaflet) throw new Error('Leaflet is not yet available');
 
@@ -205,6 +215,7 @@ export class EvidenceMap {
 			onEachFeature: (feature, layer) => {
 				// Store the initial style of each layer as soon as it's created
 				this.originalStyles.set(layer, areaOptions);
+				layer.ignoreZoom = ignoreZoom;
 				layer.on('click', () => {
 					if (this.lastSelectedLayer === layer) {
 						layer.setStyle(this.originalStyles.get(layer)); // Restore the original style
@@ -227,6 +238,13 @@ export class EvidenceMap {
 			}
 		}).addTo(this.#map);
 
+		// Set ignoreZoom for all sublayers to ensure it makes it through to updateBounds()
+		geoJsonLayer.eachLayer((sublayer) => {
+			if (sublayer instanceof Leaflet.Path) {
+				sublayer.ignoreZoom = ignoreZoom; // Apply ignoreZoom to all Path layers
+			}
+		});
+
 		this.#bounds.extend(geoJsonLayer.getBounds());
 		if (!this.#initialViewSet) {
 			this.updateBounds();
@@ -259,7 +277,8 @@ export class EvidenceMap {
 		onclick,
 		setInput,
 		unsetInput,
-		link
+		link,
+		ignoreZoom
 	) {
 		if (!Leaflet) throw new Error('Leaflet is not yet available');
 
@@ -276,7 +295,7 @@ export class EvidenceMap {
 
 		// Create the marker with the appropriate pane
 		const marker = Leaflet.circleMarker(coords, circleOptions);
-
+		marker.ignoreZoom = ignoreZoom;
 		marker.addTo(this.#map);
 
 		this.updateMarkerStyle(marker, circleOptions); // Initial style setting and storage

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

@@ -67,6 +67,9 @@
 	/** @type {boolean} */
 	export let legend = true;
 
+	/** @type {boolean} */
+	export let ignoreZoom = false;
+
 	/** @type {string|undefined} */
 	export let attribution = undefined;
 
@@ -104,6 +107,7 @@
 		{chartType}
 		{...$$restProps}
 		{legend}
+		{ignoreZoom}
 		on:error={(e) => (error = e.detail)}
 	/>
 </BaseMap>

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

@@ -4,6 +4,7 @@
 
 <script>
 	import { mapContextKey } from '../constants.js';
+	import { toBoolean } from '../../../../utils.js';
 	import { getContext } from 'svelte';
 	import checkInputs from '@evidence-dev/component-utilities/checkInputs';
 	import MapArea from './MapArea.svelte';
@@ -47,6 +48,10 @@
 	/** @type {boolean} */
 	export let legend = true;
 
+	/** @type {boolean} */
+	export let ignoreZoom = false;
+	$: ignoreZoom = toBoolean(ignoreZoom);
+
 	/**
 	 * Callback function for the area click event.
 	 * @type {(item: any) => void}
@@ -308,6 +313,7 @@
 				{feature}
 				{item}
 				{name}
+				{ignoreZoom}
 				areaOptions={{
 					fillColor:
 						$colorStore ??

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

@@ -4,7 +4,7 @@
 
 <script>
 	import { getThemeStores } from '../../../../themes/themes.js';
-
+	import { toBoolean } from '../../../../utils.js';
 	import Points from './Points.svelte';
 	const { resolveColorPalette } = getThemeStores();
 
@@ -17,6 +17,10 @@
 	/** @type {'categorical' | 'scalar' | undefined} */
 	export let legendType = undefined;
 
+	/** @type {boolean} */
+	export let ignoreZoom = false;
+	$: ignoreZoom = toBoolean(ignoreZoom);
+
 	export let colorPalette = undefined;
 	$: colorPaletteStore = resolveColorPalette(colorPalette);
 
@@ -31,5 +35,6 @@
 	colorPalette={colorPaletteStore}
 	{legend}
 	{pointStyle}
+	{ignoreZoom}
 	{...$$restProps}
 />

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

@@ -27,6 +27,8 @@
 	/** @type {string|undefined} */
 	export let link = undefined; // link column
 	export let name = undefined;
+	/** @type {boolean|undefined} */
+	export let ignoreZoom = undefined;
 
 	onMount(() => {
 		const area = map.addArea(
@@ -38,7 +40,8 @@
 			onclick,
 			setInput,
 			unsetInput,
-			item[link]
+			item[link],
+			ignoreZoom
 		);
 		if (showTooltip) {
 			const ttip = map.buildTooltip(item, tooltip);

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

@@ -27,6 +27,8 @@
 	/** @type {string|undefined} */
 	export let link = undefined; // link column
 	export let name = undefined;
+	/** @type {boolean|undefined} */
+	export let ignoreZoom = undefined;
 
 	onMount(() => {
 		const marker = map.addCircle(
@@ -38,7 +40,8 @@
 			onclick,
 			setInput,
 			unsetInput,
-			item[link]
+			item[link],
+			ignoreZoom
 		);
 		if (showTooltip) {
 			const ttip = map.buildTooltip(item, tooltip);

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

@@ -5,6 +5,7 @@
 <script>
 	import { mapContextKey } from '../constants.js';
 	import { getContext } from 'svelte';
+	import { toBoolean } from '../../../../utils.js';
 	import checkInputs from '@evidence-dev/component-utilities/checkInputs';
 	import Point from './Point.svelte';
 	import { getColumnExtentsLegacy } from '@evidence-dev/component-utilities/getColumnExtents';
@@ -45,6 +46,10 @@
 	/** @type {boolean} */
 	export let legend = true;
 
+	/** @type {boolean} */
+	export let ignoreZoom = false;
+	$: ignoreZoom = toBoolean(ignoreZoom);
+
 	if (size) {
 		// if size was user-supplied
 		size = Number(size);
@@ -323,6 +328,7 @@
 	{#each $data as item}
 		<Point
 			{map}
+			{ignoreZoom}
 			options={{
 				// kw note:
 				//need to clean this logic

sites/docs/pages/components/maps/area-map/index.md

@@ -610,6 +610,14 @@ Subtitle - appears under the title
 
 </PropListing>
 
+<PropListing
+name="ignoreZoom"
+description="Stops map from zooming out to show all data for this layer"
+required=false
+options={["true", "false"]}
+defaultValue="false"
+/>
+
 ### Color Scale
 
 <PropListing

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

@@ -389,6 +389,14 @@ options="format string"
 Format string for displaying the value.
 </PropListing>
 
+<PropListing
+name="ignoreZoom"
+description="Stops map from zooming out to show all data for this layer"
+required=false
+options={["true", "false"]}
+defaultValue="false"
+/>
+
 ### Points
 Use the `<Points/>` component to add an area layer
 
@@ -437,6 +445,13 @@ 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="ignoreZoom"
+description="Stops map from zooming out to show all data for this layer"
+required=false
+options={["true", "false"]}
+defaultValue="false"
+/>
 
 ### Bubbles
 Use the `<Bubbles/>` component to add an area layer
@@ -523,6 +538,14 @@ Column containing the names/labels of the points - by default, this is shown as
     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>
 
+<PropListing
+name="ignoreZoom"
+description="Stops map from zooming out to show all data for this layer"
+required=false
+options={["true", "false"]}
+defaultValue="false"
+/>
+
 ### Common Layer Options
 
 #### Color Scale

sites/docs/pages/components/maps/bubble-map/index.md

@@ -535,6 +535,14 @@ Subtitle - appears under the title
 
 </PropListing>
 
+<PropListing
+name="ignoreZoom"
+description="Stops map from zooming out to show all data for this layer"
+required=false
+options={["true", "false"]}
+defaultValue="false"
+/>
+
 ### Color Scale
 
 <PropListing

sites/docs/pages/components/maps/point-map/index.md

@@ -438,6 +438,14 @@ Subtitle - appears under the title
 
 </PropListing>
 
+<PropListing
+name="ignoreZoom"
+description="Stops map from zooming out to show all data for this layer"
+required=false
+options={["true", "false"]}
+defaultValue="false"
+/>
+
 ### Color Scale
 
 <PropListing