cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
mbutterz
Level: Powered On

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!

11 REPLIES 11
Super User
Super User

Re: Interactive office map

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.
Super User
Super User

Re: Interactive office map

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

Super User
Super User

Re: Interactive office map

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

Re: Interactive office map

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

Highlighted
Super User
Super User

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

 

snip.png

_____________________________________________________________________________________
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.
stephenJames
Level 8

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. 

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. 

mbutterz
Level: Powered On

Re: Interactive office map

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.

Blaze
Level: Powered On

Re: Interactive office map

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

Blaze
Level: Powered On

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.

Helpful resources

Announcements
Better Together’ Contest Finalists Announced!

'Better Together’ Contest Finalists Announced!

Congrats to the finalists of our ‘Better Together’-themed T-shirt design contest! Click for the top entries.

thirdimage

Power Apps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Join THE global Microsoft Power Platform event series

Attend for two days of expert-led learning and innovation on topics like AI and Analytics, powered by Dynamic Communities

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

thirdimage

Microsoft Business Applications Virtual Launch

Join us for the Microsoft Business Applications Virtual Launch Event on Thursday, April 2, 2020, at 8:00 AM PST.

thirdimage

Community Summit North America

Innovate, Collaborate, Grow - The top training and networking event across the globe for Microsoft Business Applications

Top Solution Authors
Top Kudoed Authors
Users online (10,247)