The latest articles on DEV Community by Vladislav Popov (@devladpopov). https://dev.to/devladpopov https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3983922%2F557d1681-43a2-4b2e-9f96-7d6595ceab29.jpg https://dev.to/devladpopov en Vladislav Popov Mon, 15 Jun 2026 09:28:02 +0000 https://dev.to/devladpopov/building-a-marine-chart-parser-in-typescript-parsing-binary-formats-topology-and-iho-symbology-372n https://dev.to/devladpopov/building-a-marine-chart-parser-in-typescript-parsing-binary-formats-topology-and-iho-symbology-372n <p>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.</p> <h3> The Challenge </h3> <p>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.</p> <h3> What I Built </h3> <p>A monorepo of 7 TypeScript packages:</p> <p><strong><code>@s57-parser/iso8211</code></strong> - Pure ISO 8211 binary parser. The hardest bug: two binary field notations (<code>b15</code> = suffix meaning signedness+bytes, <code>B(40)</code> = parenthesized meaning bits) that look almost identical but parse completely differently.</p> <p><strong><code>@s57-parser/s57</code></strong> - 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 (<code>rcnm * 100000 + rcid</code>) to avoid collisions.</p> <p><strong><code>@s57-parser/s101</code></strong> - 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.</p> <p><strong><code>@s57-parser/s52-render</code></strong> - 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.</p> <p><strong><code>@s57-parser/leaflet</code></strong> and <strong><code>@s57-parser/maplibre</code></strong> - Plugins for the two most popular web mapping libraries.</p> <p><strong><code>@s57-parser/cli</code></strong> - CLI tool to inspect and parse S-57/S-101 files from the terminal.</p> <h3> Numbers </h3> <ul> <li>~5100 lines of TypeScript</li> <li>127 tests across 8 test files</li> <li>0 runtime dependencies (core packages)</li> <li>Parses a typical NOAA harbor chart (2320 features) in ~800ms in the browser</li> <li>160+ S-101 feature types in the catalogue</li> <li>MIT license</li> </ul> <h3> Try It </h3> <p>Live demo (Boston Harbor, NOAA US5MA12M): <a href="https://devladpopov.github.io/s57-parser/" rel="noopener noreferrer">https://devladpopov.github.io/s57-parser/</a><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install</span> @s57-parser/s57 @s57-parser/s52-render </code></pre> </div> <p>Download free NOAA charts from charts.noaa.gov, drag-drop onto the demo viewer.</p> <p>GitHub: <a href="https://github.com/devladpopov/s57-parser" rel="noopener noreferrer">https://github.com/devladpopov/s57-parser</a></p> typescript opensource gis webdev