Skip to main content

protomaps.js Overview

Protomaps.js is a vector map renderer for the web. It's available on GitHub under a permissive, BSD 3-Clause License. Its key features include:

  • It renders vector tiles following the MVT specification, supported by tools like PostGIS.
  • It displays labels for point, line and polygon features.
  • It handles tile fetching and caching, label collision, and labels across tiles.
  • The rendering of features and labels is controlled via a style specification.

protomaps.js is not...#

  • It is not a continuous-zoom system. It displays map tiles at discrete integer zoom levels.
  • It is not a 3D renderer. Protomaps.js is focused on rendering 2D maps from OpenStreetMap data.
  • It is not based on WebGL. It instead uses the web-standard Canvas drawing API.

If your use case demands a continuous-zoom, WebGL-powered, 3D webmap renderer, look at Alternate Renderers for Protomaps data and APIs.

protomaps.js is...#

  • Fast. It aims to offer the same user experience as traditional raster slippy maps, but with full client-side customization and device-native resolution.
  • Simple. It is single-threaded and less than 20kb minified and gzipped.
  • Easy to integrate. It is simply a tile layer in a Leaflet map, letting you develop with the entire ecosystem of Leaflet plugins.
  • Flexible. Protomaps.js is written in TypeScript. Instead of customization via JSON or XML, map symbology is extensible at runtime by implementing your own Symbolizers.

Technical overview#

Protomaps.js works in two passes.

  • The first pass, called paint, takes a list of paint rules and draws features to the canvas. The order of rules determines how geometry is painted from back to front; for example, a rule for road tunnels should come before a rule for bridges.
  • The second pass, called layout, takes a list of layout rules; for each rule, it determines the layout objects that match, calculates their bounding box, and tests their insertion into a spatial index. If the object fits, it creates a closure that is executed later to draw on a canvas.

a Rule is a combination of a data layer name, a filter and a Symbolizer.

More coming soon...