fix(POI Map): clicked feature is always visible when sidebar popup is…

… open
opendatasoft · Sep 29, 2023 · 972a2f6 · 972a2f6
1 parent 95d38e2
commit 972a2f6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 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, {
     StyleSpecification,
 } from 'maplibre-gl';
 
-import { POPUP_OPTIONS } from './constants';
+import { POPUP_OPTIONS, POPUP_WIDTH } from './constants';
 import type { PopupsConfiguration, CenterZoomOptions } from './types';
 
 const CURSOR = {
@@ -136,6 +136,13 @@ export default class MapPOI {
 
     private bindedOnClick = this.onClick.bind(this);
 
+    private resetLeftPaddingPopup() {
+        this.queue((map) => map.easeTo({ padding: { left: 0 } }));
+        this.popup.off('close', this.bindedResetLeftPaddingPopup);
+    }
+
+    private bindedResetLeftPaddingPopup = this.resetLeftPaddingPopup.bind(this);
+
     /** Event handler for popup close event. */
     private onPopupClose() {
         this.popupFeatures.forEach(({ source, sourceLayer, id }) => {
@@ -184,7 +191,7 @@ export default class MapPOI {
         const { display, getContent, getLoadingContent } = popupConfiguration;
 
         if (this.popup.isOpen() === false) {
-            this.popup.setLngLat(geometry.coordinates.slice() as LngLatLike).addTo(map);
+            this.popup.setLngLat(geometry.coordinates as LngLatLike).addTo(map);
         }
 
         this.popup.setHTML(getLoadingContent());
@@ -195,6 +202,14 @@ export default class MapPOI {
         const classnameModifier = display === 'sidebar' ? 'addClassName' : 'removeClassName';
         this.popup[classnameModifier](`${POPUP_OPTIONS.className}--as-sidebar`);
 
+        if (display === 'sidebar') {
+            map.easeTo({
+                center: geometry.coordinates as LngLatLike,
+                padding: { left: POPUP_WIDTH },
+            });
+            this.popup.on('close', this.bindedResetLeftPaddingPopup);
+        }
+
         if (featureId) {
             map.setFeatureState({ source, sourceLayer, id: featureId }, { 'popup-feature': true });
         }

diff --git a/packages/visualizations/src/components/MapPoi/constants.ts b/packages/visualizations/src/components/MapPoi/constants.ts
@@ -12,8 +12,10 @@ export const DEFAULT_ASPECT_RATIO = 1;
 
 export const DEFAULT_DARK_GREY: Color = '#515457';
 
+export const POPUP_WIDTH = 300;
+
 export const POPUP_OPTIONS: PopupOptions = {
     className: 'poi-map__popup',
     closeButton: false,
-    maxWidth: '300px',
+    maxWidth: `${POPUP_WIDTH}px`,
 };