Gallery Overlay Question

[ericonline]

Hi @mr-dang. I'm using a method you or Mehdi showed off a while ago, the "Ol' Gallery with TemplateSize=0" trick. I found something very interesting I was hoping someone could weigh in on.

Setup: 

• Gallery (the "overlay")
  • Width: Screen.Width
  • Height: Screen.Height
  • TemplateSize: 0
  • Holds 2 controls, a Label and an Icon (map pin)
• Image Control set to a map image
  • Underneath the overlay
• ClearCollect Function when user clicks nav button to get to map screen

  • ClearCollect(colMapPins,
        {region: "System Wide-1", x: 140, y: 180},
        {region: "System Wide-2", x: 140, y: 310},
        {region: "West-1", x: 317, y: 145}, <---
        {region: "West-2", x: 527, y: 139}, <---
        {region: "West-3", x: 460, y: 399},
        {region: "West-4", x: 280, y: 335},
        {region: "East-1", x: 620, y: 240},
        {region: "East-2", x: 775, y: 115}, <---
        {region: "East-3", x: 923, y: 300},
        {region: "East-4", x: 636, y: 455}
    )

Issue:

• See how "West-1", "West-2", and "East-2" are lined up horizontally in this image YET QUITE DIFFERENT in their Y value above?
• It is more pronounced the further to the right of the screen the Control moves. 
  • 
• To illustrate even more, I put an Icon control directory over "West-2". It's Y value is quite different than the Collection Y value for "West-2" (+~30px).
  •  

Questions: 

• My goal is to translate Lat/Longs to pixels based on the mapsize/screensize but this offset is affecting that translation.
• How are two map pins set to the exact same X, Y in the Collection rendered in different places on the Screen?
• How come the Collection X, Y values don't match the X, Y values of an Icon placed on the screen?

Thanks for your insights!

[wyotim]

While I don't have any help to offer, could I inquire about the "Ol' Gallery with TemplateSize=0" trick? Do you have a link to the post about this? I would love to check it out. If I am understanding what you are doing, it basically allows plotting any points over a surface? Wowza!

If I could also trouble you for more information, how are you translating the Lat/Longs to pixels? I started to look into Mercator projections and Web Mercator a bit before getting thrown into some hectic stuff at work recently. Are you using something like that?

Hope you get the y-coordinate issue resolved soon. The map and pins look awesome!

[mr-dang · Accepted solution]

Hi @ericonline,

Because the templatesize=0 is a trick, you will come across unexpected behaviors. What you are experiencing is that each object really has its Y value offset by n-1 pixels. So the 3rd row in the gallery is 2 pixels off. The 100th record is 99 pixels off.

You just need to set the Y property of the controls to 

-(n-1)

where n is the index of the record (what part of the sequence is it).

[ericonline]

Tell ya what @wyotim... Since I've been meaning to create one... I'll do my first YouTube video tonight on the subject then send you a link. 🙂

[wyotim]

Awesome! I am looking forward to it! While I am sure I am pretty late to the party, discovering more and more of what galleries can do is blowing my mind a bit. Amazing potential there.

[ericonline]

Thank you very much @mr-dang. I'll adjust the overlay logic. I'll also be sure to preface any promotion of this trick so folks know its a "hack" and not necessarily part of PowerApps functionality.

[timl]

Hi @ericonline,

I'd love it if you could send me your YouTube link too 🙂

[ericonline]

Oh yeah! I'll post it up here.. 🙂

[seadude]

As promised: Here is a You Tube video on the topic 🙂

Sample app attached if it helps.

Some caveats:

• Probably shouldn't relay on this in production apps as I don't think its officially supported functionality
• When you change the orientation in your app (File/App Settings/Orientation), the map pins will be affected and you'll need to re-enter the X coordinates.
• You will need to tweak the map pin Y coordinates according to @mr-dang 's advice above to be 100% accurate

Hope this helps inspire some creativity!

[wyotim]

@ericonline/ @seadude   Awesome video! I will definitely be trying this out soon. And I am looking forward to your next one, whenever that may be!