About the project

AR Map is an editor of interactive floor maps for shopping malls and other large venues. An administrator uploads a regular floor plan, outlines the units on it, colors them and gets a map where every store or rental space is a separate object rather than just part of a picture.

The challenge

Almost every shopping mall has a floor plan, but it exists as a drawing or a raster image. You can't click on such a picture, quickly change a tenant in it or highlight a vacant unit. Every change means a designer editing the source file, and turning the plan into an interactive format is a separate job for developers.

We had to build a tool in which the venue manager does this work themselves, with no technical background: upload the plan, mark the units, save. So the main requirement for the interface was that it could be used without instructions.

Where the work begins

The editor opens with an empty canvas and one clear action — "Upload a map". Right below the button are the file requirements: a recommended resolution of 1920 × 768 and JPG, WEBP or PNG formats. This removes most questions before the user has uploaded anything: a scan, a CAD export or a diagram from a presentation will all work.

On the right is the toolbar. We deliberately limited it to five actions, which are enough for all work with the map:

• Select block — a pen used to outline a unit point by point. It can trace a contour of any shape: angled walls, L-shaped halls, island kiosks in the atrium. The tool has additional modes that open from a drop-down menu.
• Change color — fills a unit to separate zones from each other: anchor tenants, the food court, service areas.
• Hide — temporarily removes a block when you need to look at the underlying plan or adjust a neighboring contour.
• Back — undoes the last action so that a mistake while outlining doesn't cost several minutes of work.
• Delete — removes the block from the map entirely.

Multi-floor venues

Shopping malls rarely have just one floor, so floors are placed in a separate panel above the map. Each floor is its own tab with its own plan and its own blocks. A new floor is added with a single button, and when there are many floors the panel scrolls with arrows.

For precise work with contours there is zoom: zoom in, zoom out and a quick return to the original view. Small units near escalators or narrow kiosks in the aisles are easier to outline at a large scale and then check right away how they look on the whole map.

What the finished map looks like

The original plan doesn't disappear: escalators, restrooms, emergency exits and labels from the drawing remain visible on the underlay. On top of it lie colored unit blocks, each with a label. Finding the balance was important here: the highlighted zones should read at a glance but not cover the navigation elements visitors use to find their way around the building.

The result

AR Map turns a static picture into structured data: every unit has its own shape, color and floor. The map can be updated when a tenant changes in a couple of minutes and without a designer, and the marked-up units can then be used wherever the venue needs them: in visitor navigation, in a vacancy map for the leasing department or on the mall's website.