Leaflet

Leaflet is a lightweight JavaScript mapping library. You can use it with MapRiot in two ways:

Raster tiles — simple L.tileLayer, no extra dependencies, 5 units per tile
Vector tiles via maplibre-gl-leaflet — full outdoor style rendered by MapLibre GL inside Leaflet, 1 unit per source tile

Full working example (vector): github.com/mapriot/map-examples/Leaflet — uses maplibre-gl-leaflet with transformRequest.

Raster tiles (simple)

The easiest integration — one tile URL, no vector renderer needed. Each tile costs 5 units (composited server-side).

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>MapRiot — Leaflet (Raster)</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <style>
    body { margin: 0; }
    #map { width: 100%; height: 100dvh; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    const map = L.map('map').setView([50.08, 14.42], 13);

    L.tileLayer(
      'https://api.mapriot.com/styles/outdoor/raster/{z}/{x}/{y}?apiKey=YOUR_API_KEY',
      {
        attribution:
          '<a href="https://mapriot.com/copyright" target="_blank">&copy; MapRiot.com</a> ' +
          '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
        maxZoom: 18,
      }
    ).addTo(map);
  </script>
</body>
</html>

Vector tiles via maplibre-gl-leaflet

For the full outdoor style with vector rendering, interactivity, and smooth zooming inside a Leaflet map. Uses maplibre-gl-leaflet. Each source tile costs 1 unit.

npm install leaflet maplibre-gl @maplibre/maplibre-gl-leaflet

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'maplibre-gl/dist/maplibre-gl.css';
import '@maplibre/maplibre-gl-leaflet';

const MAPRIOT_APIKEY = 'YOUR_API_KEY';

const map = L.map('map', {
  center: [50.08, 14.42],
  zoom: 10,
});

L.maplibreGL({
  style: 'https://api.mapriot.com/styles/outdoor.json',
  attributionControl: {
    customAttribution:
      '<a href="https://mapriot.com/copyright" target="_blank">&copy; MapRiot.com</a> ' +
      '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
  },
  transformRequest: (url) => {
    if (url.startsWith('https://api.mapriot.com') && !url.includes('apiKey')) {
      return {
        url: url + (url.includes('?') ? '&' : '?') + 'apiKey=' + MAPRIOT_APIKEY,
      };
    }
    return { url };
  },
}).addTo(map);

Notes

Raster tiles are the simplest option — one URL, works everywhere, no build step
Vector via maplibre-gl-leaflet lets you use the outdoor style JSON directly within Leaflet, but requires a bundler and WebGL support
Both approaches require MapRiot + OSM attribution