Firstly, this is what it looks like for me, but bear in mind you will be supplying the background image, and choosing the icons you want to use for the ‘people’ entities yourself. I chose one named ‘torso’

Pretty basic looking, Although if you hover over someone you also get their details which are updated from Active Directory

There is two systems working together to bring this up.

Firstly a Visio Web Drawing, that is linked to a spreadsheet in SharePoint, stores the floor plan image and icon locations and popup content. Its displayed on a web part page with a little bit of hidden JS on the side to display the popups.

Behind the scenes I also have an application that periodically polls Active Directory for user information and updates the spreadsheet.

How to do it.

Firstly you need to create some data and put it into a SharePoint document library. if you want you can skip this step and come back to it later, just create a dummy XLSX file with data in it like so. Call it OfficePlanData.XLSX

SpaceID

Name

Title

Phone

a1026

user A

demo title

2349

a1020

User B

demo title

7151

a1031

User C

demo title

8004

a1028

user A

demo title

3429

a1027

User B

demo title

5339

a1025

User C

demo title

3188

You may want to do this another way, perhaps maintain this file manually, or export data from AD manually etc. I didn’t so I wrote a tool that would take details out of AD, store them in a xlsx file, then upload that to the document library every 60 minutes

Here is the source code to the vb.net project I built (VS2010) that takes user name, title, phone number and extensionattribute1 from AD. (Extension Attribute 1 is storing a unique ‘location’ ID that I call ‘SpaceID’) and upload it to the document Library

It is a console application, requires office 2010 to be added as a service reference. You could easily re-write it to use a different office version I am sure.

I have compiled this as a console application then used task scheduler to run it every hour. you could quite easily also create a service and user your own system.timer if you prefered.

So I am going to assume you now have a xlsx file called officeplandata sitting in your document library which is in the root of your site, and is called ‘floorplan’

open up Visio 2010, first thing we need is the background image, personally I found it was easiest to set the floor plan image as a jpg in the background instead of an image on the page as it means it won’t get in the way when placing other objects on top of it. To do this, add a generic background, then overlay your image on the second tab of the document like so.

You will want your image to be the same aspect ratio as the document (eg letter/a4) so it consumes the entire page.

Now link your data to the xlsx spreadsheet we created earlier. Go to the Data tab, click on Link Data to Shapes, and select Excel Workbook, and link it to the URL of the excel file

Click Next, choose ‘SpaceID’ as the unique Identifier, and finish.

If you have done everything correctly you should now be looking at your blank floor plan with a list of users on the right, something like this.

Flick back to Page-1 if you have not already, search an appropriate icon for your people, as you can see I am using ‘torso’

select the icon, so that its highlighted as you can see above, then drag someone from the right, (the linked data) onto the plan. This will create the shape that is highlighted and link it to the shapeID with all the users details. I have remove the Data Graphics as I found they were too much. to do this, select all icons, then click ‘Data’ from the Ribbon, Data Graphics, then ‘No Data Graphic’

Save the document as a Visio Web Diagram and upload it to the document library.

Assuming you have SharePoint set up correctly you could view the VDW as is and it would show you all the people, but nothing happens when you hover over anyone. Almost there!

Now create a new web part page in the document library, I suggest a Full Page, Vertical

Add a Visio Web Access web part (Under Business Data),

and link it to your VDW file

Now create a text file somewhere and paste this into it, save it as floorplan.js or hover.js or whatever you please.