fix(POI Map): Update popup style

- When map width is below 500px, force the popup to behave as a sidebar popup taking up the full width - Add a close icon for modal style popup
opendatasoft · Nov 23, 2023 · b266cca · b266cca
1 parent 2e3eaba
commit b266cca
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 20 deletions.
diff --git a/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx b/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
@@ -21,8 +21,8 @@ const layer1: Layer = {
         display: PopupDisplayTypes.Tooltip,
         getContent: async (_, properties) => {
             await timeout(500);
-            const { key } = properties as { key: string };
-            return Promise.resolve(`<h4>${key}</h4>`);
+            const { key, description } = properties as Record<string, unknown>;
+            return Promise.resolve(`<b>${key}</b><div>${description}<div>`);
         },
         getLoadingContent: () => 'Loading...',
     },
@@ -43,7 +43,7 @@ const layer2: Layer = {
                 date: string;
                 description: string;
             };
-            return Promise.resolve(`<h4>${name}</h4><p>${description}<p/><small>${date}</small>`);
+            return Promise.resolve(`<b>${name}</b><p>${description}<p/><small>${date}</small>`);
         },
         getLoadingContent: () => 'Loading...',
     },
@@ -107,7 +107,7 @@ const meta: ComponentMeta<typeof PoiMap> = {
 
 export default meta;
 
-const Template: ComponentStory<typeof PoiMap> = args => (
+const Template: ComponentStory<typeof PoiMap> = (args) => (
     <div
         style={{
             width: '50%',
@@ -177,7 +177,7 @@ PoiMapLegendCenter.args = PoiMapLegendCenterArgs;
 export const PoiMapMinMaxZooms: ComponentStory<typeof PoiMap> = Template.bind({});
 const PoiMapMinMaxZoomsArgs = {
     data: { value: { layers: [{ ...layer1, colorMatch: citiesColorMatch }, layer2], sources } },
-    options: { 
+    options: {
         ...options,
         legend,
         minZoom: 3,

diff --git a/packages/visualizations-react/stories/Poi/sources.ts b/packages/visualizations-react/stories/Poi/sources.ts
@@ -15,7 +15,8 @@ const sources : PoiMapData["sources"] = {
                         coordinates: [2.357573,48.837904],
                     },
                     properties: {
-                        key: 'Paris'
+                        key: 'Paris',
+                        description: 'Officia deserunt commodo enim ea ad veniam enim consectetur aliquip adipisicing duis. Exercitation aute velit pariatur est et ea qui veniam ad duis quis ad aliquip. Ipsum exercitation dolor tempor deserunt sunt amet laborum tempor excepteur est sunt ea quis.'
                     },
                 },
                 {
@@ -26,7 +27,8 @@ const sources : PoiMapData["sources"] = {
                         coordinates: [-0.563328,44.838245],
                     },
                     properties: {
-                        key: 'Bordeaux'
+                        key: 'Bordeaux',
+                        description: 'Pariatur duis mollit sit id ullamco ea non ad dolore voluptate nostrud deserunt fugiat proident. Sunt dolor qui consectetur exercitation mollit proident Lorem laborum cillum sit Lorem id eiusmod. Lorem culpa tempor aliqua aliquip reprehenderit. Aute officia reprehenderit aute pariatur incididunt nostrud exercitation voluptate id est ex. Qui eiusmod est enim est ipsum elit laboris.'
                     },
                 },
                 {
@@ -37,7 +39,8 @@ const sources : PoiMapData["sources"] = {
                         coordinates: [-1.552924,47.214847],
                     },
                     properties: {
-                        key: 'Nantes'
+                        key: 'Nantes',
+                        description: "Irure incididunt deserunt officia eiusmod occaecat duis nostrud sint excepteur. Id non voluptate non proident sunt sit nisi eiusmod sit excepteur duis cillum adipisicing. Nostrud officia ad tempor quis commodo aute elit tempor reprehenderit esse est aute fugiat reprehenderit. Aliquip eu occaecat Lorem cupidatat labore consequat. Culpa commodo sunt proident exercitation. Enim voluptate minim veniam enim nulla aute dolor magna est elit aliqua. Ex occaecat fugiat laboris do do dolor nostrud cupidatat."
                     },
                 },
                 {
@@ -48,7 +51,8 @@ const sources : PoiMapData["sources"] = {
                         coordinates: [5.360529,43.303114],
                     },
                     properties: {
-                        key: 'Marseille'
+                        key: 'Marseille',
+                        description: "Dolore nisi non id labore. Ea deserunt irure nisi nisi deserunt anim nisi et. Culpa sint mollit deserunt ea eiusmod laborum nostrud."
                     },
                 },
             ],
@@ -65,7 +69,7 @@ const sources : PoiMapData["sources"] = {
                     properties: {
                         name: "Battle of Verdun",
                         date: "1916",
-                        description: "The Battle of Verdun was fought from 21 February to 18 December 1916 on the Western Front in France. The battle was the longest of the First World War and took place on the hills north of Verdun-sur-Meuse."
+                        description: "The Battle of Verdun was fought from 21 February to 18 December 1916 on the Western Front in France. The battle was the longest of the First World War and took place on the hills north of Verdun-sur-Meuse. Nisi magna dolor ullamco Lorem culpa ea tempor exercitation dolor ex cupidatat esse voluptate ea. Incididunt consectetur ut officia eiusmod voluptate commodo adipisicing tempor eiusmod esse nulla veniam ut. Aute ipsum eiusmod culpa dolore ea aliquip nulla consectetur reprehenderit in mollit nostrud. Elit commodo non est voluptate pariatur. Exercitation reprehenderit pariatur dolore aute elit ea dolor commodo cillum. Est dolore ut elit in. Ullamco est laborum aute labore. Cillum incididunt laboris do eiusmod fugiat enim veniam aliquip duis incididunt laboris anim nostrud. Laborum mollit esse magna fugiat fugiat fugiat aliquip." 
                     },
                     geometry: {
                         type: "Point",

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, POPUP_WIDTH } from './constants';
+import { POPUP_CLASSNAME, POPUP_OPTIONS, POPUP_WIDTH } from './constants';
 import type { PopupsConfiguration, CenterZoomOptions } from './types';
 
 const CURSOR = {
@@ -194,13 +194,15 @@ export default class MapPOI {
             this.popup.setLngLat(geometry.coordinates as LngLatLike).addTo(map);
         }
 
+        this.popup.addClassName(`${POPUP_CLASSNAME}--loading`);
         this.popup.setHTML(getLoadingContent());
         getContent(featureId, properties).then((content) => {
             this.popup.setHTML(content);
+            this.popup.removeClassName(`${POPUP_CLASSNAME}--loading`);
         });
 
         const classnameModifier = display === 'sidebar' ? 'addClassName' : 'removeClassName';
-        this.popup[classnameModifier](`${POPUP_OPTIONS.className}--as-sidebar`);
+        this.popup[classnameModifier](`${POPUP_CLASSNAME}--as-sidebar`);
 
         if (display === 'sidebar') {
             map.easeTo({

diff --git a/packages/visualizations/src/components/MapPoi/MapRender.svelte b/packages/visualizations/src/components/MapPoi/MapRender.svelte
@@ -112,6 +112,8 @@
         }
     }
     .map-card {
+        container-type: inline-size;
+        container-name: map-card;
         display: flex;
         flex-direction: column;
         margin: 0;
@@ -124,27 +126,98 @@
     figcaption h3 {
         margin: 0;
     }
+
     /* To add classes programmatically in svelte we will use a global selector. We place it inside a local selector to obtain some encapsulation and avoid side effects */
+
+    /* --- POPUP ---  */
     .map-card :global(.poi-map__popup) {
         /* To be above map controls (z-index: 2)*/
         z-index: 3;
-        /* 26px is for its padding */
-        max-height: calc(100% - 26px);
         height: auto;
-        overflow-y: auto;
+        max-height: 100%;
+        box-sizing: border-box;
     }
     .map-card :global(.poi-map__popup.poi-map__popup--as-sidebar) {
         /* TO DO: add common stylesheet */
-        transform: translate(13px, 13px) !important;
+        height: 100%;
+        max-height: 100%;
+        transform: translate(0px, 0px) !important;
+        padding: 13px 13px 0px 13px;
     }
+
+    /* --- POPUP TIP ---  */
     .map-card :global(.poi-map__popup.poi-map__popup--as-sidebar > .maplibregl-popup-tip) {
         display: none;
     }
+
+    /* --- POPUP CONTENT ---  */
     .map-card :global(.poi-map__popup > .maplibregl-popup-content) {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
         padding: 13px;
         border-radius: 6px;
-        box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.26);
+        max-height: 100%;
+        overflow-y: auto;
+        box-sizing: border-box;
+    }
+
+    /* --- POPUP CLOSE BUTTON ---  */
+    .map-card :global(.maplibregl-popup-close-button) {
+        font-size: 16px;
+        padding: 0;
+        width: 24px;
+        height: 24px;
+        margin-bottom: 13px;
+        position: relative;
+        order: -1;
+        flex-shrink: 0;
+        left: calc(100% - 26px);
+    }
+    .map-card :global(.maplibregl-popup-close-button:hover) {
+        background-color: transparent;
     }
+    /* Hide close button when content is loading */
+    .map-card :global(.poi-map__popup--loading .maplibregl-popup-close-button) {
+        display: none;
+    }
+
+    /* --- CONTROLS --- */
+    .map-card :global(.maplibregl-ctrl.maplibregl-ctrl-group) {
+        margin-top: 13px;
+        margin-right: 13px;
+    }
+
+    /* --- CONTAINER QUERIES ---  */
+    @container map-card (width < 600px) {
+        /* Force tooltip popup to behave like a sidebar popup */
+        .map-card :global(.poi-map__popup) {
+            height: 100%;
+            max-height: 100%;
+            transform: translate(0px, 0px) !important;
+            padding: 13px 13px 0px 13px;
+            width: 100%;
+            max-width: 100% !important;
+        }
+        .map-card :global(.maplibregl-popup-tip) {
+            display: none;
+        }
+        .map-card :global(.poi-map__popup > .maplibregl-popup-content) {
+            width: 100%;
+        }
+    }
+    @container map-card (width >= 600px) {
+        .map-card :global(.poi-map__popup) {
+            max-width: 300px !important;
+        }
+        /* Close button is not visible for tooltip popup */
+        .map-card
+            :global(.poi-map__popup:not(.poi-map__popup--as-sidebar)
+                .maplibregl-popup-close-button) {
+            display: none;
+        }
+    }
+
     .main {
         aspect-ratio: var(--aspect-ratio);
         flex-grow: 1;

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