web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Interactive office map
Power Apps
Unanswered

Interactive office map

(1) ShareShare
ReportReport
Posted on by

Ok so I would love to create an interactive office floor plan where you can search for a member of staff/ room/ equipement, and have it display on the map with information.

 

There are some applications like this you can purchase (e.g. OfficeMaps.com) but having one in PowerApps would be even better to intergrate with SharePoint and have as a mobile app etc.

 

Obviously it would need to connect to Active Directory/ Office 365 users. And I have copies of the floor plans so don't need to use Google or Bing maps. So if anyone could point me in the right direction on how to start - i'm sure many others would like something like this for this organisation!

Categories:
I have the same question (0)
  • RandyHayes Profile Picture
    76,297 Super User 2024 Season 1 on at

    Go for it!!

    We do this for equipment.  The trick is you need to create a coordinate system like a geocode for the floor.  That can then be turned into some math formulas for X and Y coordinates of icons overlayed on an image.

    Give it a shot, you might be surprised how easy it is.

    The only trick is the format - viewing on a phone can cause a trip to the eye doctor.

     

    As for the connecting to AD...I doubt that will be relevant to the placement of graphics. But it would be good for getting more details on people and resources.

  • seadude Profile Picture
    1,855 on at

    Hi @Anonymous. I recently posted a video on this. Check it!: https://www.youtube.com/watch?v=SXBCR1Us1Jk

  • RandyHayes Profile Picture
    76,297 Super User 2024 Season 1 on at

    @seadudenice video!  

  • seadude Profile Picture
    1,855 on at

    Right on @RandyHayes. Is that what you were looking for?

  • RandyHayes Profile Picture
    76,297 Super User 2024 Season 1 on at

    @seadudeit's very similar to what we do.  As I mentioned in the first response to @Anonymous we do this today for equipment mapping (we show where equipment is located on an office map).

    So, we're putting a image of a floor plan on the canvas and then overlaying a gallery just like you did for the map video.

    Our challenges were 1) doing a coordinate system that made sense 2) providing an ability to zoom in and out and scroll.

     

    For #1, you know what I'm talking about.

    For #2, did a little trick of splitting the floor plan into multiple images all scaled larger (imagine cutting a square into four quarters and making each the size of the original square - or in many cases, multiple scaled images).  Then recorded this in a table with four additional columns (leftImg, rightImg, upImage, downImage).  Based on that we could diplay an image, know if it had surrounding imaged to "scroll" to and then place navigation arrows on the screen to go to the requested.

    Then, on top of that is the gallery with the information to actually map.

    The challenge was (as mentioned) coming up with a coordinate system (we chose to use a grid system), store the grid location with the equipment data and then to do the math to place the icon, labels, etc. on the proper places.

    A little snip image of it is here. (BTW, there is a black rectangle underneath the image that we place based on if there is no up, down, left, or right. That way the user gets a better feel of the perimeter of the map.)

     

    snip.png

  • stephenJames Profile Picture
    286 on at

    I have been trying to give this a go without much luck. I followed the video and setup a sharepoint list with all the x and y coords of my icons, i even went one step further to add in Height and Width too. I placed all of my icons onto my screen and then went one by one recording the x,y,height and width information. 

    However when i then plug that into the gallery for the x,y,height and width they do not line up .

    Heres some snips to show what i mean. The first picture is the icons placed on the background image, the way i would like them to be displayed. 

    fm1.PNG

     

    The second image is what it looks like in the gallery using the same coords as the top image

     

    fm2.PNG

     

    As you can see the icons are not lining up the way that they should be. Im not sure if something has changed since the video was made. If anyone has a solution to this it would be grealty appreciated. 

  • Community Power Platform Member Profile Picture
    on at

    To be honest I've given up on PowerApps for all projects.

     

    It's a really unstable platform and just not worth the time it takes to make the simplest thing work.

     

    You're better off looking at third party applications.

  • Community Power Platform Member Profile Picture
    on at

    You need to offset the image x / y cords e.g. ThisItem.XCords -3, ThisItem.YCords -3

  • Community Power Platform Member Profile Picture
    on at

    As a follow up to this, adding more objects/markers increases the Y Cord gap. I solved this by adding a sort order numerical column to my underlying data, sorted Gallery, Items by the SortID and then just adjusted the Y cords accordingly (which were also coming from an external dataset - a sharepoint list in this instance but could also be a spreadsheet).

     

    I've used this overlay technique as a seating / floor plan. The layout doesn't change that often (only the people), so this approach is perfect for my needs.

  • stephenJames Profile Picture
    286 on at

    Thanks @Anonymous . I forgot to come back and update on this.

     

    So for my issue i managed to get sorted out. Originally i was using multiple colored rectangles to overlay the map locations. They would be hidden and made visible based on the person selected. 

    I changed from this to a single rectangle gallery overlay that moves position based on the x and y coords defined in the selected persons record. 

    To fix the skew of the box not overlaying with the image correctly was a little work but got it working correctly. When adding in the gallery i noticed that the gallery container has another container inside it. This can been seen via a dashed line outline around the container. I had to make sure that this inner container lined up with the main gallery container. There was a little fiddling and adjustment on stored x , y , height and width numbers. But it all turned out nicely. 

     

    Thank you for your suggestions. 

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 793 Most Valuable Professional

#2
Michael E. Gernaey Profile Picture

Michael E. Gernaey 333 Super User 2025 Season 2

#3
Power Platform 1919 Profile Picture

Power Platform 1919 268

Last 30 days Overall leaderboard