A map of the world for your app,
with 3D terrain.

<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.13.0/dist/maplibre-gl.css">
<style>#map { height: 480px; }</style>
<div id="map"></div>
<script type="module">
import * as maplibregl from "https://unpkg.com/maplibre-gl@6.13.0/dist/maplibre-gl.mjs";

const map = new maplibregl.Map({
  container: "map",
  style: "https://api.overpass.ch/v1/YOUR_KEY/maps/styles/light.json?lang=en",
  center: [8.54, 47.37], // longitude, latitude
  zoom: 13
});
map.addControl(new maplibregl.NavigationControl());
</script>

const map = new maplibregl.Map({
  container: "map",
  style: "https://api.overpass.ch/v1/YOUR_KEY/maps/styles/light.json?terrain=1",
  center: [7.6586, 45.9763], // the Matterhorn
  zoom: 12.5,
  pitch: 70,
  maxPitch: 85
});
map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }));

// the terrain source on its own, for your own style:
// { "type": "raster-dem", "url": "https://api.overpass.ch/v1/YOUR_KEY/maps/terrain.json" }

<!-- Leaflet shows vector maps through MapLibre, with the maplibre-gl-leaflet plugin.
     It needs the classic (UMD) build of MapLibre, which version 5 still has. -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.1.4/leaflet-maplibre-gl.js"></script>
<style>#map { height: 480px; }</style>
<div id="map"></div>
<script>
const map = L.map("map").setView([47.37, 8.54], 13);
L.maplibreGL({
  style: "https://api.overpass.ch/v1/YOUR_KEY/maps/styles/light.json"
}).addTo(map);
</script>

import Map from "ol/Map";
import { apply } from "ol-mapbox-style";

const map = new Map({ target: "map" });
apply(map, "https://api.overpass.ch/v1/YOUR_KEY/maps/styles/light.json");

Layer → Add Layer → Add Vector Tile Layer → New → New Generic Connection

Name:       overpass.ch map
URL:        https://api.overpass.ch/v1/YOUR_KEY/maps/vector/{z}/{x}/{y}.mvt
Max. zoom:  14
Style URL:  https://api.overpass.ch/v1/YOUR_KEY/maps/styles/light.json

# QGIS sends no referer: use a key without a website restriction.