Leaflet

Leaflet is a lightweight JavaScript library for interactive maps. It works with raster tile sources, so you use it with Maptoolkit’s Raster Tiles endpoint.

You’ll need a Maptoolkit API key to use the tile endpoint - see Authentication to get one.

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css" />

npm

npm install leaflet

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

Basic setup

Create a map and add a Maptoolkit raster tile layer using L.tileLayer. The {ratio} placeholder enables retina (2×) tiles on high-DPI screens:

const map = L.map('map').setView([48.21, 16.37], 12);

L.tileLayer(
  'https://rtc-cdn.maptoolkit.net/rtc/toursprung-terrain/{z}/{x}/{y}{ratio}.png?api_key=YOUR_API_KEY',
  {
    ratio: L.Browser.retina ? '@2x' : '',
    maxZoom: 18,
    attribution:
      "© <a href='https://www.maptoolkit.com'>Maptoolkit</a> " +
      "© <a href='https://www.openstreetmap.org/copyright'>OSM</a>",
  }
).addTo(map);

Limitations

Leaflet renders raster tiles only and does not support vector tile styles or 3D terrain. For vector maps or 3D terrain, use MapLibre GL JS or Maptoolkit Maps JS instead.