Showing results for 
Search instead for 
Did you mean: 
Helper I
Helper I

Interactive office map

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. 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!

Super User III
Super User III

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.

Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!
Memorable Member
Memorable Member

Hi @mbutterz. I recently posted a video on this. Check it!:

@seadudenice video!  

Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

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

@seadudeit's very similar to what we do.  As I mentioned in the first response to @mbutterz 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.)



Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

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. 



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




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. 

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.

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

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.

Helpful resources

PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!


Are Your Ready?

Test your skills now with the Cloud Skill Challenge.


Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Top Solution Authors
Top Kudoed Authors
Users online (71,078)