MapLibre

Add 1224Tools Bathymetry to a MapLibre GL JS map as a transparent raster overlay without replacing your existing basemap.

Overview

1224Tools Bathymetry uses standard XYZ raster tiles, so it can be added to MapLibre GL JS as a raster source and raster layer.

The bathymetry layer is transparent and is intended to be displayed above an existing basemap.

Tile URL

https://tiles.1224tools.com/v1/{z}/{x}/{y}.png?key=YOUR_API_KEY

Replace YOUR_API_KEY with the API key provided for your 1224Tools Bathymetry account.

Basic Integration

Add the bathymetry source after your MapLibre map has loaded, then add a raster layer using that source.

const BATHYMETRY_API_KEY = 'YOUR_API_KEY';

map.on('load', () => {
  map.addSource('1224tools-bathymetry', {
    type: 'raster',
    tiles: [
      `https://tiles.1224tools.com/v1/{z}/{x}/{y}.png?key=${BATHYMETRY_API_KEY}`
    ],
    tileSize: 256,
    minzoom: 7,
    maxzoom: 13
  });

  map.addLayer({
    id: '1224tools-bathymetry',
    type: 'raster',
    source: '1224tools-bathymetry',
    paint: {
      'raster-opacity': 1
    }
  });
});

Zoom Levels

Native bathymetric contour tiles are available from Z7 through Z13.

MapLibre can continue displaying the layer above Z13 by using the Z13 source tiles at higher map zoom levels. This is overzooming and does not introduce additional bathymetric detail.

Adjusting Opacity

You can adjust the visibility of the bathymetry overlay by changing the raster layer opacity.

map.setPaintProperty(
  '1224tools-bathymetry',
  'raster-opacity',
  0.6
);

Show or Hide the Layer

// Hide
map.setLayoutProperty(
  '1224tools-bathymetry',
  'visibility',
  'none'
);

// Show
map.setLayoutProperty(
  '1224tools-bathymetry',
  'visibility',
  'visible'
);

Layer Order

Bathymetry should normally be placed above the basemap so that the transparent contour lines and depth labels remain visible.

If your map contains additional overlays, labels or interactive layers, choose the layer position that best fits your application’s visual hierarchy.

Important Notes

• Native tile zoom levels are Z7 through Z13.
• Tiles use the XYZ scheme and Web Mercator projection.
• Tile images are transparent 256 × 256 PNG files.
• Contour depth labels are included in the tile images.
• Overzooming above Z13 does not add additional bathymetric detail.
• Coastline alignment may vary between basemap providers, especially around small islands and complex shorelines.