Creating Custom Map Pin as an Image Button

Is there a way to create a custom image button that would take the shape of a map pin? I saw the post on this from back in 2016, but the article that Seb had offered is not available anymore. I can create the image in Photoshop, but I will still be constrained by the Image Button’s x/y values. I suppose I could just box it, but was hoping I could just “wrap” the image in the clickable area.
Appreciate any experience with this.

Hi @ron,

Could you please share the link to the post or article that doesn’t seem to be available anymore so we can fix that?

Re/ your question, you can add any Asset within a Map Collection, including an Image Button.

Your image button will have a fixed size in pixels to it always displays at the same size, whatever the zoom level in your map. Instead of having an X & Y position in pixels though, it will have a Latitude and Longitude coordinates so it moves along with your map.

See this article section: https://support.intuiface.com/hc/en-us/articles/360007430011-Map#how-to-add-a-point-of-interest-to-a-map

Let us know if that answers your questions.

Seb

Hey @Seb:
Here is the post from 2016. Pin button .

Also, I am not looking to use an interactive map. Just a static map image, but want to have a map pin display from another layer that when tapped will show a description/picture of an alumnus and the job they landed in that location after graduation. So I would like to design a custom pin. I am thinking the best I could do is design in Photoshop and then pull into the image button interactive asset and just move the interactive border as close to edge of the map pin graphic as possible. I was just hoping that I could find a way to have the border “wrap” around the image.
Thanks for your help.

Hello @ron,

You can use the Image button asset to make a button using an image of your choice, but it is not possible to move the interactive boarder of an asset. The interactive area is a square around the asset.

image

In this image anywhere the green is will respond to touch.

I would suggest when creating your image for your map pin, have the original size/resolution of the image match the size/resolution you intend to use in the experience. This will make sure the interactive area is as close to the border of the image as possible.

-Ryan

Hi @ron,

I also suggest you look at our Wayfinder examples. They will give you examples of POI (Points of Interest) on a static image map background.

Seb

Thank you Ryan and Seb.
Seb, the Wayfinder is exactly what I am intending to do with different layers depicting graduates from different schools within the college and where they landed jobs. The different layers would be connected to buttons/filters as you have done in Wayfinder. Good to know I am on the right track.
Many, Many, Thanks

1 Like