Skip to content

Commit

Permalink
fix(POI Map): Update popup style
Browse files Browse the repository at this point in the history
- 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
  • Loading branch information
KevinFabre-ods committed Nov 23, 2023
1 parent 2e3eaba commit b266cca
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 20 deletions.
10 changes: 5 additions & 5 deletions packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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...',
},
Expand All @@ -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...',
},
Expand Down Expand Up @@ -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%',
Expand Down Expand Up @@ -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,
Expand Down
14 changes: 9 additions & 5 deletions packages/visualizations-react/stories/Poi/sources.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.'
},
},
{
Expand All @@ -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.'
},
},
{
Expand All @@ -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."
},
},
{
Expand All @@ -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."
},
},
],
Expand All @@ -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",
Expand Down
6 changes: 4 additions & 2 deletions packages/visualizations/src/components/MapPoi/Map.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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({
Expand Down
83 changes: 78 additions & 5 deletions packages/visualizations/src/components/MapPoi/MapRender.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,8 @@
}
}
.map-card {
container-type: inline-size;
container-name: map-card;
display: flex;
flex-direction: column;
margin: 0;
Expand All @@ -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;
Expand Down
7 changes: 4 additions & 3 deletions packages/visualizations/src/components/MapPoi/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};

0 comments on commit b266cca

Please sign in to comment.