How Baidu’s Web Map Engine Evolved Over a Decade: From Tiles to WebGL

In 2009 Baidu launched its own web map engine. Over the following decade, front‑end technologies continuously advanced and Baidu engineers iteratively optimized the engine, making it more powerful and improving user experience.

Web Engine 1.0

By 2009 AJAX was mature, enabling complex interactive web applications. The map, a heavy‑interaction product, relied heavily on AJAX.

The core capabilities of the map engine include:

Rendering map images.

Overlaying points, lines, polygons and other layers.

Supporting drag, zoom, and click interactions.

Map Image Implementation

Map images are divided into tiles; each tile is rendered on the server.

During initialization the center point and zoom level determine which tiles are needed for the current viewport.

Overlay Implementation

Overlay elements are categorized using HTML tags.

Layer and overlay containers are illustrated below:

Different overlay stacking orders are shown.

Markers and labels use traditional DOM methods; polylines and polygons use SVG or VML. When a line contains many points, browser performance degrades, so two optimizations are applied:

1. Line Point Thinning

Thinning reduces point count while preserving shape, using level‑dependent thresholds.

Four major zoom levels share the same thinning parameters, allowing cached results.

2. Line Clipping

After thinning, long lines may still have excess points when zoomed out. Only the visible segment within the viewport is rendered, clipping the rest.

This combination of thinning for overview and clipping for detail keeps rendering points minimal.

Line Interaction Issues

For PC map driving navigation, users can drag route segments to adjust waypoints. Initial attempts using mouseover, mousemove, and mouseout on SVG/VML elements caused jitter because the exact intersection point was ambiguous.

The solution listens to mousemove on the document, computes the shortest distance from the cursor to each line segment, and places a small circle at the nearest point.

Problems with Engine 1.0

Tile images are server‑rendered, limiting front‑end flexibility.

DOM‑based overlays perform poorly with large numbers of elements.

Mobile users on 2G experience slow loading, especially with 2× Retina images.

Web Engine 2.0

To address slow loading on mobile, Baidu switched to vector data rendered with the Canvas 2D API. Vector data is smaller and independent of screen pixel density, reducing network and rendering time.

The approach was presented at the 2014 Velocity conference.

When ported to PC, the canvas solution performed worse because PC users typically have fast Wi‑Fi; the front‑end rendering added overhead and lacked some advanced capabilities. The hybrid solution kept server‑rendered tiles for imagery while using vector data for text.

Benefits of vector text include smooth movement during zoom and the ability to change color on hover, enhancing interactivity.

Problems with Engine 2.0

The visual gap between the 2.0 engine and client‑side OpenGL engines remained noticeable.

Web Engine 3.0

With WebGL becoming mainstream and browsers gaining performance, Baidu rebuilt the engine using WebGL.

Since WebGL renders only triangles, map elements are triangulated and uploaded to buffers for drawing.

Additional technologies employed:

WebWorker for data loading and parsing, keeping the main thread responsive.

WebAssembly for fast triangulation of raw data.

ImageBitmap as texture source to reduce texture creation time.

A state‑machine refactor of interaction code, supporting keyboard, mouse, touch screen, and touchpad inputs.

The new engine supports:

Seamless zoom.

Tilt and rotation.

3D elements such as buildings, overpasses, and pedestrian bridges.

Indoor maps.

Multiple map styles.

Extended zoom level range.

Touch gestures for screens and touchpads.

The updated engine is now widely used across Baidu Map products and is available via the open platform for developers to build richer map applications.