cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
stapes
Impactful Individual
Impactful Individual

Clickable Image - is this possible with Power Apps?

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?

14 REPLIES 14
stapes
Impactful Individual
Impactful Individual

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.

@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
Impactful Individual
Impactful Individual

Thank you @mate_toth 

 

What did you mean by this?

 

"(I made the app in Teams"

@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
Helper I
Helper I

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

 

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Difinity Conference 2022

Difinity Conference 2022

Register today for two amazing days of learning, featuring intensive learning sessions across multiple tracks, led by engaging and dynamic experts.

European SharePoint Conference

European SharePoint Conference

The European SharePoint Conference returns live and in-person November 28-December 1 with 4 Microsoft Keynotes, 9 Tutorials, and 120 Sessions.

Power Apps Ideas

Changes to Ideas Coming

We are excited to announce a new way to share your ideas for Power Apps!

Top Solution Authors
Top Kudoed Authors
Users online (2,855)