Custom Icons as Map Pins

Search Best Practices - Search Front-End
1

Is it possible to upload custom icons as map pins in the locations vertical within Answers? I’d love to use the same icon my customer has on their site map!

2

Hi Jessie,

Yes, you can do this easily with a custom SVG.

Caveat: We’d recommend holding off on this until we have our new maps functionality with answers. without the ordinal, it’s not clear to users which pin maps to which card, so proceed at your own discretion.

  1. To update the pin on the locations vertical
    Shadow the map-pin.hbs file using the Jambo Override Theme command – you can find this in templates/vertical-map/script/. In that file, you’ll see a variable called svg . Replace the highlighted portion below with your SVG code.

    image
    image1560×836 106 KB

  2. To update the pin on universal
    Follow step 1, except shadow the map-pin.hbs file in templates/universal-standard/script/ and replace the SVG there.

  3. To update the pin on the card
    Create a new card using location-standard as a base. In the template.hbs, replace the result.ordinal with your SVG.

    image
    image1384×710 81.1 KB

We’d also recommend adding a unique class name (at the same level as HitchhikerLocationStandard-ordinal), just in case you have multiple verticals using a location card. Here I’ve added a UsingCustomSvg class.

image
image1174×196 30.9 KB

You’ll likely need to add some scss to get the ordinal to override our default styling for that pin on the card.

.UsingCustomSvg {
    background-color: unset;
    border: none;
    width: unset;
    height: unset;
}

Thanks,
Rose