Locator Map Pins Connecting to Results Cards

Pages
1

When a search on a React Locator is conducted, make it so that clicking a pin triggers some interaction with the corresponding result card. Currently the pins don’t have any interactivity. It would be nice to be able to pass some kind of click/hover handler to the map/pin component.

3

Hi Katie,

As you can see in this GIF, I was able to extend the locator that you created in Module 4 of the Pages track to add the functionality that you are looking for.

map_gif

To summarize, I added some React Context called MapContext to my locator that has a setHoveredLocationId function that sets a hoveredLocationId value. My custom MapPin component sets the hovered location value when the mouse enters the pin element and clears the value when the mouse leaves. If the hoveredLocationId is equal to the location ID of the card, the card’s background color changes

Here is the repo that contains the different components that I am referring to.

One limitation that I wanted to call out is that PinComponent prop on MapboxMap does not have access to the context values even when the component is wrapped in the context provider which meant I had to pass hoveredLocationId and setHoveredLocationId as additional props to the MapPin component

<MapboxMap
  mapboxAccessToken={YEXT_PUBLIC_MAPBOX_API_KEY || ""}
  PinComponent={(props) => (
    <MapPin
      {...props}
      hoveredLocationId={hoveredLocationId}
      setHoveredLocationId={setHoveredLocationId}
    />
  )}
/>

Let me know if this helps,

Aaron

1 Like
4

Thanks Aaron! I think the repo you linked needs to be made public, when I click the link I get a 404. If you’d rather add my github account to it directly, my username is michaelwoon

1 Like
5

Bumping this, could I get access to the repo?

6

Sorry, I missed your previous message! I just made the repo public.

1 Like
7

Great, I’ll try to implement it this week. I see you used some Mapbox specific things, like Popup and LngLatLike. I’m using the Map component from @yext/pages/components, rather than the MapboxMap from @yext/search-ui-react so I can create locators with both Mapbox and Google Maps. Is there a way to make your solution more generic so it works with both map providers?

8

This starter has pin/card interactivity configured using the generic map component.

To summarize how it works, there’s a LocatorContext that stores the currently selected/hovered/etc. entities: https://github.com/yextconsulting/pages-starter-react-consulting/blob/main/src/components/search/utils/useLocator.ts.

In the custom Marker for the map, when a user interacts with a pin those statuses are updated as appropriate: https://github.com/yextconsulting/pages-starter-react-consulting/blob/main/src/components/search/CustomMarker.tsx#L42-L44

The result list component checks for selected entities and uses that to scroll cards into view / apply styling changes: https://github.com/yextconsulting/pages-starter-react-consulting/blob/main/src/components/search/ResultList.tsx#L49-L57

Here’s a preview link showing it working (link will expire at some point, sorry to anyone looking at this in the future): Yext Pages Site

1 Like
9

Thank you. It’s helpful.

10

Hi Ben and Aaron,

I just wanted to check if there was any progress on the Yext side as it relates to this item or if it still made sense for us to give it a go with the resources you mentioned?

11

Hi Holden,

I would recommend following along with Ben or my example for having pin interaction trigger a change somewhere else in the app.