Skip to main content

Chartlet

A TypeScript library for rendering S-57 (ENC) nautical charts in Leaflet using MapLibre​

Chartlet (ChartX for Leaflet) is a Leaflet plugin that brings the power of ChartX into the Leaflet ecosystem. It uses MapLibre GL JS via the maplibre-gl-leaflet bridge to render S-57 Electronic Navigational Charts (ENCs) while preserving the familiar Leaflet API and workflows.

⚓ Built for maritime, port, and coastal applications such as VTS dashboards, navigation tools, and situational awareness systems that rely on Leaflet but require advanced ENC rendering.

Architecture​

Leaflet Map
   ↓
maplibre-gl-leaflet
   ↓
MapLibre GL JS
   ↓
ChartX
   ↓
ENC Rendering (S-57)

Chartlet acts as a bridge, allowing ChartX to render charts while Leaflet continues to manage UI, overlays, and interactions.

Features​

  • 🗺️ Render S-57 ENC charts inside Leaflet
  • ⚡ GPU-accelerated rendering using MapLibre vector layers
  • 🔌 Seamless integration with existing Leaflet maps
  • 🎨 Full ChartX styling and symbology support
  • 🔍 Scale-aware rendering and decluttering
  • 🧭 Multi-chart (multi-cell) support
  • 🔄 Dynamic chart loading and unloading
  • 🖱️ Feature querying and click interactions
  • 🧩 Works alongside Leaflet layers, markers, and controls

Requirements​

  • leaflet^1.9.4
info

Requires a compatible version of chartx-server to read, process and serve ENC cells along with required symbology assets.

note

ChartX uses the Noto Sans Regular and Quantico Regular font families for rendering text labels. If you are providing a custom glyphs URL in your MapLibre style, ensure that these font stacks are available on your glyphs server.

tip

You may use the glyphs endpoint provided by chartx-server, which comes prepackaged with the required fonts and works out of the box.