chore: apply reviews

Improve zoom and center options and handlers
opendatasoft · Sep 28, 2023 · 8ef37e9 · 8ef37e9
1 parent b3cf1f3
commit 8ef37e9
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 27 deletions.
diff --git a/packages/visualizations/src/components/MapPoi/Map.ts b/packages/visualizations/src/components/MapPoi/Map.ts
@@ -10,7 +10,7 @@ import maplibregl, {
 } from 'maplibre-gl';
 
 import { POPUP_OPTIONS } from './constants';
-import type { Center, PopupsConfiguration } from './types';
+import type { PopupsConfiguration, CenterZoomOptions } from './types';
 
 type MapFunction = (map: maplibregl.Map) => unknown;
 
@@ -240,21 +240,11 @@ export default class MapPOI {
     }
 
     /**
-     * Sets the map's zoom level.
-     * @param zoom
+     * Changes any combination of center and zoom without an animated transition.
+     * The map will retain its current values for any details not specified in options
      */
-    setZoom(zoom?: number) {
-        if (zoom === undefined) return;
-        this.queue((map) => map.setZoom(zoom));
-    }
-
-    /**
-     * Sets the map's geographical centerpoint.
-     * @param center
-     */
-    setCenter(center?: Center) {
-        if (center === undefined) return;
-        this.queue((map) => map.setCenter(center));
+    jumpTo(options: CenterZoomOptions) {
+        this.queue((map) => map.jumpTo(options));
     }
 
     setPopupsConfiguration(config: PopupsConfiguration) {

diff --git a/packages/visualizations/src/components/MapPoi/MapRender.svelte b/packages/visualizations/src/components/MapPoi/MapRender.svelte
@@ -2,14 +2,15 @@
 
 <script lang="ts">
     import type { BBox } from 'geojson';
-    import type { LngLatBoundsLike, MapOptions, StyleSpecification } from 'maplibre-gl';
+    import type { LngLatBoundsLike, LngLatLike, MapOptions, StyleSpecification } from 'maplibre-gl';
     import { onDestroy, onMount } from 'svelte';
     import CategoryLegend from '../Legend/CategoryLegend.svelte';
     import type { CategoryLegend as CategoryLegendType } from '../Legend/types';
     import SourceLink from '../utils/SourceLink.svelte';
     import type { Source } from '../types';
 
     import Map from './Map';
+    import { getCenterZoomOptions } from './utils';
     import type { PopupsConfiguration } from './types';
 
     // Base style, sources and layers
@@ -20,7 +21,7 @@
     // Options
     export let bbox: BBox | undefined;
     export let zoom: number | undefined;
-    export let center: [number, number] | undefined;
+    export let center: LngLatLike | undefined;
     export let aspectRatio: number;
     export let interactive: boolean;
     export let title: string | undefined;
@@ -42,17 +43,14 @@
     $: map.setBbox(bbox);
     $: map.setSourcesAndLayers(sources, layers);
     $: map.setPopupsConfiguration(popupsConfiguration);
-    $: map.setZoom(zoom);
-    $: map.setCenter(center);
+    $: map.jumpTo(getCenterZoomOptions({ zoom, center }));
     $: cssVarStyles = `--aspect-ratio:${aspectRatio};`;
 
     // Lifecycle
     onMount(() => {
         const options = {
             bounds: bbox as LngLatBoundsLike,
-            // The map doesn't seems to accept undefined values for center and zoom
-            ...(center ? { center } : null),
-            ...(Number.isInteger(zoom) ? { zoom } : null),
+            ...getCenterZoomOptions({ zoom, center }),
         };
         map.initialize(style, container, options);
     });

diff --git a/packages/visualizations/src/components/MapPoi/types.ts b/packages/visualizations/src/components/MapPoi/types.ts
@@ -1,11 +1,14 @@
-import type { CircleLayerSpecification, StyleSpecification, GeoJSONFeature } from 'maplibre-gl';
+import type {
+    CircleLayerSpecification,
+    StyleSpecification,
+    GeoJSONFeature,
+    LngLatLike,
+} from 'maplibre-gl';
 import type { BBox, GeoJsonProperties } from 'geojson';
 
 import type { Color, Source } from '../types';
 import type { CategoryLegend } from '../Legend/types';
 
-export type Center = [number, number];
-
 // To render data layers on the map
 export type PoiMapData = Partial<{
     sources: StyleSpecification['sources'];
@@ -24,7 +27,7 @@ export interface PoiMapOptions {
      * Also set the position of the map when rendering.
      */
     bbox?: BBox;
-    center?: Center;
+    center?: LngLatLike;
     zoom?: number;
     // Aspect ratio used to draw the map. The map will take he width available to it, and decide its height based on that ratio.
     aspectRatio?: number;
@@ -90,3 +93,5 @@ export type GeoPoint = {
 };
 
 export type PopupsConfiguration = { [key: string]: PopupLayer };
+
+export type CenterZoomOptions = { zoom?: number; center?: LngLatLike };
diff --git a/packages/visualizations/src/components/MapPoi/utils.ts b/packages/visualizations/src/components/MapPoi/utils.ts
@@ -7,7 +7,13 @@ import type {
 
 import type { Color } from '../types';
 
-import type { Layer, PoiMapData, PoiMapOptions, PopupsConfiguration } from './types';
+import type {
+    CenterZoomOptions,
+    Layer,
+    PoiMapData,
+    PoiMapOptions,
+    PopupsConfiguration,
+} from './types';
 import { DEFAULT_DARK_GREY, DEFAULT_BASEMAP_STYLE, DEFAULT_ASPECT_RATIO } from './constants';
 
 export const getMapStyle = (style: PoiMapOptions['style']): MapOptions['style'] => {
@@ -116,3 +122,17 @@ export const getMapOptions = (options: PoiMapOptions) => {
         sourceLink,
     };
 };
+
+/**
+ * Generates a valid CenterZoomOptions object by combining optional zoom and center properties.
+ *
+ * @param {CenterZoomOptions} options - An object with optional zoom and center properties.
+ * @returns A CenterZoomOptions object with valid zoom and center properties is defined.
+ */
+export const getCenterZoomOptions: (options: CenterZoomOptions) => CenterZoomOptions = ({
+    zoom,
+    center,
+}) => ({
+    ...(center ? { center } : null),
+    ...(Number.isInteger(zoom) ? { zoom } : null),
+});