The same voyager style, served four different ways. Drag or zoom any panel and the
other three follow, so you are always comparing the identical view. Watch the counters underneath: they show
what each approach actually costs over the wire.
Vector · MapLibre GLnative
loading…
Vector · Leafletmaplibre-gl-leaflet
loading…
Raster · 1×.png
loading…
Raster · @2x@2x.png
loading…
Pan or zoom any panel to start measuring.
// 1 — vector, native MapLibre GL
new maplibregl.Map({ container: 'a', style: 'https://tilezza.eu/api/style/voyager?key=YOUR_KEY' });
// 2 — the same vector tiles inside Leaflet
L.maplibreGL({ style: 'https://tilezza.eu/api/style/voyager?key=YOUR_KEY' }).addTo(L.map('b'));
// 3 — raster
L.tileLayer('https://tilezza.eu/raster/voyager/{z}/{x}/{y}.png?key=YOUR_KEY', { maxZoom: 19 }).addTo(L.map('c'));
// 4 — raster, retina (@2x). Same tile, 4x the pixels.
L.tileLayer('https://tilezza.eu/raster/voyager/{z}/{x}/{y}@2x.png?key=YOUR_KEY', { maxZoom: 19 }).addTo(L.map('d'));
// keep them locked together — Leaflet and MapLibre both expose getCenter/getZoom
let zar = false;
const koss = (tagok) => tagok.forEach(t => t.on('move', () => {
if (zar) return; zar = true;
const c = t.getCenter(), z = t.getZoom();
tagok.forEach(m => { if (m === t) return;
m.jumpTo ? m.jumpTo({ center: [c.lng, c.lat], zoom: z })
: m.setView([c.lat, c.lng], z, { animate: false }); });
zar = false;
}));
8 · Optimised vector — same tiles, tuned three ways
Identical tiles and style; only the setup differs. Numbers are measured in your browser
one after another — running them at once would make them fight over the same GPU and the later ones
would always look slower. Once measured, the three lock together: drag or zoom any of them.