Tedd hozzá a detectRetina: true kapcsolót, és a Leaflet @2x.png csempéket kér a nagy felbontású kijelzőkön (darabja 5 egység a keretből). A Starter csomagtól érhető el.
Az alaptérképeken túl adatrétegeket is kiszolgálunk: átlátszó PNG-csempéket, élő nyílt adatból renderelve (DWD ICON-EU), Európa-szerte, a 3–11. nagyításon. Válassz réteget:
Két további végpont ugyanazzal a kulccsal: /geocode (keresés és fordított geokódolás, Photon/OpenStreetMap alapon) és /route (fordulónkénti útvonaltervezés, Valhalla alapon). Mindkettő a saját EU-s szervereinken fut — egyetlen külső hívás sem hagyja el a gépet.
Írj be két címet, vagy kattints kétszer a térképre.
Írj be két címet, vagy kattints kétszer a térképre.
9 · Egy stílus, négyféleképpen — mind a négy együtt mozog
Ugyanaz a voyager stílus, négyféle kiszolgálással. Húzd vagy nagyítsd bármelyik panelt, a másik három követi — így mindig pontosan ugyanazt a nézetet hasonlítod össze. A panelek alatti számlálók azt mutatják, mennyi adat megy át a dróton az egyes megoldásoknál.
Vector · MapLibre GLnatív
loading…
Vector · Leafletmaplibre-gl-leaflet
loading…
Raster · 1×.png
loading…
Raster · @2x@2x.png
loading…
Húzd vagy nagyítsd bármelyik panelt, és indul a mérés.
// 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;
}));
10 · Optimalizált vektor — ugyanaz a csempe, háromféle hangolással
Azonos csempe, azonos stílus — csak a beállítás más. A számokat a böngésződ méri, egymás után: ha egyszerre futnának, ugyanazon a videokártyán versengenének, és a később indulók mindig lassabbnak látszanának. A mérés végén a három panel összekapcsolódik, utána bármelyiket húzhatod vagy nagyíthatod.