Examples

New to tiles? Read the deep guide: How map tiles work — raster vs vector, Leaflet vs MapLibre.

Everything below runs on live Tilezza tiles. Swap YOUR_KEY for the key from your dashboard.

1 · Pick a style

Built-in styles — click to preview on the live map below.

2 · Markers & popups (Leaflet)

The light style is tuned so markers pop. Click the markers.

3 · Your own colors — one URL parameter

Base style for the two vector demos below — includes indigo, our vector-only brand flavor:

Vector styles accept color overrides: water, land, parks, forest, roads, highway, buildings, boundaries, labels (+ hide_labels=1, hide_pois=1, lang=de, lite=1 mobile mode, font=Montserrat or font=Open Sans).

4 · MapLibre GL quickstart (vector)

<script src="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.js"></script> <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.css"> <div id="map" style="height:400px"></div> <script> new maplibregl.Map({ container: 'map', style: 'https://tilezza.eu/api/style/voyager?key=YOUR_KEY', center: [19.04, 47.5], zoom: 6 }); </script>

5 · Retina (@2x) raster — razor-sharp on phones

Add detectRetina: true and Leaflet requests @2x.png tiles on HiDPI screens (5 quota units each). Available from the Starter tier.

L.tileLayer('https://tilezza.eu/raster/voyager/{z}/{x}/{y}.png?key=YOUR_KEY', { maxZoom: 19, detectRetina: true, attribution: '© OpenStreetMap contributors © Protomaps' }).addTo(map);

6 · Compare two styles — synced maps

Two Leaflet maps locked together (light vs. midnight) — drag or zoom either one.

const a = L.map('left').setView([47.5, 19.04], 7); const b = L.map('right', { zoomControl: false }).setView([47.5, 19.04], 7); L.tileLayer('https://tilezza.eu/raster/light/{z}/{x}/{y}.png?key=YOUR_KEY', { attribution: ATTR }).addTo(a); L.tileLayer('https://tilezza.eu/raster/midnight/{z}/{x}/{y}.png?key=YOUR_KEY', { attribution: ATTR }).addTo(b); let zar = false; const koss = (x, y) => x.on('move', () => { if (zar) return; zar = true; y.setView(x.getCenter(), x.getZoom(), { animate: false }); zar = false; }); koss(a, b); koss(b, a);

7 · Data overlay tiles — live weather layers

Beyond base maps we serve data overlays: transparent PNG tiles rendered from live open data (Open-Meteo), Europe-wide, zoom 3–11. Pick a layer:

L.tileLayer('https://tilezza.eu/raster/grayscale/{z}/{x}/{y}.png?key=YOUR_KEY', { maxZoom: 19, attribution: '© OpenStreetMap contributors © Protomaps' }).addTo(map); L.tileLayer('https://tilezza.eu/overlay/aszaly/{z}/{x}/{y}.png', { maxZoom: 11, maxNativeZoom: 7, opacity: .75, attribution: 'drought: Open-Meteo' }).addTo(map);
Attribution (© OpenStreetMap contributors © Protomaps) is embedded in every style and TileJSON — Leaflet and MapLibre display it automatically. Please keep it visible.