XING Locator: an interactive floor plan using Rails and Leaflet.js
You might know the situation: you are looking for a colleague, but you are new to the company or don’t know where to find him? Or you have a meeting soon, but not quite sure where the room is?
Luckily, we can build software to solve these problems and we did just that! I would like to show you a cool internal tool we developed at XING during our great HackWeek. It’s called the XING Locator, and it helps to get around the office and maintain an overview of who works where. We think this can help new employees as well as the veterans to find out where to reach people in person if necessary, especially since the number of employees and locations keeps growing constantly.
Think of it as Google Maps for the office building to find people, meeting rooms, or special points of interests across XING offices.
Features
At first, let’s give you a tour of the features, so here is what you are greated with when logging into XING Locator…
Once you log in and pick a location, you will see the floor plan on a map with pan and zoom features. Zoomed out, we show an overview of the office with the different sections of the building (what is shown at certain zoom levels can be configured in our admin area).
Zooming in, desks are placed on this map and clicking on them will reveal who is sitting there. Meeting rooms and other points of interest will display a popup with additional information.
If a desk is not yet occupied, you can mark it as your own. Even if it was occupied, you can still overrule the current layout and kick the person from their seat. So if you see a free desk which is actually occupied, you can do the work and place people yourself. This ensures everyone is able to keep the map up-to-date.
Search
Ever wondered where the Kicker-Table is or where to find office supplies?
The top-right corner shows a search box you can use to find people by name (see Figure 1). It also searches room names, points of interest, and names of certain areas on the floor plan. It works across multiple floor plans and offices. By picking a result from the dropdown you will jump to the location and see it on the map.
Admin-mode
As the company keeps growing, new locations might pop up. Great, these can be easily added to the system.
As an administrator, you can upload new floor plans and add new desks, rooms, and points of interest. Existing desks can also be moved around the map once you switch to the edit mode.
The name, icon, description, and other options can be edited simply by clicking the edit icon in the details dialogs. For example, a section can be be color -coded and can either show a tooltip on hover or not.
Additionally, the map has multiple layers that can be shown or hidden. For example, a layer showing POIs could be setup to only show on a certain zoom level. This feature is also used to display the sections of a building once you zoom all the way out and hide them close up.
Meeting room availability
Wondering where the next free meeting room is and how long it will be unoccupied so you can hop in for a moment?
Even that is possible, since meeting rooms are connected to our internal room booking system, so the status of the meeting room is displayed on the map.
Depending on whether the room is free or occupied, it either gets a green or a red icon. Clicking on the icon reveals a popup with more information. For example, whether there is a projector or video conferencing system available.
Technologies used
The application uses Rails 5 and is based on LeafletJs for the map interactions in the front-end. We use PostgreSQL for our database with its excellent postGIS extension to save and index location data efficiently. The activerecord-postgis-adapter is used to get the required postGIS features play well together with Rails.
Users login through LDAP, so nobody has to remember another password and can just use their existing internal account credentials. We use the net-ldap gem to accomplish this.
The actual floor plans are uploaded and saved as PNG images. Even though vector images would be really nice for maps like this, a simple PNG is a little easier to work with, since not all our floor plans existed in vector format in the first place. In order to resize, convert, and save the images properly in a way LeafletJs expects, we use ImageMagick (with the RMagick gem).
Other than the above dependencies, the tool is pretty much a standard Ruby on Rails application.
Using custom maps with pixel-coordinates in LeafletJS
Usually a large map covering the surface of the Earth makes use of geographical latitude and longitude and converts them to coordinates using a map projection in order to display the map on a screen. The most common map projection found on the web is the Mercator Projection.
However, since we are dealing with maps not larger than the surface area of a building, we can neglect the distortion caused by the curvature of the Earth, so simple pixel-coordinates of the underlying map image are much more convenient.
Luckily, leaflet supports multiple coordinate referencing systems. The one that fits our needs is provided already with LeafletJS and is called CRS.Simple. A detailed explanation on how to use it can be found in their tutorial: “Not of this Earth”.
Live map updates using ActionCable
Wouldn’t it be really cool if the map would update a room status while using it? Well, sounds like a nice HackWeek challenge.
It was surprisingly simple to add live updates to the map leveraging what Rails already brings to the table with ActionCable.
For example, to update that a user has claimed a desk, we just broadcast a message to an ActionCable channel in the backend.
Ideas for further improvements
The tool already works quite well, but as with most projects, we have some ideas to make it better.
While the performance in the client is good enough, it actually gets quite CPU heavy once you add very many points of interest to the map. One way to make this better is to only load what is currently in the viewport (the map’s bounds) and load the rest on the fly when panning and zooming.
Furthermore, it would be nice to actually display a highlighted route from your desk to the person or POI you were looking for. Sometimes it is hard to keep track of your location relative to your destination when zooming out and panning around, so that would be a helpful feature.
