DEV Community

Vladislav Popov
Vladislav Popov

Posted on

Building a Marine Chart Parser in TypeScript: Parsing Binary Formats, Topology, and IHO Symbology

Every commercial vessel on the planet uses electronic navigation charts (ENC) in S-57 format. Despite this, there has never been a working JavaScript parser for these charts. I set out to change that.

The Challenge

S-57 files use ISO 8211, a binary format from 1994. The data is stored as variable-length records with mixed binary and text fields. Coordinates are integers scaled by a multiplication factor (typically 10 million). Geometry uses chain-node topology where polygons are assembled from shared edges.

What I Built

A monorepo of 7 TypeScript packages:

@s57-parser/iso8211 - Pure ISO 8211 binary parser. The hardest bug: two binary field notations (b15 = suffix meaning signedness+bytes, B(40) = parenthesized meaning bits) that look almost identical but parse completely differently.

@s57-parser/s57 - S-57 data model. Resolves chain-node topology: each Edge references start/end ConnectedNodes via VRPT records. Different spatial record types can share the same RCID, so I use compound keys (rcnm * 100000 + rcid) to avoid collisions.

@s57-parser/s101 - Parser for the next-generation S-101 format (mandatory from 2029). Fun fact: S-101 uses ISO 8211, not GML/XML as many assume. My ISO 8211 parser handles both formats.

@s57-parser/s52-render - Canvas2D renderer implementing IHO S-52 symbology: 3 color palettes (Day/Dusk/Night), conditional depth coloring, sector light arcs, pattern fills, text labels with light characteristic abbreviations.

@s57-parser/leaflet and @s57-parser/maplibre - Plugins for the two most popular web mapping libraries.

@s57-parser/cli - CLI tool to inspect and parse S-57/S-101 files from the terminal.

Numbers

  • ~5100 lines of TypeScript
  • 127 tests across 8 test files
  • 0 runtime dependencies (core packages)
  • Parses a typical NOAA harbor chart (2320 features) in ~800ms in the browser
  • 160+ S-101 feature types in the catalogue
  • MIT license

Try It

Live demo (Boston Harbor, NOAA US5MA12M): https://devladpopov.github.io/s57-parser/

npm install @s57-parser/s57 @s57-parser/s52-render
Enter fullscreen mode Exit fullscreen mode

Download free NOAA charts from charts.noaa.gov, drag-drop onto the demo viewer.

GitHub: https://github.com/devladpopov/s57-parser

Top comments (0)