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

Re: Interactive office map

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.

Re: Interactive office 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.

Re: Interactive office map

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

Re: Interactive office map

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.

Re: Interactive office map

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.