Create an interactive office map

Over the past couple of years, the number of employees of our company has almost tripled and is now approaching three hundred. This entails a number of organizational problems. In particular, due to the fact that the company occupies many different premises in the business center, the issue of orientation of employees (especially for newcomers) in the office space is acute.

Every day we are faced with the problem "How to find Vasya in the office?" or, on the contrary, we are tormented by the question "What is the name of the guy who sits in that corner?" In the end, a couple of enthusiasts decided to put an end to this. Thus began the story of developing an interactive map of our office. We will talk about this today.

The idea of ​​the card was born about a year ago, and development is intermittent, since this is done, mainly, after hours, "purely for the fan." However, now the card makes life in the office much easier. At the moment, it looks like this.

Developers initially suggested the following map usage scenarios.

  1. Search for a workplace of a colleague. There is a line for searching, the name of the necessary colleague is “driven in” (you can search by name, but we have too many namesakes), and the location of his workplace is shown on the map.
  2. Identification. If a person has recently been working in a room and has not yet managed to learn the names of neighbors, he can find his room on the map and, clicking on a particular table, find out the name of the person who is occupying it.
  3. Navigation. Sometimes explaining exactly where in the office you sit is not an easy task. To facilitate it, it was supposed to realize the ability to send a link to your location - . When you click on it, the card scrolls to the desired floor and room, showing the desired workplace.

Currently, all three scenarios are implemented.

They initially decided to make a map using the Yandex.Maps API. All that was required of the map, the Yandex.Map API allowed: upload your image, do basic work with the map (“zoom”, move) and implement work with objects on the map. Dropbox was originally chosen as a means of collaboration on the project, since changes to the code did not occur often. At first it seemed that a version control system was needed, but later on it was no longer needed. Now the development is one person.

As a result, the card should have been placed on the corporate portal.


But everything happens smoothly only on paper, and already at the first stage of map development we ran into a serious problem. It was possible to get a plan of only one floor, so in the first version of the map there was only him. Schemes for the remaining floors later had to be drawn independently: they will appear in the next version of the map.

In addition, after the start of development, it became clear that people very often move from place to place, and keeping the map up to date is not easy; the process of updating the coordinates of employees is facilitated in the new version of the map.


Initially, data was applied to the map manually. First, an Excel file with a list of all employees (from the floor for which there was a plan) was downloaded from the corporate portal, which was then converted to CSV with the necessary fields: last name, first name, position, email address of the employee. After that, the coordinates of the table on the map were added to the CSV file. This file played the role of a database from which a JavaScript array was formed using a Python script with user data.

Since the card was implemented in a static version, it could only be viewed in read-only mode; the possibility of “moving" an employee from place to place was not initially taken into account.

New map

After the first version was released, and we began to collect the “Wishlist” of colleagues, Yandex significantly updated its mapping API. We decided to make the new version already with moving to API version 2.0.

I had to deal with him and make a new version of the map. As a result, the following updates were implemented.

  1. The missing floors were added: we independently drew the diagrams for the necessary floors, after which we added them to the map.
  2. We changed the work with tables and employees, separating the concepts of “employee” and “table”. Previously, the table-employee relationship was tough, and in order to swap two colleagues, you had to physically move the tables on the map. Now it’s enough to indicate that another person is sitting at the table: you don’t have to move the tables.
  3. In addition, the mechanism of working with tables was noticeably simplified: we abandoned the static map and made a simple web application. This allowed you to automatically save the position of the tables and the position of colleagues at the tables.
  4. In the new API, the card’s work is not tied to a domain, which allows you to organize work on two (or more) domains (not only , but also portal / map ).


Work on improving the map does not stop, there are many ideas. Here are the most interesting of them.

  1. Adding new entities. There are many interesting things in the office: canteens, coffee machines, “meeting rooms”, places for stand-up meetings ... It would be useful to put all this on a map.
  2. Integrating the card with Active Directory and Exchange would provide a lot of useful features. It would be interesting to upload data about an employee from Exchange (for example, his schedule). Combining the employee’s timetable data with the meeting room employment schedule, you can display information on the employee’s workplace on the map (whether he is in the place, and if not, in which of the “negotiations” to look for him; this would be especially useful in the case of managers).

This is how an interesting side project of a group of enthusiasts inside the company grows into a service that is useful to every employee. By the way, the project is perfectly portable and scalable, which is especially important for our company in anticipation of moving to a new office. To start the map in a new place, you just need to upload a new floor plan and re-“seat” the employees.

We will be happy to answer your questions in the comments. If this will be interesting to the Habrasociety, in the next article we can describe the technical details of the project.

By the way, authors and developers of the map are present on Habré: Mike ozornin and evgekon .