Custom Icons as Map Pins

[Jessica_Smith]

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!

[roser]

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.
   

   

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.
   

   

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.

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