Add ignoreZoom option to maps

evidence-dev · Jan 17, 2025 · fcbe2df · fcbe2df
1 parent 0cd81b7
commit fcbe2df
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 8 deletions.
diff --git a/.changeset/strange-seals-laugh.md b/.changeset/strange-seals-laugh.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Add ignoreZoom option to maps
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/AreaMap.svelte b/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)}
 	/>

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js b/packages/ui/core-components/src/lib/unsorted/viz/map/EvidenceMap.js
@@ -150,9 +150,10 @@ export class EvidenceMap {
 
 		this.#map.eachLayer((layer) => {
 			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());
 			}
@@ -189,7 +190,8 @@ export class EvidenceMap {
 		onclick,
 		setInput,
 		unsetInput,
-		link
+		link,
+		ignoreZoom
 	) {
 		if (!Leaflet) throw new Error('Leaflet is not yet available');
 
@@ -205,6 +207,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
@@ -259,7 +262,8 @@ export class EvidenceMap {
 		onclick,
 		setInput,
 		unsetInput,
-		link
+		link,
+		ignoreZoom
 	) {
 		if (!Leaflet) throw new Error('Leaflet is not yet available');
 
@@ -276,7 +280,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

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte b/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>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Areas.svelte b/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 ??

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/components/MapArea.svelte b/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);

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Point.svelte b/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);

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/components/Points.svelte b/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 = true;
+	$: 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