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?

13 REPLIES 13
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.

 

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

May UG Leader Call Carousel 768x460.png

June User Group Leader Call

Join us on June 28 for our monthly User Group leader call!

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Users online (1,308)