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

1. 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.

2. 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.

3. Navigate to the config > restaurants.json file.

4. 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 to true

5. Update the pins to have a default color of Turtlehead Green (#009347)and hovered color of Turtlehead Light Green (#efefd4) by adding the below to your mapConfig 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"
       }
   }

6. Preview the change to make sure it looks how you want.

7. Click commit and enter a commit message describing what you’re doing.

8. Monitor the build and publish to make sure it’s successful.