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/leaflet@1.9.3/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/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/maptoolkit-maptoolkit.summer/{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 instead.