The Map Pin component is used to customize the look of your map pins. A map pin has three states: default, hovered, and selected.

Pin Configuration

You can customize the pin color and label color for each of the three states by editing the pin object within mapConfig in verticalsToConfig:

"verticalsToConfig": {
  "Locations": {
    "cardType": "location-standard",
    "mapConfig": {
      "mapProvider": "MapBox",
      "pin": {
        "default": {
          "backgroundColor": "#00759e",
          "labelColor": "#ffffff",
          "strokeColor": "#ffffff"
        },
        "hovered": {
          "backgroundColor": "#ffffff",
          "labelColor": "#00759e",
          "strokeColor": "#00759e"
        },
        "selected": {
          "backgroundColor": "#00759e",
          "labelColor": "#ffffff",
          "strokeColor": "#ffffff"
        }
      }
    }
  }
}

Each state supports the following properties:

• backgroundColor - the fill color of the pin
• labelColor - the color of the label (number/text) inside the pin
• strokeColor - the color of the pin's border/stroke

Add Ordinal to Vertical Search

You can add a numbered ordinal to each pin so that the pin number corresponds to the result card in the sidebar. This is a two-step process:

Step 1: Update the PinImages.js file to pass the index to getDefaultPin, getHoveredPin, and getSelectedPin.

In static/js/theme-map/PinImages.js, update each function call to include index: index:

// Default pin
getDefaultPin(index) {
  return new Pin({
    index: index,
    // ... other config
  });
}

// Hovered pin
getHoveredPin(index) {
  return new Pin({
    index: index,
    // ... other config
  });
}

// Selected pin
getSelectedPin(index) {
  return new Pin({
    index: index,
    // ... other config
  });
}

Step 2: Add SCSS to display the ordinal on the card. In your answers.scss file, add:

.VerticalFullPageMap .HitchhikerLocationCard-ordinal {
  display: flex;
}

Further Customize Pins

To further customize pin appearance beyond color, you can shadow and modify the following theme files:

• static/js/theme-map/PinImages.js - controls pin shape and appearance
• static/js/theme-map/GoogleMapProvider.js - Google Maps-specific pin rendering
• static/js/theme-map/MapBoxMapProvider.js - Mapbox-specific pin rendering