Module Assessment | Yext Hitchhikers Platform
Background
Turtlehead Tacos wants to use Mapbox for their map provider. They want to decrease the zoom level, so users see more of a location’s surrounding area when they search.
They also want to make sure that when there are no results to a query in the Restaurants vertical, we show all the Turtlehead Restaurants to make sure users know to look at one of the open locations.
Lastly, they want to do some fun things with the pins themselves, including:
- Clustering of pins
- Pin color that’s on-brand
Your Challenge
Navigate to Pages > Turtlehead Taco Search > Deploys, go to the Code Editor, and click into the master branch. You should expect this to take a couple minutes to load – in the background, it’s starting up a container for your development.
Click “View Live Preview” to open your preview in a new tab.
- Search for “restaurants” to see how your map appears now on both Universal and Vertical search.
Navigate to the
config > restaurants.json
file.In verticalsToConfig, update the mapConfig object –
- Make sure the Map Provider is Mapbox
- Uncomment the
enablePinClustering
property in the mapConfig object and set the value totrue
Update the pins to have a
default
color of Turtlehead Green (#009347)andhovered
color of Turtlehead Light Green (#efefd4) by adding the below to yourmapConfig
object."pin": { "default": { // The pin in its normal state "backgroundColor": "#009347", // Enter a hex value or color for the pin background "strokeColor": "#2a446b", "labelColor": "white" }, "hovered": { // The pin when it is hovered "backgroundColor": "#efefd4", "strokeColor": "#172638", "labelColor": "white" }, "selected": { // The pin when it is selected by mouse click or through a card click "backgroundColor": "#2f4d71", "strokeColor": "#172638", "labelColor": "white" } }
Preview the change to make sure it looks how you want.
Click commit and enter a commit message describing what you’re doing.
Monitor the build and publish to make sure it’s successful.