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.
- 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.
- 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.
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...