Pages Code Examples | Yext Hitchhikers Platform
The following contains various code examples for React Pages. You can copy and past the code into your own sites or modify them to fit your needs.
Locator Map Pin Interactivity
When a search on a React Locator is conducted, make it so that clicking a pin triggers some interaction with the corresponding result card.
Mapbox
Use the MapboxMap component from @yext/search-ui-react.
Here is the repo
that contains the different components referred to below.
You can extend the locator that you created in Module 4 of the Pages track to add the functionality that you are looking for.
To summarize, add some React Context called MapContext to your locator with a setHoveredLocationId function that sets a hoveredLocationId value. The 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.
One limitation to call out is that the PinComponent prop on MapboxMap does not have access to the context values even when the component is wrapped in the context provider which means you have 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}
/>
)}
/>Generic Map Provider
Use the Map component from @yext/pages-components.
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
here
.
In the CustomMarker for the map, when a user interacts with a pin those statuses are updated as appropriate
here
.
The result list component checks for selected entities and uses that to scroll cards into view / apply styling changes here .