Vehicle Training Map Editor

Project overview

This was a tile-based map editor for vehicle-training environment designers. Users could configure map dimensions, place tiles such as roads, barriers, and vehicles on a grid, and import or export map files for use in other company products such as driving simulators.

As the sole frontend engineer, I independently designed and implemented the client-side editor. The interface and interactions were built with Vue and Quasar, while SVG was used to render the grid and individual map tiles.

Viewport-based rendering

The editor was tested with maps up to 1,000 × 1,000 cells, representing as many as one million potential grid positions. Maps could also have extreme aspect ratios that could not be displayed in full.

Instead of creating SVG nodes for the entire map, the editor calculated the active viewport and rendered only the visible area with approximately 10% overscan. This controlled rendering costs while preserving continuous navigation and editing.

Rectangle placement tool

Roads and barriers often needed to cover large continuous areas. A rectangle placement tool allowed users to fill a selected region with the same tile instead of editing every cell individually.

Adjustable spatial resolution

Users could adjust the grid resolution when more precise placement was required. For example, an area originally edited at one-meter intervals could be refined to support half-meter placement.

Outcome

The project reached an initial demo and was provided to target users for approximately one week of trial use. Early feedback on the editing experience and overall product was positive. Because the observation period was limited, this case study makes no claims about long-term adoption or final business metrics.