Add configurable selectedIcon for InputMapFindPlace widget

kaligrafy · kaligrafy · commit 388e040b41ab · 2025-08-22T10:35:42.000-04:00
- Add selectedIcon property to InputMapFindPlaceType interface
- Allow customization of selected marker icon URL and size like placesIcon
- Update render logic to use configurable selected icon instead of hardcoded value
- Add selectedIcon to default configuration in inputMapFindPlaceBase
- Include selectedIcon in comprehensive test coverage
- Remove hardcoded selectedIconUrl instance variable from component

This enables independent customization of both regular and selected marker appearances in map widgets.
diff --git a/packages/evolution-common/src/services/questionnaire/types/WidgetConfig.ts b/packages/evolution-common/src/services/questionnaire/types/WidgetConfig.ts
@@ -258,17 +258,32 @@ export type InputMapPointType = InputMapType &
         showSearchPlaceButton?: boolean | ParsingFunction<boolean>;
     };
 
+/**
+ * InputMapFindPlaceType is used to configure the mapFindPlace widget.
+ * @param placesIcon: Icon used for all found places from geocoding search results
+ * @param selectedIcon: Icon used when user selects/highlights a specific place from the results
+ * @param maxGeocodingResultsBounds: Limits the search results to a specific area.
+ * @param showSearchPlaceButton: Whether to show a button to search for a place.
+ * @param searchPlaceButtonColor: Color of the search place button.
+ * @param height: The height of the map container in css units: example: 28rem or 550px
+ * @param coordinatesPrecision: Number of decimals to keep for latitute longitude coordinates.
+ * @param invalidGeocodingResultTypes: Types of geocoding results from google to set as invalid (like 'city' or 'country', which are not precise enough for the address)
+ * @param showPhoto: Whether to show a photo of the selected place, when available.
+ * @param autoConfirmIfSingleResult: Whether to automatically confirm the selected place if there is only one result
+ * @param updateDefaultValueWhenResponded: Whether to update the default value when the user responds
+ */
 export type InputMapFindPlaceType = InputMapType &
     BaseQuestionType & {
         inputType: 'mapFindPlace';
         showSearchPlaceButton?: boolean | ParsingFunction<boolean>;
         searchPlaceButtonColor?: string | ParsingFunction<string>;
         placesIcon?: IconData;
+        selectedIcon?: IconData;
         maxGeocodingResultsBounds?: ParsingFunction<
             [{ lat: number; lng: number }, { lat: number; lng: number }] | undefined
         >;
-        height?: string; // the height of the map container in css units: example: 28rem or 550px
-        coordinatesPrecision?: number; // number of decimals to keep for latitute longitude coordinates.
+        height?: string;
+        coordinatesPrecision?: number;
         invalidGeocodingResultTypes?: string[];
         showPhoto?: boolean;
         autoConfirmIfSingleResult?: boolean;
diff --git a/packages/evolution-frontend/src/components/inputs/InputMapFindPlace.tsx b/packages/evolution-frontend/src/components/inputs/InputMapFindPlace.tsx
@@ -73,7 +73,6 @@ export class InputMapFindPlace extends React.Component<
 > {
     private geocodeButtonRef: React.RefObject<HTMLButtonElement | null> = React.createRef();
     private autoConfirmIfSingleResult: boolean;
-    private selectedIconUrl: string;
     private shouldFitBoundsIdx = 0;
     private currentBounds: [number, number, number, number] | undefined = undefined;
 
@@ -92,8 +91,6 @@ export class InputMapFindPlace extends React.Component<
 
         this.autoConfirmIfSingleResult = this.props.widgetConfig.autoConfirmIfSingleResult || false;
 
-        this.selectedIconUrl = defaultSelectedMarkerUrl;
-
         this.state = {
             geocoding: false,
             defaultCenter,
@@ -382,6 +379,20 @@ export class InputMapFindPlace extends React.Component<
                 ? this.props.widgetConfig.placesIcon.size
                 : defaultIconSize;
 
+        const selectedIconUrl = this.props.widgetConfig.selectedIcon
+            ? surveyHelper.parseString(
+                this.props.widgetConfig.selectedIcon.url,
+                this.props.interview,
+                this.props.path,
+                this.props.user
+            ) || defaultSelectedMarkerUrl
+            : defaultSelectedMarkerUrl;
+
+        const selectedIconSize =
+            this.props.widgetConfig.selectedIcon && this.props.widgetConfig.selectedIcon.size
+                ? this.props.widgetConfig.selectedIcon.size
+                : defaultIconSize;
+
         const iconUrl = this.props.widgetConfig.icon
             ? surveyHelper.parseString(
                 this.props.widgetConfig.icon.url,
@@ -412,8 +423,8 @@ export class InputMapFindPlace extends React.Component<
                 markers.push({
                     position: feature,
                     icon: {
-                        url: feature === this.state.selectedPlace ? this.selectedIconUrl : placesIconUrl,
-                        size: placesIconSize
+                        url: feature === this.state.selectedPlace ? selectedIconUrl : placesIconUrl,
+                        size: feature === this.state.selectedPlace ? selectedIconSize : placesIconSize
                     },
                     draggable: this.state.selectedPlace ? true : false,
                     onClick: () => this.onMarkerSelect(feature)
diff --git a/packages/evolution-frontend/src/components/inputs/__tests__/InputMapFindPlace.test.tsx b/packages/evolution-frontend/src/components/inputs/__tests__/InputMapFindPlace.test.tsx
@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event'
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 
 import { interviewAttributes } from './interviewData.test';
@@ -32,16 +32,16 @@ const userAttributes = {
     is_admin: false,
     pages: [],
     showUserInfo: true
-}
+};
 
 const baseWidgetConfig = {
     type: 'question' as const,
     twoColumns: true,
     path: 'test.foo',
     containsHtml: true,
     label: {
-        fr: `Texte en français`,
-        en: `English text`
+        fr: 'Texte en français',
+        en: 'English text'
     },
     size: 'medium' as const,
     inputType: 'mapFindPlace' as const,
@@ -68,12 +68,12 @@ describe('Render InputMapPoint with various parameters', () => {
     });
 
     test('Test with all parameters', () => {
-            
+
         const testWidgetConfig = Object.assign({
             geocodingQueryString: jest.fn(),
             refreshGeocodingLabel: {
-                fr: `Rafraîchir la carte`,
-                en: `Refresh map`
+                fr: 'Rafraîchir la carte',
+                en: 'Refresh map'
             },
             icon: {
                 url: 'path/to/icon',
@@ -83,14 +83,18 @@ describe('Render InputMapPoint with various parameters', () => {
             defaultZoom: 15,
             coordinatesPrecision: 6,
             placesIcon: {
-                url: 'path/to/icon',
+                url: 'path/to/places-icon',
                 size: [85, 85] as [number, number]
             },
+            selectedIcon: {
+                url: 'path/to/selected-icon',
+                size: [90, 90] as [number, number]
+            },
             maxGeocodingResultsBounds: function (interview, path) {
-                return [{lat: 45.2229, lng: -74.3230}, {lat: 46.1181, lng: -72.9215}] as [{ lat: number; lng: number; }, { lat: number; lng: number; }];
+                return [{ lat: 45.2229, lng: -74.3230 }, { lat: 46.1181, lng: -72.9215 }] as [{ lat: number; lng: number; }, { lat: number; lng: number; }];
             },
             invalidGeocodingResultTypes: [
-                'political', 
+                'political',
                 'country',
             ],
             updateDefaultValueWhenResponded: true
@@ -100,7 +104,7 @@ describe('Render InputMapPoint with various parameters', () => {
                 id={'test'}
                 onValueChange={() => { /* nothing to do */}}
                 widgetConfig={testWidgetConfig}
-                value={{ type: 'Feature' as const, properties: {}, geometry: { type: 'Point' as const, coordinates: [-73.1, 45.02]}}}
+                value={{ type: 'Feature' as const, properties: {}, geometry: { type: 'Point' as const, coordinates: [-73.1, 45.02] } }}
                 inputRef={React.createRef()}
                 interview={interviewAttributes}
                 user={userAttributes}
@@ -109,7 +113,7 @@ describe('Render InputMapPoint with various parameters', () => {
         );
         expect(container).toMatchSnapshot();
     });
-    
+
 });
 
 describe('Test geocoding requests', () => {
@@ -120,8 +124,8 @@ describe('Test geocoding requests', () => {
     const testWidgetConfig = Object.assign({
         geocodingQueryString: jest.fn().mockReturnValue(geocodingString),
         refreshGeocodingLabel: {
-            fr: `Geocode`,
-            en: `Geocode`
+            fr: 'Geocode',
+            en: 'Geocode'
         },
         icon: {
             url: 'path/to/icon',
@@ -135,18 +139,18 @@ describe('Test geocoding requests', () => {
         updateDefaultValueWhenResponded: true
     }, baseWidgetConfig);
 
-    const placeFeature1 = { 
-        type: 'Feature' as const, 
+    const placeFeature1 = {
+        type: 'Feature' as const,
         geometry: { type: 'Point' as const, coordinates: [-73.2, 45.1] },
         properties: { placeData: { place_id: '1', formatted_address: '123 test street', name: 'Foo extra good restaurant' } }
     };
     const placeFeature2 = {
-        type: 'Feature' as const, 
+        type: 'Feature' as const,
         geometry: { type: 'Point' as const, coordinates: [-73.2, 45.1] },
         properties: { placeData: { place_id: '2', formatted_address: '123 foo street', types: ['street_address'] } }
     };
     const placeFeature3 = {
-        type: 'Feature' as const, 
+        type: 'Feature' as const,
         geometry: { type: 'Point' as const, coordinates: [ -73.5673919, 45.5018869] },
         properties: { placeData: { place_id: '3', formatted_address: 'Montreal, QC, Canada', types: ['locality', 'political'] } }
     };
@@ -157,12 +161,12 @@ describe('Test geocoding requests', () => {
     });
 
     test('Geocode with multiple results', async () => {
-    
+
         const { container } = render(<InputMapFindPlace
             id={testId}
             onValueChange={mockOnValueChange}
             widgetConfig={testWidgetConfig}
-            value={{ type: 'Feature' as const, properties: {}, geometry: { type: 'Point' as const, coordinates: [-73.1, 45.02]}}}
+            value={{ type: 'Feature' as const, properties: {}, geometry: { type: 'Point' as const, coordinates: [-73.1, 45.02] } }}
             inputRef={React.createRef()}
             interview={interviewAttributes}
             user={userAttributes}
@@ -189,27 +193,27 @@ describe('Test geocoding requests', () => {
 
         // Make sure the value has not been changed
         expect(mockOnValueChange).not.toHaveBeenCalled();
-        
+
     });
 
     test('Geocode with single results, and confirm result', async () => {
-        
+
         const { container } = render(<InputMapFindPlace
             id={testId}
             onValueChange={mockOnValueChange}
             widgetConfig={testWidgetConfig}
-            value={{ type: 'Feature' as const, properties: {}, geometry: { type: 'Point' as const, coordinates: [-73.1, 45.02]}}}
+            value={{ type: 'Feature' as const, properties: {}, geometry: { type: 'Point' as const, coordinates: [-73.1, 45.02] } }}
             inputRef={React.createRef()}
             interview={interviewAttributes}
             user={userAttributes}
             path='foo.test'
             loadingState={0}
         />);
-        
+
         const user = userEvent.setup();
 
         // Find and click on the Geocode button, to return a single result
-       mockedGeocode.mockResolvedValueOnce([placeFeature1]);
+        mockedGeocode.mockResolvedValueOnce([placeFeature1]);
         await user.click(screen.getByText('Geocode'));
         expect(mockedGeocode).toHaveBeenCalledTimes(1);
         expect(mockedGeocode).toHaveBeenCalledWith(geocodingString, expect.anything());
@@ -225,7 +229,7 @@ describe('Test geocoding requests', () => {
         expect(mockOnValueChange).toHaveBeenCalledWith({ target: { value: {
             type: 'Feature' as const,
             geometry: placeFeature1.geometry,
-            properties: { 
+            properties: {
                 lastAction: 'findPlace',
                 geocodingQueryString: geocodingString,
                 geocodingResultsData: {
@@ -234,20 +238,20 @@ describe('Test geocoding requests', () => {
                     types: undefined,
                 }
             }
-        }}})
+        } } });
 
         // There should not be any selection or confirm widgets anymore
         expect(container.querySelector('select')).not.toBeInTheDocument();
         expect(screen.queryByText('ConfirmLocation')).not.toBeInTheDocument();
     });
 
     test('Geocode with single result, then re-query with undefined results', async () => {
-    
+
         const { container } = render(<InputMapFindPlace
             id={testId}
             onValueChange={mockOnValueChange}
             widgetConfig={testWidgetConfig}
-            value={{ type: 'Feature' as const, properties: {}, geometry: { type: 'Point' as const, coordinates: [-73.1, 45.02]}}}
+            value={{ type: 'Feature' as const, properties: {}, geometry: { type: 'Point' as const, coordinates: [-73.1, 45.02] } }}
             inputRef={React.createRef()}
             interview={interviewAttributes}
             user={userAttributes}
@@ -270,7 +274,7 @@ describe('Test geocoding requests', () => {
         expect(selectionList).toBeInTheDocument();
 
         expect(screen.getByText('ConfirmLocation')).toBeInTheDocument();
-        
+
         // Click the geocode button again, but get undefined values
         mockedGeocode.mockResolvedValueOnce(undefined);
         const newGeocodingString = 'other string';
@@ -282,16 +286,16 @@ describe('Test geocoding requests', () => {
         expect(selectionList2).not.toBeInTheDocument();
 
         expect(screen.queryByText('ConfirmLocation')).not.toBeInTheDocument();
-        
+
     });
 
     test('Geocode with single result, then re-query with rejection', async () => {
-    
+
         const { container } = render(<InputMapFindPlace
             id={testId}
             onValueChange={mockOnValueChange}
             widgetConfig={testWidgetConfig}
-            value={{ type: 'Feature' as const, properties: {}, geometry: { type: 'Point' as const, coordinates: [-73.1, 45.02]}}}
+            value={{ type: 'Feature' as const, properties: {}, geometry: { type: 'Point' as const, coordinates: [-73.1, 45.02] } }}
             inputRef={React.createRef()}
             interview={interviewAttributes}
             user={userAttributes}
@@ -325,23 +329,23 @@ describe('Test geocoding requests', () => {
         expect(selectionList2).not.toBeInTheDocument();
 
         expect(screen.queryByText('ConfirmLocation')).not.toBeInTheDocument();
-        
+
     });
 
     test('Click the geocode button, that triggers an update', async () => {
-    
+
         const props = {
             id: testId,
             onValueChange: mockOnValueChange,
             widgetConfig: testWidgetConfig,
-            value: { type: 'Feature' as const, properties: {}, geometry: { type: 'Point' as const, coordinates: [-73.1, 45.02]}},
+            value: { type: 'Feature' as const, properties: {}, geometry: { type: 'Point' as const, coordinates: [-73.1, 45.02] } },
             inputRef: React.createRef() as React.LegacyRef<HTMLInputElement>,
             size: 'medium' as const,
             interview: interviewAttributes,
             user: userAttributes,
             path: 'foo.test',
             loadingState: 0,
-        }
+        };
 
         const { container } = render(<InputMapFindPlace {...props} />);
         const user = userEvent.setup();
@@ -359,13 +363,13 @@ describe('Test geocoding requests', () => {
         expect(selectionList).toBeInTheDocument();
 
         expect(screen.getByText('ConfirmLocation')).toBeInTheDocument();
-        
+
     });
 
     test('Geocode with single imprecise result', async () => {
         const widgetConfig = Object.assign({
             invalidGeocodingResultTypes: [
-                'political', 
+                'political',
                 'country',
                 'administrative_area_level_1',
                 'administrative_area_level_2',
@@ -411,7 +415,7 @@ describe('Test geocoding requests', () => {
         expect(mockOnValueChange).toHaveBeenCalledWith({ target: { value: {
             type: 'Feature' as const,
             geometry: placeFeature3.geometry,
-            properties: { 
+            properties: {
                 lastAction: 'findPlace',
                 geocodingQueryString: geocodingString,
                 geocodingResultsData: {
@@ -421,7 +425,7 @@ describe('Test geocoding requests', () => {
                 },
                 isGeocodingImprecise: true, // key part!
             }
-        }}})
+        } } });
 
         // Select list and confirm button should not be present
         expect(container.querySelector('select')).not.toBeInTheDocument();
diff --git a/packages/evolution-frontend/src/components/inputs/defaultInputBase.ts b/packages/evolution-frontend/src/components/inputs/defaultInputBase.ts
@@ -128,6 +128,7 @@ export const inputMapFindPlaceBase: Pick<
     | 'containsHtml'
     | 'autoConfirmIfSingleResult'
     | 'placesIcon'
+    | 'selectedIcon'
     | 'defaultCenter'
     | 'refreshGeocodingLabel'
     | 'showSearchPlaceButton'
@@ -143,6 +144,10 @@ export const inputMapFindPlaceBase: Pick<
         url: () => '/dist/images/activities_icons/default_marker.svg',
         size: [70, 70]
     },
+    selectedIcon: {
+        url: () => '/dist/images/activities_icons/default_selected_marker.svg',
+        size: [70, 70]
+    },
     defaultCenter: config.mapDefaultCenter,
     refreshGeocodingLabel: (t: TFunction) => t('customLabel:RefreshGeocodingLabel'),
     showSearchPlaceButton: () => true,
