Clickable Image - is this possible with Power Apps?

[stapes]

I am not sure what you would call this.

I want to display a simple map of a warehouse & have the users click on various locations using the map to get data on various locations.

This would not be a Google Maps or Bing Maps. Just a Jpeg.

Is it even possible with Power Apps?

[stapes]

Not my video, but @ericonline made the video. I would be interested to know how you made the 'sliders'. My app requires the user to enter numerical x & y coordinates to add or move waypoints. It's a little clunky but it works.

[mate_toth]

@stapes, I know that it is @ericonline 's video, I replied to his comment. 🙂 

I have two sliders (I made the app in Teams, for some of the properties, I needed to use the Slider from Classic menu).

My image has the property CalculateOriginalDimensions set to true.

SliderX: Covers the whole image, Max property is Img_Map.Width, handle, rail colors has 0 alphas, so they aren't shown.

SliderY: Height is the Img_Map.Height (the Max property also). X coordinate is SliderX.Value-Self.Width/2, so it moves with the invisible X Slider. 

To store the information:

Xcoord: Img_Map.OriginalWidth/Img_Map.DisplayedWidth*(SliderX.Value-(Img_Map.Width-Img_Map.DisplayedWidth)/2)

Ycoord: Img_Map.OriginalWidth/Img_Map.DisplayedWidth*((Img_Map.Height - SliderY.Value)-(Img_Map.Height-Img_Map.DisplayedHeight)/2)

Note that in case of the Ycoord, the SliderY.Value needs to be subtracted from the Img_Map.Height, as the vertical slider starts from the bottom of the image (the SliderX start at 0,0 coordinate).

Using OriginalWidth and DisplayedWidth allows the responsive design, as the Dataverse / Collection stores the coordinates for the original image.

To display the information:

X:
Img_Map.X+(Img_Map.Width-Img_Map.DisplayedWidth)/2+Img_Map.DisplayedWidth/Img_Map.OriginalWidth*ThisItem.Xcoord-Self.Width/2

Y:
Img_Map.Y+(Img_Map.Height-Img_Map.DisplayedHeight)/2+Img_Map.DisplayedHeight/Img_Map.OriginalHeight*ThisItem.Ycoord-Self.Height/2

First you need to select X with the invisible slider, and than the Y with the visible Y slider. 

It's a little clunky too, this it how it looks. (I didn't show the actual saving part)

I hope this helps!

[stapes]

Thank you @mate_toth 

What did you mean by this?

"(I made the app in Teams"

[mate_toth]

@stapes,

I meant that I created the app in Power Apps Studio in the Teams desktop client. 
I highlighted this because the "Teams version" has the modern Fluent UI controls, and those don't have the same set of properties as the classic controls. The classic controls are off by default, they need to be enabled on in the settings.

[Littleone145]

Has anyone done this but also linking it to a gallery to show info?