LINE Engineering
Blog

Floor map management system on web, with Leaflet

2018.04.03

LINE Japan's office relocated in April, 2017 to JR Shinjuku Miraina Tower to accommodate its growing number of staff. At the time of relocation, the IT support department introduced a number of new systems into the company. One of those is the LINE Floor Map system which I am going to share with you in this post.

Background story

Before we moved to Shinjuku, we used to manage our floor map with Microsoft Excel. Here is a part of the excel file. (We've erased names off from the screenshot.)

Suppose we wanted to locate Alice. We would download, open up our floor map file—either an excel or PDF file—enter the name 'Alice' in the file viewer's search bar. What an endeavor! This was far too inconvenient. Many of Liners had complained about this, but due to various reasons, we had to keep using it as it was. However, the management cost for the Operations team was hiking due to the increasing number of members joining LINE. The most troublesome elements were that it was hard to merge excel files modified by so many people into one and that people don't inform the Operations team of changing seats to begin with, damaging the credibility of the floor map.

To solve these issues, we concluded that we needed a web system that allows users to change their seat information themselves. We initially thought of using an existing system, but we had no luck in finding the right one; they didn't satisfy our needs or were too expensive or used Flash. In the end, we decided to build our own floor map system.

Requirements

When we were establishing the requirements of this system, the following requirements had the highest priority.

  • The Operations team shall be able to edit the layout on their own. (We frequently experience seat rearrangements.)
    • Layout shall be changeable without having to change any HTML code. The Operations team may have no background in coding.
  • User information shall be easily editable.
    • When someone has moved, anyone shall be able to change the user information of the particular seat.
  • Searching shall be easier than on Excel.

In establishing these requirements, the most pain-in-the-neck issue was managing the layout. At first, I wanted to utilize the layout used in the Excel file. But, the layouts in Excel were composed of so many shape entities and it was hard to get coordinates off from them. Which led me to give up the idea. However, the Operations team had been so used to editing the layouts using Excel. I had to manage somehow to make use of the information in the Excel file. So, what I did was capture the layout image from the Excel file, place the captured image as a background of web page, and make it available for admins to configure seat areas by setting coordinates.

Now, for user roles of the system. I've set only two roles; general users who can edit seat information and administrators who can edit both seat information as well as layouts. For searching, you could only search for names with Excel files, but some teams call their members with their nicknames, so we made nicknames also searchable on our new system.

Implementation

The system did not require many resources, so it was only I who was assigned to this project. However, I didn't have much experience in JavaScript nor had I enough time, I had to look for a JavaScript library for map apps. Leaflet was the one I decided to go with.

What is Leaflet?

Leaflet is a JavaScript library for making web-based maps on mobile and PC browsers. In 2011, v0.1 was released, in September 2017, v1.0 was. At the time of writing this post, which was December 2017, the latest version was v1.2. The library provided so many features that would satisfy all the requirements we had, and it was quite easy to use. Their documentation was well prepared. If you have ever used the Google Maps API, you will pick up Leaflet pretty quickly, as they two share some similarities.

Leaflet for floor map

Here is a simple example of using Leaflet.

<!DOCTYPE html>
<html>
<head>
    <title>Floor Map Example - Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
    var map = L.map('map', {crs: L.CRS.Simple});

    var bounds = [[0,0], [480,640]]; // Set the image resolution as the boundary
    L.imageOverlay('seat.png', bounds).addTo(map); // Set the background image

    L.circle([170, 170], {color: 'green',radius: 35}).addTo(map)
    .bindTooltip("iwatsuki", {permanent: true, direction: 'center'}).openTooltip()
    .bindPopup("iwatsuki <br />IT Support Department");

    L.circle([170, 290], {color: 'green',radius: 35}).addTo(map)
    .bindTooltip("Name A", {permanent: true, direction: 'center'}).openTooltip();

    L.circle([170, 410], {color: 'green',radius: 35}).addTo(map)
    .bindTooltip("Name B", {permanent: true, direction: 'center'}).openTooltip();

    L.circle([60, 170], {color: 'green',radius: 35}).addTo(map)
    .bindTooltip("Name C", {permanent: true, direction: 'center'}).openTooltip();

    L.circle([60, 290], {color: 'green',radius: 35}).addTo(map)
    .bindTooltip("Name D", {permanent: true, direction: 'center'}).openTooltip();

    L.circle([60, 410], {color: 'gray',radius: 35}).addTo(map)
    .bindTooltip("Name E", {permanent: true, direction: 'center'}).openTooltip();

    map.fitBounds(bounds); // Set an area
</script>
</body>
</html>

If you open this HTML code in a web browser, you will see something like the following. What do you think? Does it look like a floor map?

To show whom the seat belongs to, I used Leaflet's tooltip. If you set the permanent attribute of a tooltip to true, then the tooltip will be displayed, even without a user action like mouse hover, allowing you to see the names just as you did on Excel or PDF files. Without implementing it yourself, you can make the map scrollable with a mouse and enable zoom using the '+' and '-' buttons at the top left corner or with a mouse. The following screenshot shows what you would see when you click the circle labeled 'iwatuski'. We've added team name, picture and contact number information, which you can easily do by using Leaflet's popup.

Moving on to searching. You can define areas on a map using Leaflet's map.fitBounds(bounds) method. If you make an API in the backend, returning coordinates for a given keyword, you get yourself a neat search feature.

Another feature to implement was a floor indicator. The Tokyo office is located from 15th floor to the 23rd, and we used Leaflet's layers to implement this. The following code example adds a button for changing the current layer, and selecting a floor from '21F', '22F' and '23F'.

var map = L.map('map', {crs: L.CRS.Simple});

var bounds = [[0,0], [428,608]];

var baseMaps = {
  "21F": L.imageOverlay('21F Image Link', bounds),
  "22F": L.imageOverlay('22F Image Link', bounds),
  "23F": L.imageOverlay('22F Image Link', bounds)
}
L.control.layers(baseMaps).addTo(map);

map.on("baselayerchange", (event) => {
  console.log(event.name); // Print out the new current floor
  // Handle floor change
});

map.addLayer(baseMaps["15F"]);
map.fitBounds(bounds);

You can easily obtain coordinates related to the events such as mouse click or hover, and there are many other convenient APIs such as handling objects in groups. See Leaflet's documentation for more information.

Outcome

For the frontend of the system, I used Angular 4 and Rails 5 as API for the backend. I'll skip going into this, there weren't any special thing to note. The following screenshot is a part of the floor map system implemented.

The part of the popup card pixelized contains the name, organization information, picture and the mail address of the person allocated to the seat clicked. You can see two buttons at the top left corner of the card; the red eraser button lets you delete the user information and the clip button enables you to copy a permalink of the seat information. Anyone can allocate anyone to a seat, but we've put a preventive measure; when someone changes the user information of a seat, an email gets sent automatically to the original owner of the seat.

The system supports all the tasks that had been available on Excel file, including searching people as well as meeting rooms and facilities. If you ask me if I am satisfied with the outcome, then I'd say yes, in terms of features the system provides. In terms of look and feel? That's a different story. I think we could do better. I guess the people in the Fukuoka office felt the same, as their map looks much more 'professional' than the one for Tokyo.

It looks much nicer, doesn't it? If you are wondering why there are no labels (that is, the tooltips) indicating seat owners, I've made them disappear if the map gets zoomed in over a certain level, because if you zoom out too much, tooltips overlap with each other. By the way, I've implemented a memo to be added to seats to contain additional information, for example, indicate if the seat is for a new employee, or just for temporary use and so on. And, of course, these additional information can be searched for. Speaking of searching, you can use smartphones to access our floor map system and search.

Overall thoughts

This project on the new floor map system started off to lighten up our Operations team's load. I believe the outcome of this project was extremely successful. Many of the feedbacks I've got are very positive, and am glad that the system is somehow contributing to internal communication. There has been no problem in having no permission restriction in changing seat information. It'd be so wonderful to end our story here, but there is a remaining shortcoming in the system; simulating seat changes became difficult. If we were to simulate changing seats on Excel, it required only a few edits. Now, we have to copy and paste seat blocks on a blank Excel file. We do have a space for improvement, but I hope this post could be of help to those who are struggling with managing seats and searching for seats with Excel.

AdventCalendar Leaflet Floor map Map API JavaScript Map

2018.04.03

Add this entry to Hatena bookmark

Back to blog list