Skip to main content

​
ENC Chart Data

Electronic Navigational Charts (ENC) are the digital standard for maritime navigation. CHRT provides seamless access to official ENC data through modern web APIs.

​
What are ENC Charts?

ENC charts are vector-based nautical charts that follow the S-57 international standard. They contain rich, structured data about:

Navigation Aids

Buoys, beacons, lighthouses, and other aids to navigation

Depth Information

Soundings, depth contours, and underwater obstructions

Coastal Features

Shorelines, ports, marinas, and coastal structures

Traffic Areas

Traffic separation schemes, anchorages, and restricted areas

​
Chart Tile API

Access ENC data as map tiles optimized for web and mobile applications.

​
Basic Tile Request

GET /enc/tiles/{z}/{x}/{y}.png
​
z
integer
required
Zoom level (0-18)
​
x
integer
required
Tile X coordinate
​
y
integer
required
Tile Y coordinate

​
Example Implementation

// Using fetch API
const tileUrl = `https://api.chrt.com/v1/enc/tiles/12/1024/1024.png`;
const response = await fetch(tileUrl, {
  headers: {
    'Authorization': 'Bearer chrt_pk_live_...'
  }
});

// Use as image source
document.getElementById('chart').src = tileUrl;

​
Map Integration

CHRT tiles work seamlessly with popular mapping libraries:

​
Leaflet Integration

// Add CHRT ENC layer to Leaflet map
const chrtLayer = L.tileLayer('https://api.chrt.com/v1/enc/tiles/{z}/{x}/{y}.png', {
  attribution: '© CHRT | Chart data © IHO',
  maxZoom: 18,
  headers: {
    'Authorization': 'Bearer chrt_pk_live_...'
  }
});

const map = L.map('map').setView([37.7749, -122.4194], 12);
chrtLayer.addTo(map);

​
Mapbox GL JS Integration

// Add as raster source in Mapbox GL JS
map.addSource('chrt-enc', {
  type: 'raster',
  tiles: ['https://api.chrt.com/v1/enc/tiles/{z}/{x}/{y}.png'],
  tileSize: 256,
  attribution: '© CHRT | Chart data © IHO'
});

map.addLayer({
  id: 'chrt-enc-layer',
  type: 'raster',
  source: 'chrt-enc'
});

​
Google Maps Integration

// Custom tile overlay for Google Maps
class CHRTTileLayer {
  getTileUrl(coord, zoom) {
    return `https://api.chrt.com/v1/enc/tiles/${zoom}/${coord.x}/${coord.y}.png`;
  }
}

const chrtLayer = new google.maps.ImageMapType({
  getTileUrl: (coord, zoom) => {
    return `https://api.chrt.com/v1/enc/tiles/${zoom}/${coord.x}/${coord.y}.png`;
  },
  tileSize: new google.maps.Size(256, 256),
  name: 'CHRT ENC'
});

map.mapTypes.set('chrt-enc', chrtLayer);
map.setMapTypeId('chrt-enc');

​
Chart Symbology

ENC charts use standardized S-52 symbology for consistent navigation:
  • Depth Contours: Lines connecting points of equal depth
  • Soundings: Spot depth measurements in chart datum
  • Drying Heights: Areas that dry at low tide
  • Rocks: Above/below water rocks with danger indicators
  • Wrecks: Shipwrecks with depth and danger classifications
  • Obstructions: Underwater cables, pipelines, etc.
  • Traffic Separation: One-way traffic lanes
  • Anchorage Areas: Designated anchoring zones
  • Restricted Areas: Military, environmental, or other restrictions

​
Chart Updates

CHRT provides access to the latest chart editions and corrections:

​
Update Frequency

Chart TypeUpdate FrequencySource
Critical AreasWeeklyNational hydrographic offices
Port ApproachesMonthlyPort authorities
Coastal ChartsQuarterlySystematic surveys
Ocean ChartsAnnuallyInternational coordination

​
Version Management

// Check for chart updates
const updates = await chrt.charts.checkUpdates({
  area: {
    north: 37.8,
    south: 37.7,
    east: -122.3,
    west: -122.5
  }
});

console.log('Available updates:', updates.length);

// Download updated charts
for (const update of updates) {
  await chrt.charts.downloadUpdate(update.id);
}

​
Coverage Areas

CHRT provides global ENC coverage with varying detail levels:
  • Global Coverage
  • Detailed Regions
  • Specialized Charts
  • 200+ Countries: Comprehensive worldwide coverage
  • Major Ports: Detailed harbor and approach charts
  • Shipping Routes: Key commercial navigation corridors
  • Coastal Areas: Complete shoreline mapping

​
Performance Optimization

​
Caching Strategy

// Implement intelligent tile caching
const tileCache = new Map();

async function getCachedTile(z, x, y) {
  const key = `${z}/${x}/${y}`;
  
  if (tileCache.has(key)) {
    return tileCache.get(key);
  }
  
  const tile = await fetchTile(z, x, y);
  tileCache.set(key, tile);
  
  // Expire after 1 hour
  setTimeout(() => tileCache.delete(key), 3600000);
  
  return tile;
}

​
Preloading

// Preload tiles for expected navigation
async function preloadArea(bounds, zoom) {
  const tiles = calculateTilesInBounds(bounds, zoom);
  
  const promises = tiles.map(({ x, y }) => 
    getCachedTile(zoom, x, y)
  );
  
  await Promise.all(promises);
  console.log(`Preloaded ${tiles.length} tiles`);
}

​
Error Handling

Handle common chart tile scenarios: 
async function fetchTileWithFallback(z, x, y) {
  try {
    const response = await fetch(`/enc/tiles/${z}/${x}/${y}.png`, {
      headers: { 'Authorization': 'Bearer chrt_pk_live_...' }
    });
    
    if (response.status === 404) {
      // No chart data for this area
      return null;
    }
    
    if (response.status === 429) {
      // Rate limited - retry with backoff
      await delay(1000);
      return fetchTileWithFallback(z, x, y);
    }
    
    return await response.blob();
    
  } catch (error) {
    console.error('Tile fetch failed:', error);
    return null; // Return placeholder or cached tile
  }
}

​
Next Steps

Interactive Features

Learn to identify chart objects and features

Offline Packages

Download chart areas for offline use

Spatial Queries

Search and filter chart data

Integration Guide

Complete implementation walkthrough