ERA-11237: Conditional display of event detail location markers on map #1258

luixlive · 2025-03-19T22:10:40Z

What does this PR do?

Add location markers on the map when the user opens an event with a form that includes location fields.

How does it look

Relevant link(s)

Where / how to start reviewing (optional)

Start with the new hook useLocationMarkersLayer, which receives the event location and a click callback and exposes methods to update the markers, focus and blur them.
Then you can go through its implementation in the SchemaForm and its children.

Any background context you want to provide(if applicable)

This feature won't work in mobile devices for two reasons:

The agreed logic was to show the markers when opening the details view of an event. So we can see the event details, like its form, while having the markers on the map (see screenshot above). In mobile devices, the event detail view opens a side bar that entirely hides the map.
There is a relation between a location field and its map marker that basically focuses the marker while the field is focused (clicking or navigating with the keyboard into the field will make the marker of that field blue). Also, clicking the marker will immediately focus the location field if it is visible. The user experience of focusing fields is very different in mobile devices than in a computer, since there we have touch events instead of a pointer or a keyboard.

…cation fields

luixlive · 2025-03-19T22:12:01Z

src/LocationPicker/index.js

@@ -71,6 +71,7 @@ const LocationPicker = ({
          className={`${styles.input} ${readOnly ? styles.readOnly : ''}`}
          disabled={disabled}
          id={id}
+          onFocus={() => setLocationButtonRef.current.focus()}


For form data management, the id must be appended to the <input> but we forward the focusing to the button so when we programmatically focus the element by the id (like when we click a location marker) we see the location picker button being focused.

luixlive · 2025-03-19T22:12:53Z

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/SortableList/Item/index.js

+  return <li
+      className={itemClassName}
+      data-testid="schema-form-collection-item"
+      id={`${collectionDetails.value}.${id}`}


Add an id to the collection items so we can focus them programmatically when a user clicks a location marker which has its corresponding location field inside a collection item.

luixlive · 2025-03-19T22:16:10Z

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/index.js

@@ -131,6 +132,11 @@ const Collection = ({
    setItems([...items, { id: lastAddedItemIdRef.current, isFormModalOpen: true, isFormPreviewOpen: false }]);
  };

+  // If a location field from an item requests to focus its location marker, prefix the marker id with the collection
+  // id and the item index.
+  const focusLocationMarkerFromItem = (itemIndex) => (markerId) =>


Location fields inside collection items need to have prefixed ids to make them unique, otherwise several items may have the location field set and have their ids clashing, so we propagate the callbacks prefixing the ids like: collection1.2.nested-collection.1.item. Notice that, since we decided to allow every single character in the values of a field in the EFB, there may be scenarios where this is not enough to make ids unique (a user could decide to set the value of a field like: collection.1.field, the chances are extremely low, but its possible). We should have prohibited some characters 😅

luixlive · 2025-03-19T22:17:05Z

src/ReportManager/DetailsSection/SchemaForm/index.js

+    blurLocationMarker,
+    focusLocationMarker,
+    updateLocationMarkers
+  } = useLocationMarkersLayer(eventLocation, onLocationMarkerClick);


Here we use the new hook, we pass the event location and the callback to focus the corresponding fields when clicking a marker, and receive the methods to focus, blur and update the markers.

luixlive · 2025-03-19T22:17:40Z

src/ReportManager/DetailsSection/SchemaForm/index.js

+    };
+    addLocationMarkersFromFormDataRecursively(formData);
+
+    updateLocationMarkers(locationMarkers);


Here we update the markers every time the form data changes.

luixlive · 2025-03-19T22:18:45Z

src/ReportManager/DetailsSection/SchemaForm/utils/useLocationMarkersLayer/index.js

+const MARKER_CONNECTING_LINES_LAYER_ID = `${LAYER_IDS.EVENT_LOCATION_MARKERS}-lines`;
+const MARKER_CONNECTING_OUTLINES_LAYER_ID = `${LAYER_IDS.EVENT_LOCATION_MARKERS}-outlines`;
+
+const useLocationMarkersLayer = (eventLocation, onMarkerClickCallback) => {


And here we have all the source / layer / map events logic to handle the new location markers. Hopefully the file is very self-explanatory.

… items

tiffanynwong · 2025-03-20T20:31:17Z

Looking so good! Just a few notes/ ideas:

Right now we focus on the field if the user clicks on the pin. If the user clicks the jump to location button from the field the field stays the same. Could we focus the field when clicking the jump to location button too? That way the user can always see which field is tied to which location on the map.
When clicking on the jump to location button from a field, can we zoom in really close to that location. This is because it's likely that the these locations w/in the form will be really close to the event location. For example if the user is documenting a cluster of invasive plants, the plants could be very close to each other.

In this example I changed the locations to a few meters from each other.

Would it be possible to add a jump to location button in the collection summary? only if it's easy, if it adds too much scope it's ok.

…ease zoom level when jumping to location markers

luixlive · 2025-03-21T19:12:59Z

@tiffanynwong

Right now we focus on the field if the user clicks on the pin. If the user clicks the jump to location button from the field the field stays the same. Could we focus the field when clicking the jump to location button too? That way the user can always see which field is tied to which location on the map.

It's not hard to do so, but honestly I have mixed feelings about this. The idea behind the current logic is very simple:
1- If we focus the time picker widget (any of its parts: its value, menu, copy to clipboard button, jump to location button) we paint the marker blue.
2- If we click a marker, we focus its corresponding location field (which takes us to the point 1, causing to paint the clicked marker blue).

When focusing our location widget, by default we focus the open popover button, which wraps the value. This adds a blue border, which is what you are referring to. Now, when clicking a button, browsers natively put the focus on them, but it's not common practice to add a border or outline to them. It's just the standard. It doesn't mean the button is not focused. That is why when we click the jump to location button the marker gets blue, because the button keeps the focus, even if the border doesn't appear.

Your suggestion is to do something that is not common, and that may be confusing or irritating for users: move the from button A to button B when clicking button A. That is not an accessible practice, the expected behavior is to just keep the focus in the clicked button, even if its not being surrounded by a blue border or outline (which again, is normal with buttons, we just add the outline when they are navigated to from the keyboard). I could do it, if you really think it's worth it, I just wanted to write my thoughts.

Regarding point 2 and 3, I already worked on them 😄

gaboDev

Looking great! 🫡

ERA-1237: Add location markers to the map when viewing a form with lo…

336c108

…cation fields

luixlive added the deploy label Mar 19, 2025

luixlive marked this pull request as draft March 19, 2025 22:10

luixlive temporarily deployed to ERA-11237 March 19, 2025 22:10 — with GitHub Actions Inactive

luixlive temporarily deployed to padas-app March 19, 2025 22:11 — with GitHub Actions Inactive

luixlive commented Mar 19, 2025

View reviewed changes

ERA-11237: Small fix for markers of location fields inside collection…

b5f4c55

… items

luixlive temporarily deployed to ERA-11237 March 20, 2025 15:54 — with GitHub Actions Inactive

luixlive temporarily deployed to padas-app March 20, 2025 15:54 — with GitHub Actions Inactive

Base automatically changed from ERA-11236 to develop March 20, 2025 18:17

ERA-11237: Unit tests

dfea714

luixlive temporarily deployed to ERA-11237 March 20, 2025 19:52 — with GitHub Actions Inactive

luixlive temporarily deployed to padas-app March 20, 2025 19:52 — with GitHub Actions Inactive

luixlive marked this pull request as ready for review March 20, 2025 19:53

luixlive requested review from JoshuaVulcan and gaboDev March 20, 2025 19:53

ERA-11237: Add jump to location button in collection summary and incr…

09a98c9

…ease zoom level when jumping to location markers

luixlive deployed to ERA-11237 March 21, 2025 19:03 — with GitHub Actions View deployment

luixlive temporarily deployed to padas-app March 21, 2025 19:03 — with GitHub Actions Inactive

gaboDev approved these changes Mar 21, 2025

View reviewed changes

luixlive merged commit 180ae3a into develop Mar 24, 2025
3 checks passed

luixlive deleted the ERA-11237 branch March 24, 2025 15:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

ERA-11237: Conditional display of event detail location markers on map #1258

ERA-11237: Conditional display of event detail location markers on map #1258

Uh oh!

luixlive commented Mar 19, 2025 •

edited

Loading

Uh oh!

luixlive Mar 19, 2025

Uh oh!

luixlive Mar 19, 2025

Uh oh!

luixlive Mar 19, 2025

Uh oh!

luixlive Mar 19, 2025

Uh oh!

luixlive Mar 19, 2025

Uh oh!

luixlive Mar 19, 2025

Uh oh!

tiffanynwong commented Mar 20, 2025

Uh oh!

luixlive commented Mar 21, 2025

Uh oh!

gaboDev left a comment

Uh oh!

Uh oh!

Uh oh!

ERA-11237: Conditional display of event detail location markers on map #1258

ERA-11237: Conditional display of event detail location markers on map #1258

Uh oh!

Conversation

luixlive commented Mar 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

How does it look

Relevant link(s)

Where / how to start reviewing (optional)

Any background context you want to provide(if applicable)

Uh oh!

luixlive Mar 19, 2025

Choose a reason for hiding this comment

Uh oh!

luixlive Mar 19, 2025

Choose a reason for hiding this comment

Uh oh!

luixlive Mar 19, 2025

Choose a reason for hiding this comment

Uh oh!

luixlive Mar 19, 2025

Choose a reason for hiding this comment

Uh oh!

luixlive Mar 19, 2025

Choose a reason for hiding this comment

Uh oh!

luixlive Mar 19, 2025

Choose a reason for hiding this comment

Uh oh!

tiffanynwong commented Mar 20, 2025

Uh oh!

luixlive commented Mar 21, 2025

Uh oh!

gaboDev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

luixlive commented Mar 19, 2025 •

edited

Loading